HTML for reusable forms on site

  • Zimmerman_John
    Asked on January 12, 2022 at 1: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?

  • Alexander_G
    Replied on January 12, 2022 at 5: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

  • Zimmerman_John
    Replied on January 12, 2022 at 6: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.

  • Kenneth JotForm Support
    Replied on January 13, 2022 at 3: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 Screenshot 10

    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.