Need more space than the Embed Code 5000 Limit allows for

Design help Custom code
1

I need to add a store/payment gateway to my clients web flow site and the code is ~6500 characters. Here’s the code snippet:

<form action="https://www.institutenorth.org/?ACT=25031990" accept-charset="utf-8" method="post"><div style="display:none">
<input type="hidden" name="params_id" value="261796">
<input type="hidden" name="csrf_token" value="8afdbaafd540df4c276afd573a314a7d84bf4f95">
</div>
            <input type="hidden" name="event" value="Registration : 2015 ANILCA Training">
            <fieldset class="rounded3">
                  <legend>Registration</legend>
                  <p><strong>DOI Employees</strong> Register <a href="https://gm2.geolearning.com/geonext/doi/login.geo">HERE</a>:&nbsp;</p>

<p><strong>Other Federal Employees</strong> Register <a href="https://doiu.doi.gov/">HERE</a>:&nbsp;</p>

<p><strong>All others (non-federal)</strong> Register with the Institute BELOW. The registration options through the Institute are not applicable to federal employees.</p>
                  <br class="clear">
      
                <div class="form-row"><label for="fname">First Name*</label><input type="text" name="fname" value="" id="fname" class="required "></div>
      
                <div class="form-row"><label for="lname">Last Name*</label><input type="text" name="lname" value="" id="lname" class="required "></div>
      
                <div class="form-row"><label for="affiliation">Organization Name*</label><input type="text" name="affiliation" value="" id="affiliation" class="required "></div>
      
                <div class="form-row"><label for="city">City</label><input type="text" name="city" value="" id="city" class=""></div>
      
                <div class="form-row"><label for="email">Email*</label><input type="text" name="email" value="" id="email" class="required "></div>
      
                    <br class="clear">
        
                  
                      <div class="form-row block">
                        <p>Registration Options</p>
                          <div class="checkbox-group">
                            <input type="checkbox" name="ffp_amount[]" value="575.00" id="p1" class="checkbox">
                            <label for="p1" class="checkbox">General Registration - <b>Cost: $575.00</b></label>
                          </div><div class="checkbox-group">
                            <input type="checkbox" name="ffp_amount[]" value="400.00" id="p2" class="checkbox">
                            <label for="p2" class="checkbox">Young Professionals (40 and under) - <b>Cost: $400.00</b></label>
                          </div><div class="checkbox-group">
                            <input type="checkbox" name="ffp_amount[]" value="250.00" id="p3" class="checkbox">
                            <label for="p3" class="checkbox">Student - <b>Cost: $250.00</b></label>
                          </div><div class="checkbox-group">
                            <input type="checkbox" name="ffp_amount[]" value="575.00" id="p4" class="checkbox">
                            <label for="p4" class="checkbox">Additional Registration - <b>Cost: $575.00</b></label>
                          </div>
                            
                            <div id="desc-p4" class="hide dynamic">
                              
                              <div class="form-row">
                                <label for="field4">First</label>
                                <input type="text" name="guest_fname" id="form4">
                              </div>
                              
                              
                              <div class="form-row">
                                <label for="field4">Last</label>
                                <input type="text" name="guest_lname" id="form4">
                              </div>
                              
                              
                            </div>
                      </div>
                      <br class="clear">
                  
                  </fieldset>             
                  
                  <fieldset class="rounded3">
                  <legend>Payment Details</legend>
                    <div class="form-row"><label for="ffp_name_on_card">Name on Card*</label><input type="text" name="ffp_name_on_card" class="required "></div><div class="form-row"><label for="ffp_card_number">Card Number*</label><input type="text" name="ffp_card_number" class="required "></div><div class="form-row"><label for="ffp_expiration">Expiration*</label><input type="text" name="ffp_expiration" class="required "></div><div class="form-row"><label for="ffp_security_code">Security Code*</label><input type="text" name="ffp_security_code" class="required "></div><input type="hidden" name="ffp_active" value="true">
                    <div class="AuthorizeNetSeal right"> <script type="text/javascript" language="javascript">var ANS_customer_id="8a502bf8-62c2-4d2c-bbfa-f5db6f185ba2";</script> <script type="text/javascript" language="javascript" src="//verify.authorize.net/anetseal/seal.js"></script><style type="text/css">
div.AuthorizeNetSeal{text-align:center;margin:0;padding:0;width:90px;font:normal 9px arial,helvetica,san-serif;line-height:10px;}
div.AuthorizeNetSeal a{text-decoration:none;color:black;}
div.AuthorizeNetSeal a:visited{color:black;}
div.AuthorizeNetSeal a:active{color:black;}
div.AuthorizeNetSeal a:hover{text-decoration:underline;color:black;}
div.AuthorizeNetSeal a img{border:0px;margin:0px;text-decoration:none;}
</style>
<a href="https://verify.authorize.net/anetseal/?pid=8a502bf8-62c2-4d2c-bbfa-f5db6f185ba2&amp;rurl=http%3A//www.institutenorth.org/calendar/events/anilca-training-november-14-15-2016/" onmouseover="window.status='http://www.authorize.net/'; return true;" onmouseout="window.status=''; return true;" onclick="window.open('https://verify.authorize.net/anetseal/?pid=8a502bf8-62c2-4d2c-bbfa-f5db6f185ba2&amp;rurl=http%3A//www.institutenorth.org/calendar/events/anilca-training-november-14-15-2016/','AuthorizeNetVerification','width=600,height=430,dependent=yes,resizable=yes,scrollbars=yes,menubar=no,toolbar=no,status=no,directories=no,location=yes'); return false;" target="_blank">
<img src="https://verify.authorize.net/anetseal/images/secure90x72.gif" width="90" height="72" border="0" alt="Authorize.Net Merchant - Click to Verify">
</a>
 <a href="http://www.authorize.net/" id="AuthorizeNetText" target="_blank">Internet Payments</a> </div>
                  </fieldset>
                  <input type="submit" name="submit" class="form-submit" value="Register">
         </form>

Please help! Thanks!
Hunter

1 Like
2

Hi @Hunter_Hadaway, thanks for the good question.

One workaround while the 5k limit is in place is to create a new text file with the extension .js, and paste the following code into the the .js file:

<script language="JavaScript">
document.writeln("<form action=\"https://www.institutenorth.org/?ACT=25031990\" accept-charset=\"utf-8\" method=\"post\"><div style=\"display:none\"><input type=\"hidden\" name=\"params_id\" value=\"261796\"><input type=\"hidden\" name=\"csrf_token\" value=\"8afdbaafd540df4c276afd573a314a7d84bf4f95\"></div><input type=\"hidden\" name=\"event\" value=\"Registration : 2015 ANILCA Training\"> <fieldset class=\"rounded3\"> <legend>Registration</legend> <p><strong>DOI Employees</strong> Register <a href=\"https://gm2.geolearning.com/geonext/doi/login.geo\">HERE</a>:&nbsp;</p><p><strong>Other Federal Employees</strong> Register <a href=\"https://doiu.doi.gov/\">HERE</a>:&nbsp;</p><p><strong>All others (non-federal)</strong> Register with the Institute BELOW. The registration options through the Institute are not applicable to federal employees.</p><br class=\"clear\"> <div class=\"form-row\"><label for=\"fname\">First Name*</label><input type=\"text\" name=\"fname\" value=\"\" id=\"fname\" class=\"required \"></div><div class=\"form-row\"><label for=\"lname\">Last Name*</label><input type=\"text\" name=\"lname\" value=\"\" id=\"lname\" class=\"required \"></div><div class=\"form-row\"><label for=\"affiliation\">Organization Name*</label><input type=\"text\" name=\"affiliation\" value=\"\" id=\"affiliation\" class=\"required \"></div><div class=\"form-row\"><label for=\"city\">City</label><input type=\"text\" name=\"city\" value=\"\" id=\"city\" class=\"\"></div><div class=\"form-row\"><label for=\"email\">Email*</label><input type=\"text\" name=\"email\" value=\"\" id=\"email\" class=\"required \"></div><br class=\"clear\"> <div class=\"form-row block\"> <p>Registration Options</p><div class=\"checkbox-group\"> <input type=\"checkbox\" name=\"ffp_amount[]\" value=\"575.00\" id=\"p1\" class=\"checkbox\"> <label for=\"p1\" class=\"checkbox\">General Registration - <b>Cost: $575.00</b></label> </div><div class=\"checkbox-group\"> <input type=\"checkbox\" name=\"ffp_amount[]\" value=\"400.00\" id=\"p2\" class=\"checkbox\"> <label for=\"p2\" class=\"checkbox\">Young Professionals (40 and under) - <b>Cost: $400.00</b></label> </div><div class=\"checkbox-group\"> <input type=\"checkbox\" name=\"ffp_amount[]\" value=\"250.00\" id=\"p3\" class=\"checkbox\"> <label for=\"p3\" class=\"checkbox\">Student - <b>Cost: $250.00</b></label> </div><div class=\"checkbox-group\"> <input type=\"checkbox\" name=\"ffp_amount[]\" value=\"575.00\" id=\"p4\" class=\"checkbox\"> <label for=\"p4\" class=\"checkbox\">Additional Registration - <b>Cost: $575.00</b></label> </div><div id=\"desc-p4\" class=\"hide dynamic\"> <div class=\"form-row\"> <label for=\"field4\">First</label> <input type=\"text\" name=\"guest_fname\" id=\"form4\"> </div><div class=\"form-row\"> <label for=\"field4\">Last</label> <input type=\"text\" name=\"guest_lname\" id=\"form4\"> </div></div></div><br class=\"clear\"> </fieldset> <fieldset class=\"rounded3\"> <legend>Payment Details</legend> <div class=\"form-row\"><label for=\"ffp_name_on_card\">Name on Card*</label><input type=\"text\" name=\"ffp_name_on_card\" class=\"required \"></div><div class=\"form-row\"><label for=\"ffp_card_number\">Card Number*</label><input type=\"text\" name=\"ffp_card_number\" class=\"required \"></div><div class=\"form-row\"><label for=\"ffp_expiration\">Expiration*</label><input type=\"text\" name=\"ffp_expiration\" class=\"required \"></div><div class=\"form-row\"><label for=\"ffp_security_code\">Security Code*</label><input type=\"text\" name=\"ffp_security_code\" class=\"required \"></div><input type=\"hidden\" name=\"ffp_active\" value=\"true\"> <div class=\"AuthorizeNetSeal right\"> <script type=\"text/javascript\" language=\"javascript\">var ANS_customer_id=\"8a502bf8-62c2-4d2c-bbfa-f5db6f185ba2\";</script> <script type=\"text/javascript\" language=\"javascript\" src=\"//verify.authorize.net/anetseal/seal.js\"></script><style type=\"text/css\">div.AuthorizeNetSeal{text-align:center;margin:0;padding:0;width:90px;font:normal 9px arial,helvetica,san-serif;line-height:10px;}div.AuthorizeNetSeal a{text-decoration:none;color:black;}div.AuthorizeNetSeal a:visited{color:black;}div.AuthorizeNetSeal a:active{color:black;}div.AuthorizeNetSeal a:hover{text-decoration:underline;color:black;}div.AuthorizeNetSeal a img{border:0px;margin:0px;text-decoration:none;}</style><a href=\"https://verify.authorize.net/anetseal/?pid=8a502bf8-62c2-4d2c-bbfa-f5db6f185ba2&amp;rurl=http%3A//www.institutenorth.org/calendar/events/anilca-training-november-14-15-2016/\" onmouseover=\"window.status='http://www.authorize.net/'; return true;\" onmouseout=\"window.status=''; return true;\" onclick=\"window.open('https://verify.authorize.net/anetseal/?pid=8a502bf8-62c2-4d2c-bbfa-f5db6f185ba2&amp;rurl=http%3A//www.institutenorth.org/calendar/events/anilca-training-november-14-15-2016/','AuthorizeNetVerification','width=600,height=430,dependent=yes,resizable=yes,scrollbars=yes,menubar=no,toolbar=no,status=no,directories=no,location=yes'); return false;\" target=\"_blank\"><img src=\"https://verify.authorize.net/anetseal/images/secure90x72.gif\" width=\"90\" height=\"72\" border=\"0\" alt=\"Authorize.Net Merchant - Click to Verify\"></a> <a href=\"http://www.authorize.net/\" id=\"AuthorizeNetText\" target=\"_blank\">Internet Payments</a> </div></fieldset> <input type=\"submit\" name=\"submit\" class=\"form-submit\" value=\"Register\"></form>");
</script>

Save the .js file and upload it to dropbox. Next create a share link to the dropbox file, and change the link to the file to use “dl” instead of “www” in the url.

In the embed on the page where you would normally paste the custom form, you would paste the script link to the .js script file you uploaded to Dropbox like for example:

<script type="text/javascript" src="https://dl.dropbox.com/s/mliw82orl9xc86o/myfile.js?dl=0"></script>

Save changes and publish. When the published site is opened, the script link will load the .js file you uploaded to dropbox and write out the form elements when the page is loaded.

I hope this helps!

3

Thanks Cyberdave. I don’t have dropbox (well I do, but it’s full and I have free/unlimited space w/ Google Drive) so I’m using Google Drive. There’s no ‘www’ in the shareable link they give you:

https://drive.google.com/file/d/0B8hqou9TVWW4a0l3OS0tN2JNS0U/view?usp=sharing

Would I just add ‘dl’ to the front of the link then:

https://dl.drive.google.com/file/d/0B8hqou9TVWW4a0l3OS0tN2JNS0U/view?usp=sharing

or will this not work?

Thanks for your help!
Hunter

4