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

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.

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

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.

 

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

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
...

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.

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?

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!

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