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

  • Profile Image
    seaforthfishco
    Asked 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.

  • Profile Image
    david
    Answered 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
    seaforthfishco
    Answered 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
    seaforthfishco
    Answered on June 14, 2017 at 06:10 PM

     

  • Profile Image
    david
    Answered 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
    seaforthfishco
    Answered 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
    Mike_G
    Answered 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
    seaforthfishco
    Answered 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
    EltonCris
    Answered 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
    seaforthfishco
    Answered 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.