HTML for reusable forms on site

  • Profile Image
    Zimmerman_John
    Asked on January 12, 2022 at 01:56 PM

    Hi there,

    We are using Jotform forms for a variety of lead captures, forms, and event registrations. It has been really difficult to handle all the CSS/form styling to embed in our website within the form settings, because we can't reuse the same form on different pages/locations on our site.

    Is there anyway to just get the HTML so that we can style the fields within our own site containers?

  • Profile Image
    Alexander_G
    Answered on January 12, 2022 at 05:03 PM

    Hello, 👋

    Thanks for contacting us.


    You may download the full source code of your form using this article:

    👉 How to get the full source code of your form


    Thanks,

    Alex

  • Profile Image
    Zimmerman_John
    Answered on January 12, 2022 at 06:20 PM

    Got it, thanks for sending.

    I have looked at the source code before, but it's super heavy and a ton of unused code. Any readon why there isnt a <html> <form field name 1> <form field name 2></html> version so we can just wrap it in CSS, similar to Mailchimp embed, i.e.:

    <!-- Begin Mailchimp Signup Form -->
    <link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
    <style type="text/css">
    #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
    /* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
       We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */

    </style>
    <div id="mc_embed_signup">
    <form action="https://undivided.us5.list-manage.com/subscribe/post?u=c6ed566037069ed35e20795e2&amp;id=78c83a58a0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
        <div id="mc_embed_signup_scroll">
    <h2>Subscribe</h2>
    <div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
    <div class="mc-field-group">
    <label for="mce-FNAME">First Name </label>
    <input type="text" value="" name="FNAME" class="" id="mce-FNAME">
    </div>
    <div class="mc-field-group">
    <label for="mce-MMERGE1">Last Name </label>
    <input type="text" value="" name="MMERGE1" class="" id="mce-MMERGE1">
    </div>
    <div class="mc-field-group">
    <label for="mce-EMAIL">Email Address  <span class="asterisk">*</span>
    </label>
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
    </div>
    <div class="mc-field-group">
    <label for="mce-MMERGE8">Referred by someone? (We'd like to thank them) </label>
    <input type="text" value="" name="MMERGE8" class="" id="mce-MMERGE8">
    </div>
    <div class="mc-field-group input-group">
        <strong>Interested in a free 30-day membership pilot? </strong>
        <ul><li><input type="checkbox" value="1" name="group[25258][1]" id="mce-group[25258]-25258-0"><label for="mce-group[25258]-25258-0">I'm interested in trying out Undivided</label></li>
    </ul>
    </div>
    <div id="mce-responses" class="clear">
    <div class="response" id="mce-error-response" style="display:none"></div>
    <div class="response" id="mce-success-response" style="display:none"></div>
    </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
        <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_c6ed566037069ed35e20795e2_78c83a58a0" tabindex="-1" value=""></div>
        <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
        </div>
    </form>
    </div>
    <script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[11]='FNAME';ftypes[11]='text';fnames[1]='MMERGE1';ftypes[1]='text';fnames[0]='EMAIL';ftypes[0]='email';fnames[8]='MMERGE8';ftypes[8]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
    <!--End mc_embed_signup-->


    Also, I see the Embed to Wordpress option, it just has [embed]https://form.jotform.com/212227354496155form/212227354496155[/embed] which i dropped in an html editor on a Wordpress page, and it didn't render anything. Is there a plugin that needs to be installed first. And is styling able to be managed within the website CSS if we use this alternative? It's just really difficult to manage CSS in jotform at the form level for every single form. And really don't want to install all the source code, we use a TON of forms.

  • Profile Image
    Kenneth_C
    Answered on January 13, 2022 at 03:08 AM

    Hi there,

    If you wish to use an HTML block to embed the form, we suggest that you use the iFrame embed method:

    1642061172_61dfdd7424f3a_a1.jpg

    Here is the related guide: https://www.jotform.com/help/148-getting-the-form-iframe-code/.

    This way, all CSS customizations are done inside the form which is then reflected in your embedded site: https://www.jotform.com/help/117-how-to-inject-custom-css-codes/.

    Let us know if you have any further questions.

    Best.