How can I edit the source code within Jotform and then use the Embed link to display on site

  • Profile Image
    takeawaysonline
    Asked on February 02, 2014 at 05:28 PM

    From my previous thread please see the link below, This is what it looks like If I inject the HTML code directly. If I use the Embed script It works correctly with all the styling

  • Profile Image
    EltonCris
    Answered on February 02, 2014 at 06:15 PM

    Hi,

    Any specific reason why you're embedding the form using source code? You can actually use the default embed code and embed it to your website.

    ---

    The reason why it's messed up is because the form CSS styles is overwritten by your website form styles. If you really want to use the source code, I would suggest saving your form source code as html file first, e.g. myform.html, upload this file to your server and then embed it as iframe on your page.

    Example:

    <iframe allowtransparency="true" src="http://www.mywebsite.com/myform.html" frameborder="0" style="width:100%; height:465px; border:none;" scrolling="no"></iframe>

    Hope this helps.

    Regards!

  • Profile Image
    takeawaysonline
    Answered on February 03, 2014 at 04:18 AM

    The reason Im using it in this manner is, in my previous support request about the messed up responsive view of the date and time picker, you gave me a css fix. In order for me to apply this I need to use the source code as I cant edit the actual embed script on Jotform

  • Profile Image
    ardy0689
    Answered on February 03, 2014 at 06:12 AM

    Hello, just like what my colleague has mentioned that it is possible that your website's CSS is interfering and overwriting the JotForm CSS.

    You should use the source code and save it as an HTML file. Then host it on your server. You can then apply the CSS fix from the HTML file. Just like what my colleague has suggested, to avoid further conflicts you should enclose the HTML file and link it via IFRAME

    <iframe allowtransparency="true" src="http://www.mywebsite.com/myform.html" frameborder="0" style="width:100%; height:465px; border:none;" scrolling="no"></iframe>

    My colleague's suggestion should preserve the CSS fix and while making your form easy to embed to any part of your webpage using iframe. If you have not tried this method, please do so and let us know if this issue persists. Thank you