A Guide to Embed Forms for WordPress Users

WordPress is the most popular content management system in the world. It started as a platform exclusively for blogging but has grown and advanced significantly over the years. As of January 2015, more than 23.3% of the top 10 million websites used WordPress.

Jotform strives hard to make sure that forms will work for the most popular CMSes on the market. For WordPress.org (self-installed) users, you can display your Jotform form to any post or page using our plugin.

We’ve broken this user guide into the following items:

• Using Embed Form Plugin for WordPress
• Using Jotform oEmbed Plugin for WordPress
• Setting up the Feedback Button Plugin for WordPress
• Getting and Using the Embed Code for WordPress
• Adding Jotform Form to WordPress.com

Using WordPress Embed Form Plugins

For WordPress.org users, install our embed form plugin and embed your Jotform form by inserting the form’s shortcode.

1. Assuming you’re already logged in to your WordPress dashboard, click the Add New option under the Plugins section.
2. Search for Jotform. You will find three different plugins authored by Jotform.com. The Embed Form plugin is labeled Jotform Online Forms – Drag & Drop Form Builder, Securely Embed Contact Forms.
3. Click the Install Now button.

4. Once installed, click the Activate button to activate the plugin.

5. Go back to your WordPress dashboard, and edit the post or page where you want to display the form.
6. If you’re using the Gutenberg editor, you will have to add a Classic block to see the Jotform icon.
7. In the classic editor, click the Jotform icon to select your form. At this step, the modal window may ask you to log in to your Jotform account. If you have an active Jotform session through the other tab, you will automatically see your list of forms.

8. Select the form from the list.
9. Click the Continue button.

10. You will automatically see the shortcode of the form in the Classic block. Click the Update button to save your post/page.

Using Jotform oEmbed Plugin for WordPress

1. Install and activate the Jotform oEmbed plugin.

2. Copy your form URL from the Publish tab of the Form Builder.

2. Edit your post/page where you want to display the form.
3. Paste your form to the editor. The oEmbed plugin will work for both Classic and Gutenberg editors. At this step, you should see the form displayed on the page.
4. Click the Update button for your post/page to save the changes.

Setting up the Feedback Button Plugin for WordPress

1. Install and activate the Jotform Feedback Button plugin.

2. Go to the Settings section, and click the Jotform Feedback Button option from the list.
3. Click the Search icon from the Form ID option.

4. Select your feedback form from the list.
5. Click the Continue button.

6. At this step, the Form ID is in place. Set up the other options to your preferred configurations.
7. Click the Save Changes at the bottom. You should see the Feedback Button displayed on your website.

See also: Creating a Feedback Button

Getting and Using the Embed Code for WordPress

If you prefer not to use a plugin, you can also embed the form to your WordPress post/page using the embed methods.

1. In the Form Builder, go to the Publish tab.
2. Click Platforms on the left.
3. Search and click WordPress.org.
4. Click the Copy Code button on the next window.

5. Edit your post/page from your WordPress website.
6. If using the Gutenberg editor, add the Custom HTML block. If you’re still using the Classis Editor, you will have to toggle the Text/HTML editor to embed the form.
7. Paste your form’s embed codes.
8. Click the Update button to save the changes to your post/page.

See also: Adding Forms to WordPress.org Version

Adding Jotform Form to WordPress.com

For your website hosted with WordPress.com, adding a Jotform form within your post or page is easy as placing embed tags around your form’s URL.

1. In the Form Builder, go to the Publish tab.
2. Click Platforms on the left.
3. Search and click WordPress.com.
4. Click the Copy Code button on the next window.

5. In your WordPress post/page editor, add the Shortcode or Custom HTML block and paste the embed tags for your form.

6. Click the Update button at the top to save the changes.

See also: How to Embed a Form to WordPress.com