What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Hide survey behind button

    Asked by sydneybellows on July 23, 2012 at 04:27 PM

    Hi,

    I am trying to put a form on my webpage but I would like it to display when clicking on a button. If you view my webpage through the url provided you can see that there is the form and then there is a button below it labled 'Order Form'. I only want the 'Order Form' button to be displayed and then upon clicking the botton the form to show up.

    I tried using the code <FORM METHOD="LINK" ACTION="YOUR FORM URL HERE"> <INPUT TYPE="submit" VALUE="Order Form"> </FORM> and then adding in different URLs from JotForm but I have not been able to get it to work correctly.\

     

    Also, when you click on the button 'Order Form' it adds the product to the shopping cart. I do not want that to happen.

    Thank you,

    Sydney

    Page URL:
    http://betterthanacupcake.com/collections/skirts/products/empire-skirt<br/>-with-suspenders

  • Profile Image
    JotForm Support

    Answered by idarktech on July 23, 2012 at 08:03 PM

    Hi Sydney,

    This can be done with lightbox embed code and then modify the button style to match it with your order button style. Here, I have generated the lightbox code for you and added the button style. Please re-embed your form using this:

    <script src="//jotform.me/min/g=feedback2" type="text/javascript">

    new JotformFeedback({

    formId:'22034368142143',

    base:'http://jotform.me/',

    windowTitle:'Order Form',

    background:'#FFA500',

    fontColor:'#FFFFFF',

    type:false,

    height:500,

    width:700

    });

    </script>

    <a class="lightbox-22034368142143" style="cursor:pointer;color:blue;text-decoration:none;border: none;outline: none;padding: 10px 25px;color: white;background: black;font-size: 12px;font-style: italic;text-transform: lowercase;font-family: Georgia, serif;">Order Form</a>

    Result: http://idarktech.com/test_order_form.html

    Hope this helps. Let us know if you need any further assistance with this. Thanks!

  • Profile Image

    Answered by sydneybellows on July 24, 2012 at 11:52 AM

    That worked great! Thank you!

  • Profile Image

    Answered by pinoytech on July 24, 2012 at 12:12 PM

    On behalf of my colleague idarktech, you are welcome. If you need further assistance, feel free to contact us again.

    Thank you!