User Guide

A Guide to Embed Forms for WordPress Users

Last Update: June 1, 2017

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

 

JotForm strives hard to make sure that forms will work for the most popular CMSes on the market. For WordPress users, putting your jotform into a post or page takes just a few steps. The three ways to do this are:

 

  • using WordPress Embed Form Plugins.

  • using our WordPress embed method

  • for hosted WordPress.com users, using the embed method.

 

 

Using WordPress Embed Form Plugins

 

For WordPress.org users, you install our embed form plugin, and then use shortcodes to embed the form. First install the plugin: https://wordpress.org/plugins/embed-form.  

 

  1. a. Login to your WordPress Admin Panel

  2. b. Click Plugins > Add New option

  3. c. Search for “Embed Form” in the search bar. The developer that will appear should be the one from ‘Ertugrul Emre Ertekin’, our CTO.

  4. d. Click the “Install” button

  5.  

    2015-0416-btsduggx9lpk29n.png

    

 

e. Make sure to activate the plugin

 

https://shots.jotform.com/welvin/screenshot/2015-0416-tdmj31tniook7oo.png

 

f. In your WordPress post/page, you will see the JotForm “pencil” icon. 

So long as you are logged into your JotForm account using the same browser, clicking the icon will popup a window where you can select the form you’d like to embed.

 

2015-0416-2zi4nw5hiby54y3.png

 

2015-0416-slxykfppjattdxy.png

 

 

g. Clicking the “Select Form” button after checking the form will add the shortcode into the post/page:

 

2015-0416-6npug1sbdpqq8y8.png

 

 

h. Save the page and that’s it, the form is now embedded to your post/page.

 

We also have an oEmbed Plugin: https://wordpress.org/plugins/jotform-oembed/. Simply install the plugin by following the same steps above.

 

  1. Get your form URL by clicking “Preview” button in the Form Builder

  2.  

 

 

  1. Paste the form URL in the WordPress post/page and the oEmbed plugin will automatically detect the form and embed it to your page/post.

   

 When pasting the form URL:

 

2015-0416-5a4hd01346q1bx1.png

 

 

When the form is finally loaded/embedded in the post/page:

 

2015-0416-esqkbv1qfe7amzy.png

 

 

For Feedback forms, you can install our Feedback Form Plugin: https://wordpress.org/plugins/jotform-feedback-button/

 

  1. After you install and activate the plugin, simply go to Settings > Jotform Feedback Button

  2. Configure the Feedback Form Button

2015-0416-u1tj8blqgppt0x3.png

 

 

After saving the changes, you will now see the feedback button in every post/page of your website:

 

2015-0416-napz6ubgvg2eb3t.png

 



Using our WordPress embed method

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

 

  1. In the form builder, click “Publish” button. Open the "Platforms" tab and search for Wordpress.

 

 

  1. Select which WordPress from the list is appropriate in your case.

  1. If your website is self hosted using "WordPress.org" files, then follow the instructions listed under the WordPress.org option.

  2. In your WordPress post/page, click “Text” option. Paste the embed code.

 

 

If for some reason the WordPress Embed won’t work, we recommend using our iFrame method: http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

 

Sometimes it may run into a JavaScript conflict with other code on the page, for instance.

 

Using the embed method with WordPress.com

For WordPress.com hosted websites adding a JotForm form is as easy as placing [embed] tags around your form's URL within your post.

 

Or you can follow the steps mentioned in the publish wizard, make sure that you are seeing "WordPress.com".

 

While in the Text mode editor, you can paste the form enclose with an embed tag:

[embed]http://form.jotformpro.com/form/31362999175971[/embed]

 

If your intention is to only have a form on the page, simply copying and pasting the URL on the post body is also enough. Wordpress.com will turn it into an embedded form.

 

 

And that’s it for WordPress.org self hosted and WordPress.com hosted websites. I have you any further questions, please feel free contact us on our support forum.

4 Comments...

  • Gabriel

    i just applied this on the textarea in my word press it not working [embed] http://form.jotformpro.com/form/51114527704953 [/embed]

    and when i applied:

    the action in the form are disabled.

  • BestSkin

    plugin does not work with WP 4.5 and above

  • smh3528

    this does not make a pop up window it opens it up onto another screen any way to make it a pop up

  • rudemechs

    stripe integration isn't working with form embedded in wordpress.com - https://rudemechs.com/offcenterteens/ - it just hangs at "please wait" after you hit submit.

Send Comment