How to display my form using a Popup?

  • Profile Image
    jpehrler
    Asked on March 14, 2016 at 02:46 PM

    Can you tell me how click a button on my site and have my form pop-up?

     

    Thanks :)

     

  • Profile Image
    Kiran
    Answered on March 14, 2016 at 03:46 PM

    I understand that you want to embed your JotForm on webpage so that the form opens in a popup. Please follow the steps below:

    1. Click on Publish icon on your JotForm to open the Publish wizard.

    2. Click on Embed on the wizard and then choose Pop-up from the Embed options

    3. You may copy the code displayed and add it to your webpage so that a link shall be displayed. When the link is clicked, the form should be displaying in a pop-up.

    You may check the Preview from the publish wizard.

    Hope this information helps! Please get back to us if you need any further assistance. We will be happy to help. 

     

  • Profile Image
    jpehrler
    Answered on March 14, 2016 at 05:49 PM

    Don't want it displayed as a link.  I want a button, that when clicked, the form opens (pops up).

     

    Thanks.

  • Profile Image
    Kiran
    Answered on March 14, 2016 at 06:08 PM

    Please try using the following code :

    <a target="_blank" href="javascript:void( window.open( 'https://form.jotform.com/41565471934157', 'blank', 'scrollbars=yes, toolbar=no, width=700, height=500' ) ) "> <button>MN Main Contact Form 1 </button></a>

    You may consider using the Feedback button from the Embed options. 

    Hope this information helps! Please get back to us if you need any further assistance. We will be happy to help. 

  • Profile Image
    jpehrler
    Answered on March 15, 2016 at 06:28 AM

    This is getting there, but 3 things:

    1.  When opened, the form is a jammed up on the left, with little padding.

    2.  The form should open centered, right over the button.

    3.  How do I change the look of the button?

  • Profile Image
    mert
    Answered on March 15, 2016 at 10:00 AM

    To center the pop up window, please add the "left" and "top" variables to the "window.open()", then set them as "600". Please, see it from the below:

     

    <a target="_blank" href="javascript:void( window.open( 'https://form.jotform.com/41565471934157', 'blank', 'scrollbars=yes, toolbar=no, left=600, top=600, width=500, height=500' ) ) "> <button>MN Main Contact Form 1 </button></a>

     

    In addition, you can give style by adding "style=""" inside the <button> tag, then you need to add some CSS rules (showed in green areas) in it as it is seen from the below:

    <a target="_blank" href="javascript:void( window.open( 'https://form.jotform.com/41565471934157', 'blank', 'scrollbars=yes, toolbar=no, left=600, top=500, width=500, height=500' ) ) "> <buttonstyle="background-color:green;border: none; color: white; padding: 15px 32px; text-align: center; display: inline-block; font-size: 16px;">MN Main Contact Form 1 </button></a>

     

    Also, the code above will be the final look of your button code. Below, you can see the result of the styled button:

     

     

    Please, do let us know about the results.

    Regards.