How to Create a Pop-up Form with Jotform

August 12, 2022

Jotform has an embed option to open forms as a pop-up window. They can look like this:

If that’s how you want to embed a form on your website, just follow these steps.

  1. In the Form Builder, click Publish at the top.
  2. Go to the Embed section on the navigation menu on the left side of the screen.
  3. Select Pop-up, then copy the code provided.

Paste the code on your website’s source code and that’s all there is to it!

The actual link will bear your form’s title. You can stop here and the code should work as is but if you want to customize it a bit, here are some key pointers that you should know.

First, let’s have a look at the actual embed code (where {formID} is your Form ID):

<a href="javascript:void( window.open( 'https://form.jotform.com/{formID}', 'blank', 'scrollbars=yes, toolbar=no, width=700, height=500' ) ) "> Form Title goes here </a>
  • You would notice that the href attribute contains JavaScript so if you’re using a website builder that strips off scripts, it will not work.
  • You can set the width and height of the pop-up window upon your discretion by changing the width and height values on the embed code.
  • You can incorporate this to an existing link, button, or menu on your website. All you need is the href attribute value and use that in place of the href attribute value of your existing link, button, or menu.

Example:

Suppose you have a “Reserve My Seat” link on your website. To make your embed code work on that link, just replace its href attribute value with:

javascript:void( window.open( 'https://www.jotform.com/{formID}', 'blank', 'scrollbars=yes, toolbar=no, width=700, height=500' ) )

Comments and suggestions are welcome below. If you have a question, contact us by creating a support ticket.

Was this guide helpful?
Contact Support:

Our customer support team is available 24/7 and our average response time is between one to two hours.
Our team can be contacted via:

Support Forum: https://www.jotform.com/answers/

Contact Jotform Support: https://www.jotform.com/contact/

Send Comment:

Jotform Avatar
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Comment:

Podo CommentBe the first to comment.