Hello!
My website: Webflow - LLF Website
The form I’m trying to embed: https://www.tfaforms.com/4602947
(HTML Snippet at bottom)
I am working to embed a FormAssembly form in our website via HTML snippet. FormAssembly is an all-in-one type form builder that connects to our payment processor and Salesforce. The recommended way to embed a form into a website is via HTML embed: Embed Your Form's HTML | FormAssembly Resource Center
I’ve tried to paste it into an HTML snippet, but its well over the 10,000 character HTML limit (its 15,000 +).
I looked into posting it on Github and using Javascript to call in the HTML (How to embed files hosted on Github)- but I wasn’t successful because I have no idea how to use Github! and the FormAssembly technical support didn’t recommend it because the custom code might interfere with the form.
Is there a simpler way to work around this other than GitHub or are there more detailed instructions for GitHub?
I’ve pasted the HTML snippet below -
<!-- FORM: HEAD SECTION -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="https://www.tfaforms.com/form-builder/4.3.0/css/wforms-layout.css" rel="stylesheet" type="text/css" />
<!--[if IE 8]>
<link href="https://www.tfaforms.com/form-builder/4.3.0/css/wforms-layout-ie8.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 7]>
<link href="https://www.tfaforms.com/form-builder/4.3.0/css/wforms-layout-ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if IE 6]>
<link href="https://www.tfaforms.com/form-builder/4.3.0/css/wforms-layout-ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
<link href="https://www.tfaforms.com/themes/get/45878" rel="stylesheet" type="text/css" />
<link href="https://www.tfaforms.com/form-builder/4.3.0/css/wforms-jsonly.css" rel="alternate stylesheet" title="This stylesheet activated by javascript" type="text/css" />
<script type="text/javascript" src="https://www.tfaforms.com/wForms/3.10/js/wforms.js"></script>
<script type="text/javascript">
wFORMS.behaviors.prefill.skip = false;
</script>
<script type="text/javascript" src="https://www.tfaforms.com/wForms/3.10/js/localization-en_US.js"></script>
<!-- FORM: BODY SECTION -->
<div class="wFormContainer" >
<style type="text/css">
#tfa_1896,
*[id^="tfa_1896["] {
width: 240.18181824684143px !important;
}
#tfa_1896-D,
*[id^="tfa_1896["][class~="field-container-D"] {
width: auto !important;
}
#tfa_2543-L,
label[id^="tfa_2543["] {
width: 350px !important;
}
#tfa_1934,
*[id^="tfa_1934["] {
width: 260.4px !important;
}
#tfa_1934-D,
*[id^="tfa_1934["][class~="field-container-D"] {
width: auto !important;
}
#tfa_1934-L,
label[id^="tfa_1934["] {
width: 300px !important;
}
#tfa_1968,
*[id^="tfa_1968["] {
width: 310.4px !important;
}
#tfa_1968-D,
*[id^="tfa_1968["][class~="field-container-D"] {
width: auto !important;
}
#tfa_1968-L,
label[id^="tfa_1968["] {
width: 310px !important;
}
#tfa_1970,
*[id^="tfa_1970["] {
width: 310.4px !important;
}
#tfa_1970-D,
*[id^="tfa_1970["][class~="field-container-D"] {
width: auto !important;
}
#tfa_1970-L,
label[id^="tfa_1970["] {
width: 310px !important;
}
#tfa_2287,
*[id^="tfa_2287["] {
width: 310.4px !important;
}
#tfa_2287-D,
*[id^="tfa_2287["][class~="field-container-D"] {
width: auto !important;
}
#tfa_2287-L,
label[id^="tfa_2287["] {
width: 310px !important;
}
#tfa_2289,
*[id^="tfa_2289["] {
width: 310.4px !important;
}
#tfa_2289-D,
*[id^="tfa_2289["][class~="field-container-D"] {
width: auto !important;
}
#tfa_2289-L,
label[id^="tfa_2289["] {
width: 310px !important;
}
#tfa_2290,
*[id^="tfa_2290["] {
width: 310.4px !important;
}
#tfa_2290-D,
*[id^="tfa_2290["][class~="field-container-D"] {
width: auto !important;
}
#tfa_2931-L,
label[id^="tfa_2931["] {
width: 360px !important;
}
#tfa_2802-L,
label[id^="tfa_2802["] {
width: 660px !important;
}
</style><div class=""><div class="wForm" id="tfa_0-WRPR" dir="ltr">
<div class="codesection" id="code-tfa_0"></div>
<h3 class="wFormTitle" id="tfa_0-T">Sedona Retreat Registration - Double Room - Early Bird Pricing</h3>
<form method="post" action="https://www.tfaforms.com/responses/processor" class="hintsBelow labelsAbove" id="tfa_0">
<div class="wfPage " id="wfPgIndex-1"><div class="section pageSection" id="tfa_1909">
<h4 id="tfa_1909-T">Page 1</h4>
<div class="htmlSection" id="tfa_2"><div class="htmlContent" id="tfa_2-HTML"><div style="text-align: center;"><img src="//www.tfaforms.com/forms/get_image/204076/b50331961fd53b1417e98b89fec39f96-OSMB_3x3_var1_identity.png" alt="osmb logo" width="100" style="max-width: 13.81%; height: auto;"></div></div></div>
<fieldset id="tfa_1892" class="section column">
<legend id="tfa_1892-L">Attendee Details</legend>
<table class="columnLayout">
<tr>
<td><div class="oneField field-container-D " id="tfa_1893-D">
<label id="tfa_1893-L" for="tfa_1893" class="label preField reqMark">First Name </label><br><div class="inputWrapper"><input type="text" id="tfa_1893" name="tfa_1893" value="" placeholder="" title="First Name " class="required"></div>
</div></td>
<td><div class="oneField field-container-D " id="tfa_1894-D">
<label id="tfa_1894-L" for="tfa_1894" class="label preField reqMark">Last Name</label><br><div class="inputWrapper"><input type="text" id="tfa_1894" name="tfa_1894" value="" placeholder="" title="Last Name" class="required"></div>
</div></td>
</tr>
<tr>
<td><div class="oneField field-container-D " id="tfa_1895-D">
<label id="tfa_1895-L" for="tfa_1895" class="label preField reqMark">Phone</label><br><div class="inputWrapper"><input type="text" id="tfa_1895" name="tfa_1895" value="" placeholder="" title="Phone" class="required"></div>
</div></td>
<td><div class="oneField field-container-D " id="tfa_1896-D">
<label id="tfa_1896-L" for="tfa_1896" class="label preField reqMark">Email</label><br><div class="inputWrapper"><input type="text" id="tfa_1896" name="tfa_1896" value="" placeholder="" title="Email" class="validate-email calc-EMAILA required"></div>
</div></td>
</tr>
</table>
</fieldset>
</div></div>
<div class="wfPage " id="wfPgIndex-2"><div class="section pageSection" id="tfa_1910">
<h4 id="tfa_1910-T">Page 2</h4>
<fieldset id="tfa_1930" class="section inline">
<legend id="tfa_1930-L">Lodging</legend>
<div class="oneField field-container-D " id="tfa_2543-D">
<label id="tfa_2543-L" for="tfa_2543" class="label preField reqMark">Would you like to request a specific roommate?</label><br><div class="inputWrapper"><span id="tfa_2543" class="choices vertical required"><span class="oneChoice"><input type="radio" value="tfa_2544" class="calc-GENERAL calcval-899" id="tfa_2544" name="tfa_2543" data-conditionals="#tfa_1934"><label class="label postField" id="tfa_2544-L" for="tfa_2544">Yes</label></span><span class="oneChoice"><input type="radio" value="tfa_2545" class="calc-GENERAL calcval-799" id="tfa_2545" name="tfa_2543"><label class="label postField" id="tfa_2545-L" for="tfa_2545">No</label></span></span></div>
</div>
<div class="oneField field-container-D " id="tfa_1934-D">
<label id="tfa_1934-L" for="tfa_1934" class="label preField reqMark">Name of Roommate </label><br><div class="inputWrapper"><input type="text" id="tfa_1934" name="tfa_1934" value="" placeholder="" data-condition="`#tfa_2544`" title="Name of Roommate " class="required"></div>
</div>
</fieldset>
<fieldset id="tfa_1967" class="section">
<legend id="tfa_1967-L">Accommodation Preferences</legend>
<div class="oneField field-container-D " id="tfa_1968-D">
<label id="tfa_1968-L" for="tfa_1968" class="label preField ">Dietary Restrictions</label><br><div class="inputWrapper"><input type="text" id="tfa_1968" name="tfa_1968" value="" placeholder="" title="Dietary Restrictions" class=""></div>
</div>
<div class="oneField field-container-D " id="tfa_1970-D">
<label id="tfa_1970-L" for="tfa_1970" class="label preField ">Special Needs</label><br><div class="inputWrapper"><input type="text" id="tfa_1970" name="tfa_1970" value="" placeholder="" title="Special Needs" class=""></div>
</div>
</fieldset>
<fieldset id="tfa_2285" class="section column">
<legend id="tfa_2285-L">Emergency Contact</legend>
<table class="columnLayout">
<tr>
<td><div class="oneField field-container-D " id="tfa_2287-D">
<label id="tfa_2287-L" for="tfa_2287" class="label preField reqMark">Emergency Contact Name</label><br><div class="inputWrapper"><input type="text" id="tfa_2287" name="tfa_2287" value="" placeholder="" title="Emergency Contact Name" class="required"></div>
</div></td>
<td><div class="oneField field-container-D " id="tfa_2289-D">
<label id="tfa_2289-L" for="tfa_2289" class="label preField reqMark">Emergency Contact Phone Number</label><br><div class="inputWrapper"><input type="text" id="tfa_2289" name="tfa_2289" value="" placeholder="" title="Emergency Contact Phone Number" class="required"></div>
</div></td>
</tr>
<tr><td><div class="oneField field-container-D " id="tfa_2290-D">
<label id="tfa_2290-L" for="tfa_2290" class="label preField reqMark">Country</label><br><div class="inputWrapper"><input type="text" id="tfa_2290" name="tfa_2290" value="" placeholder="" title="Country" class="required"></div>
</div></td></tr>
</table>
</fieldset>
</div></div>
<div class="wfPage " id="wfPgIndex-3"><div class="section pageSection" id="tfa_1966">
<h4 id="tfa_1966-T">Page 3</h4>
<div class="htmlSection" id="tfa_1971"><div class="htmlContent" id="tfa_1971-HTML"><b>Checkout</b></div></div>
<fieldset id="tfa_2929" class="section column">
<legend id="tfa_2929-L">Currency</legend>
<div class="htmlSection" id="tfa_2930"><div class="htmlContent" id="tfa_2930-HTML"><div>You have the option of paying in United States Dollars (USD) , Canadian Dollars (CAD) , or Euros (EUR). </div></div></div>
<div class="oneField field-container-D " id="tfa_2931-D">
<label id="tfa_2931-L" for="tfa_2931" class="label preField reqMark">Please select your currency for payment: </label><br><div class="inputWrapper"><span id="tfa_2931" class="choices vertical required"><span class="oneChoice"><input type="radio" value="tfa_2932" class="" id="tfa_2932" name="tfa_2931" data-conditionals="#tfa_2856"><label class="label postField" id="tfa_2932-L" for="tfa_2932">USD</label></span><span class="oneChoice"><input type="radio" value="tfa_2933" class="" id="tfa_2933" name="tfa_2931" data-conditionals="#tfa_2989"><label class="label postField" id="tfa_2933-L" for="tfa_2933">CAD</label></span><span class="oneChoice"><input type="radio" value="tfa_2934" class="" id="tfa_2934" name="tfa_2931" data-conditionals="#tfa_2955"><label class="label postField" id="tfa_2934-L" for="tfa_2934">EUR</label></span></span></div>
</div>
</fieldset>
<fieldset id="tfa_2856" class="section column" data-condition="`#tfa_2932`">
<legend id="tfa_2856-L">Payment Plan (USD)</legend>
<div class="htmlSection" id="tfa_2855"><div class="htmlContent" id="tfa_2855-HTML">You have selected to pay by payment plan and to stay in a double room. You will be charged 3 equal payments of $662 USD over a period of 2 months. Your payment schedule is:</div></div>
<div id="tfa_2857" class="section column group"><table class="columnLayout">
<tr>
<td><div class="htmlSection" id="tfa_2858"><div class="htmlContent" id="tfa_2858-HTML"><b><u>Payment</u></b> </div></div></td>
<td><div class="htmlSection" id="tfa_2860"><div class="htmlContent" id="tfa_2860-HTML"><b><u>Date Due</u></b></div></div></td>
<td><div class="htmlSection" id="tfa_2862"><div class="htmlContent" id="tfa_2862-HTML"> <b><u>Amount</u></b></div></div></td>
</tr>
<tr>
<td><div class="htmlSection" id="tfa_2864"><div class="htmlContent" id="tfa_2864-HTML">1st Payment</div></div></td>
<td><div class="htmlSection" id="tfa_2866"><div class="htmlContent" id="tfa_2866-HTML">Today</div></div></td>
<td><div class="htmlSection" id="tfa_2868"><div class="htmlContent" id="tfa_2868-HTML"> $662</div></div></td>
</tr>
<tr>
<td><div class="htmlSection" id="tfa_2870"><div class="htmlContent" id="tfa_2870-HTML">2nd Payment</div></div></td>
<td><div class="htmlSection" id="tfa_2872"><div class="htmlContent" id="tfa_2872-HTML">1 Month from Today</div></div></td>
<td><div class="htmlSection" id="tfa_2874"><div class="htmlContent" id="tfa_2874-HTML"> $662</div></div></td>
</tr>
<tr>
<td><div class="htmlSection" id="tfa_2876"><div class="htmlContent" id="tfa_2876-HTML">3rd Payment</div></div></td>
<td><div class="htmlSection" id="tfa_2878"><div class="htmlContent" id="tfa_2878-HTML">2 Months from Today</div></div></td>
<td><div class="htmlSection" id="tfa_2880"><div class="htmlContent" id="tfa_2880-HTML"> $662</div></div></td>
</tr>
</table></div>
<div class="htmlSection" id="tfa_2912"><div class="htmlContent" id="tfa_2912-HTML">After making your first payment by credit card, your second and third payments will be charged automatically to the same card. You may update your card information at any time by emailing support@lightlegacy.org</div></div>
</fieldset>
<fieldset id="tfa_2955" class="section column" data-condition="`#tfa_2934`">
<legend id="tfa_2955-L">Payment Plan (Euros)</legend>
<div class="htmlSection" id="tfa_2956"><div class="htmlContent" id="tfa_2956-HTML">You have selected to pay by payment plan and to stay in a double room. You will be charged 3 equal payments of €617 over a period of 2 months. Your payment schedule is:</div></div>
<div id="tfa_2957" class="section column group"><table class="columnLayout">
<tr>
<td><div class="htmlSection" id="tfa_2958"><div class="htmlContent" id="tfa_2958-HTML"><b><u>Payment</u></b> </div></div></td>
<td><div class="htmlSection" id="tfa_2959"><div class="htmlContent" id="tfa_2959-HTML"><b><u>Date Due</u></b></div></div></td>
<td><div class="htmlSection" id="tfa_2960"><div class="htmlContent" id="tfa_2960-HTML"> <b><u>Amount</u></b></div></div></td>
</tr>
<tr>
<td><div class="htmlSection" id="tfa_2961"><div class="htmlContent" id="tfa_2961-HTML">1st Payment</div></div></td>
<td><div class="htmlSection" id="tfa_2962"><div class="htmlContent" id="tfa_2962-HTML">Today</div></div></td>
<td><div class="htmlSection" id="tfa_2963"><div class="htmlContent" id="tfa_2963-HTML"> €617</div></div></td>
</tr>
<tr>
<td><div class="htmlSection" id="tfa_2964"><div class="htmlContent" id="tfa_2964-HTML">2nd Payment</div></div></td>
<td><div class="htmlSection" id="tfa_2965"><div class="htmlContent" id="tfa_2965-HTML">1 Month from Today</div></div></td>
<td><div class="htmlSection" id="tfa_2966"><div class="htmlContent" id="tfa_2966-HTML"> €617</div></div></td>
</tr>
<tr>
<td><div class="htmlSection" id="tfa_2967"><div class="htmlContent" id="tfa_2967-HTML">3rd Payment</div></div></td>
<td><div class="htmlSection" id="tfa_2968"><div class="htmlContent" id="tfa_2968-HTML">2 Months from Today</div></div></td>
<td><div class="htmlSection" id="tfa_2969"><div class="htmlContent" id="tfa_2969-HTML"> €617</div></div></td>
</tr>
</table></div>
<div class="htmlSection" id="tfa_2970"><div class="htmlContent" id="tfa_2970-HTML">After making your first payment by credit card, your second and third payments will be charged automatically to the same card. You may update your card information at any time by emailing support@lightlegacy.org</div></div>
</fieldset>
<fieldset id="tfa_2989" class="section column" data-condition="`#tfa_2933`">
<legend id="tfa_2989-L">Payment Plan (Canadian Dollars)</legend>
<div class="htmlSection" id="tfa_2990"><div class="htmlContent" id="tfa_2990-HTML">You have selected to pay by payment plan and to stay in a double room. You will be charged 3 equal payments of $810 CAD over a period of 2 months. Your payment schedule is:</div></div>
<div id="tfa_2991" class="section column group"><table class="columnLayout">
<tr>
<td><div class="htmlSection" id="tfa_2992"><div class="htmlContent" id="tfa_2992-HTML"><b><u>Payment</u></b> </div></div></td>
<td><div class="htmlSection" id="tfa_2993"><div class="htmlContent" id="tfa_2993-HTML"><b><u>Date Due</u></b></div></div></td>
<td><div class="htmlSection" id="tfa_2994"><div class="htmlContent" id="tfa_2994-HTML"> <b><u>Amount</u></b></div></div></td>
</tr>
<tr>
<td><div class="htmlSection" id="tfa_2995"><div class="htmlContent" id="tfa_2995-HTML">1st Payment</div></div></td>
<td><div class="htmlSection" id="tfa_2996"><div class="htmlContent" id="tfa_2996-HTML">Today</div></div></td>
<td><div class="htmlSection" id="tfa_2997"><div class="htmlContent" id="tfa_2997-HTML"> $810 CAD</div></div></td>
</tr>
<tr>
<td><div class="htmlSection" id="tfa_2998"><div class="htmlContent" id="tfa_2998-HTML">2nd Payment</div></div></td>
<td><div class="htmlSection" id="tfa_2999"><div class="htmlContent" id="tfa_2999-HTML">1 Month from Today</div></div></td>
<td><div class="htmlSection" id="tfa_3000"><div class="htmlContent" id="tfa_3000-HTML"> $810 CAD</div></div></td>
</tr>
<tr>
<td><div class="htmlSection" id="tfa_3001"><div class="htmlContent" id="tfa_3001-HTML">3rd Payment</div></div></td>
<td><div class="htmlSection" id="tfa_3002"><div class="htmlContent" id="tfa_3002-HTML">2 Months from Today</div></div></td>
<td><div class="htmlSection" id="tfa_3003"><div class="htmlContent" id="tfa_3003-HTML"> $810 CAD</div></div></td>
</tr>
</table></div>
<div class="htmlSection" id="tfa_3004"><div class="htmlContent" id="tfa_3004-HTML">After making your first payment by credit card, your second and third payments will be charged automatically to the same card. You may update your card information at any time by emailing support@lightlegacy.org</div></div>
</fieldset>
<div class="htmlSection" id="tfa_2937"><div class="htmlContent" id="tfa_2937-HTML"> </div></div>
<div class="oneField field-container-D labelsLeftAligned " id="tfa_2802-D">
<label id="tfa_2802-L" for="tfa_2802" class="label preField ">I wish to be added to the Light Legacy Institute contact list</label><div class="inputWrapper"><span id="tfa_2802" class="choices horizontal "><span class="oneChoice"><input type="checkbox" value="tfa_2804" class="" checked id="tfa_2804" name="tfa_2804"><label class="label postField" id="tfa_2804-L" for="tfa_2804"> </label></span></span></div>
</div>
</div></div>
<div class="actions" id="tfa_0-A"><input type="submit" class="primaryAction" value="Proceed to Payment"></div>
<div style="clear:both"></div>
<input type="hidden" value="4602947" name="tfa_dbFormId" id="tfa_dbFormId"><input type="hidden" value="" name="tfa_dbResponseId" id="tfa_dbResponseId"><input type="hidden" value="4347a9a040096948c6af7e1ce741ef57" name="tfa_dbControl" id="tfa_dbControl"><input type="hidden" value="10" name="tfa_dbVersionId" id="tfa_dbVersionId"><input type="hidden" value="" name="tfa_switchedoff" id="tfa_switchedoff">
</form>
</div></div>
<p class="supportInfo" >
<a href="https://www.tfaforms.com/forms/help/4602947" target="new" style="font-size: 0.7em;">
Need assistance with this form? </a>
</p>
</div>