A guide to forms for WordPress users

Last Update: May 24, 2016

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


    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




  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




  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.



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

2015-0416-c9z3yksb4yakbhn.png




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]

2015-0416-ujecfdtbncuiald.png

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


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.


2015-0416-4wwsquxr3ns8x19.png


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.


3 Comments...


   
Gabriel (August 06, 2015 at 02:34 PM)

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.

View Answer


   
BestSkin (April 19, 2016 at 01:33 PM)

plugin does not work with WP 4.5 and above

View Answer


   
smh3528 (May 06, 2016 at 05:24 PM)

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

View Answer


Send Comment