A Quick Guide to Embedding Forms in WordPress

WordPress is one of the most widely used content management systems today. It began as a simple blogging platform but has evolved into a powerful and flexible tool for building all kinds of websites. With its wide range of themes, plugins, and customization options, WordPress enables anyone to create a site tailored to their specific needs.

If you’re using Jotform, integrating your forms into WordPress is simple. Whether you want to embed a form directly on a page, add a feedback button, or use the dedicated Jotform plugin, you can seamlessly bring your forms into your site and enhance how you collect information from your users.

Watch on youtube

Here are the key ways you can embed your forms in WordPress:

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

Using the Jotform Embed Form Plugin

For WordPress.org users, install the Jotform Embed Form Plugin, then use the Classic Editor block to insert your form’s shortcode directly through the plugin. Here’s how to set it up:

1. Log in to your WordPress Admin Dashboard page, and in the menu on the left, click on Plugins.
2. At the top of the Plugins page, click on Add Plugin.

3. Then, on the Add Plugins page, in the Search Plugins field, enter Jotform.
4. Next, under the Search Results tab, look for Online Forms — Customizable Payment, Contact, Quiz, Survey Form Builder – Jotform, and click on Install Now.

5. Now, click on Activate.

6. In your WordPress post or page editor, click on the Plus icon in the editing area.
7. Then, in the Search field, enter Classic, and click on it.

8. Next, in the Classic Editor window that opens, at the top toolbar, click on the Jotform icon.

9. In the Select Form window that opens, select the form to embed, and then click on Continue.

10. Next, click on Save.

10. Now, at the top-right side of the page, click on Save to finally embed your form and publish the post or page.

Setting up the Feedback Button Plugin for WordPress

The Jotform Feedback Button adds a floating, always-visible tab to your site that lets visitors quickly open and submit your form without leaving the page. Setting it up is quick—here’s how:

1. Log in to your WordPress Admin Dashboard page, and in the menu on the left, click on Plugins.
2. At the top of the Plugins page, click on Add Plugin.

3. Then, on the Add Plugins page, in the Search Plugins field, enter Jotform.
4. Next, under the Search Results tab, look for Feedback Button – Jotform, and click on Install Now.

5. Now, click on Activate.

6. On your WordPress Admin Dashboard page, hover your mouse over the Settings menu on the left, and click on Feedback Button.

7. Then, on the Feedback Button – Jotform page, click on the Search icon on the right side of the Form ID field.

8. Next, in the Select Form window that opens, select the form to embed, and then click on Continue.

9. Now, complete these fields:
   • Button Text — Set the label that appears on the floating button.
   • Form Dimensions (in px) — Define the width and height of the form window when it opens.
   • Screen Alignment — Choose where the button appears on the screen: Top, Right, Bottom, or Left.
   • Horizontal Alignment — Adjust the button’s horizontal position to Left, Center, or Right.
   • Lightbox Style — Pick from Default, White, or Black Accent to match your site’s look.
   • Button and Label Colors — Customize the button and text colors to fit your branding.
10. Finally, click on Save Changes to complete the setup.

Getting and Using the Embed Codes for WordPress

If you prefer not to use a plugin, you can embed the form straight into your WordPress post or page using one of Jotform’s embed methods, specifically for WordPress. Here’s what to do:

1. In Form Builder, in the orange navigation bar at the top of the page, click on Publish.
2. Then, in the menu on the left, click on Platforms.
3. Next, in the All Platforms section, click on WordPress.org.

4. Now, click on Copy Code.

5. In your WordPress post or page editor, click on the Plus icon in the editing area.
6. Then, in the Search field, enter Custom HTML, and click on it.

7. Next, paste the embed code you copied earlier.
8. Now, at the top-right side of the page, click on Save to finally embed your form and publish the changes to the post or page.

Embedding Your Form to WordPress.com

If your site is hosted on WordPress.com, adding a Jotform form to a post or page is as simple as placing embed tags around your form’s URL. This is how it’s done:

1. In Form Builder, in the orange navigation bar at the top of the page, click on Publish.
2. Then, in the menu on the left, click on Embed.
3. Next, in one of the embed options, click on WordPress.

4. Now, click on Copy Code.

5. In your WordPress post or page editor, click on the Plus icon in the editing area.
6. Then, in the Search field, enter Shortcode, and click on it.

7. Next, paste the embed code you copied earlier.
8. Now, at the top-right side of the page, click on Save to finally embed your form and publish the changes to the post or page.

That’s about it! Your form is now fully embedded on your WordPress.org or WordPress.com website. Once published, your visitors will be able to view and submit the form just like any other part of your site.

Watch on youtube