Embedding Forms with WordPress

You can easily embed contact forms, sales order forms, and more within your WordPress website. Depending on which builder you’re working with, you can use either our Cognito Forms WordPress plugin or our readily available embed codes to add forms to your site.

Quick Tip

Our plugin is built to work seamlessly with the Block Editor as well as the Classic Editor. If you’re using another page builder like Elementor, Divi or Beaver Builder, you’ll need to use our embed codes as outlined below to add forms to your WordPress site.

Embedding with the Cognito Forms plugin

To get started, you’ll need to install and activate the Cognito Forms WordPress plugin within WordPress. (If you need help, check out this Managing Plugins page from WordPress.)

Block Editor

You can quickly embed, remove or swap out forms using the Block Editor within WordPress.

Embedding your form

To embed your form using the Block Editor:

  1. Add a new block to the page or post you’d like to add your form.
  2. Find and select the Cognito Forms icon within the Block Gallery. You may have to scroll to the Embeds section within the Block Gallery to find Cognito Forms, or you can search ‘Cognito’ to easily find it.
  3. Choose the Select Form button to open the embed dialog. Once logged in to Cognito Forms, use the provided dropdown fields to find and select your form.
  4. Click Embed to add the form to your page.
  5. Save a draft or publish your changes.
Quick Tip

The Block Editor will default to a seamless type of embed code to use with your form. To change this to an Iframe embed code, open the Settings menu (the gear icon in the top righthand corner) and select Iframe under Block>Form Settings>Embed Mode.

Block Editor will default to a seamless type of embed code to use with your form.

Removing your form

To remove your embedded form from your WordPress page or post:

  1. Open the Block Editor and click on your embedded form.
  2. Click Options (the three dots menu) and select Remove Cognito Forms.
  3. Save a draft or publish your changes.

This will remove the form from your WordPress site, however the form and its entries will still exist within your Cognito Forms account.

Adding Cognito Forms to your WordPress site.

Classic Editor

You can embed, remove or swap out forms using the Classic Editor within WordPress in just a few steps.

Embedding your form

To embed your form using the Classic Editor:

  1. Open the page or post where you’d like to add your form.
  2. Click on the Cognito Forms icon in the editor toolbar to open the embed dialog. Use the provided dropdown fields to find and select your form.
  3. Click Embed. If you see a gray media icon appear, you’ve embedded your form correctly.
  4. Save a draft or publish your changes.

Please note: You must preview your page within the Classic Editor to fully view your embedded form.

Embedding a form using the Classic Editor.

Removing your embedded form

To remove your embedded form, delete the gray media icon within the text editor on your page. Save a draft or publish your changes.

This will remove the form from your WordPress site, however the form and its entries will still exist within your Cognito Forms account.

Embedding with other WordPress builders

You can use our readily available Seamless or Iframe embed codes within any WordPress builder to embed forms into your site. A few popular builders include Elementor, Divi and Beaver Builder:

Quick Tip

You can use Seamless code to embed your form, however many builders will not preview a form in the builder while doing so. For this reason, we recommend using Iframe code for a better editing experience.

Changing or updating your embedded form

Need to update your form? All changes made to your form within Cognito Forms will automatically update across your WordPress site, so there’s no need to re-embed the form into your page or post.

If you need to swap out your embedded form for another one entirely, remove the existing form and repeat the embed steps.

Other Builders

Using another WordPress builder not listed here? Check out our embedding tips.