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

    How do I use a form by putting the source code directly on my webpage?

    Asked by seaforthfishco on June 14, 2017 at 01:31 PM

    I am using Autopilot and need to track conversions, but the form is in an IFrame.  How do I put the source code for the form directly on my page?  I am using Shopify.  So far I have not been able to figure it out.

    Page URL:
    https://www.seaforthfish.com/pages/form

  • Profile Image
    JotForm Support

    Answered by david on June 14, 2017 at 02:45 PM

    Here is our guide on getting the full source code for your form:

    https://www.jotform.com/help/104-How-to-get-the-Full-Source-Code-of-your-Form

    It does looks like Shopify accepts scripts so you should be able to use the regular method of adding the form when using the source code:

    https://www.jotform.com/help/217-Adding-a-form-to-Shopify-Store-Frontpage

  • Profile Image

    Answered by seaforthfishco on June 14, 2017 at 06:08 PM

    Thanks David.  I had tried that, but when I do it this way the form is nothing like the one I created.  It is visually very unappealing, and loses formatting.

  • Profile Image

    Answered by seaforthfishco on June 14, 2017 at 06:10 PM

     

  • Profile Image
    JotForm Support

    Answered by david on June 14, 2017 at 06:39 PM

    Using the form source code allows the form to interact with the page.  Any CSS and scripts running in the page also apply to the form.  Using the the iFrame code insulates the form from the page and allows for the form to look as it does on JotForm.

    You can try hosting the code your on your site.  There is information on how to download the source in the source code guide:

    https://www.jotform.com/help/104-How-to-get-the-Full-Source-Code-of-your-Form

  • Profile Image

    Answered by seaforthfishco on June 14, 2017 at 06:43 PM
    When I do it that way the form is nothing like the one I created. It has no formatting and is very unappealing.
    --------------------------------------------
    Stephanie Devine
    www.seaforthfish.com
    Owner | Seaforth Fish Company
    949-232-7530
    Manage Your Account
    ...
  • Profile Image
    JotForm Support

    Answered by Mike_G on June 14, 2017 at 08:08 PM

    Like what my colleague, David, have mentioned, if you embed the form using the form's Full Source Code, any scripts or CSS running on your page will also be applied to the form. The form may not look like the one you created in the form builder because of conflicts between scripts/CSS (style).

    You can, of course, add scripts and/or CSS to your page to format or style the form manually.

  • Profile Image

    Answered by seaforthfishco on June 14, 2017 at 08:12 PM

    Thanks guys.  So I downloaded the source code yesterday to try hosting it on my site, but now that I have it I'm at a loss.  I am more comfortable with html.  Can you help me get it installed?

  • Profile Image
    JotForm Support

    Answered by EltonCris on June 14, 2017 at 10:07 PM

    Your form looks greats actually. I think it just needs a little tweak on the styling and it's good to go, not unless you want the actual form layout like in the standalone version.

    Anyways, if you want to correct some of the stylings in your current embedded form, add this CSS codes on top of the form source code.

    <style> .form-all {margin: 0 auto !important; } .form-section {padding: 0px 0px 0px 0px; margin: 0 !important; list-style: none !important; } .form-all table td, .form-all table th {border: none !important; vertical-align: top; } table tr {border: none !important; }.formFooter {display: none;} span.phone-separate {display: none; } .form-label-left, .form-label-top {width: 100% !important; } .form-dropdown {background-color: #fff !important;color: #5f5f5f !important;}</style>

    This should center align the form, remove the bullets and fix the spacing issues.

    If you want to stay with the default layout of your form, then you will have to re-embed your hosted form as an iframe.

    You can use the following:

    <iframe allowtransparency="true" src="https://www.yourwebsite.com/form.html" frameborder="0" style="width:100%; height:840px; border:none;" scrolling="no"> </iframe>

    Replace the URL with your hosted HTML file.

    Hope this helps!

  • Profile Image

    Answered by seaforthfishco on June 15, 2017 at 11:16 AM

    Thanks so much!  I was able to get it looking a lot better with your help.  I think this will work out fine.