Formstack

Linking and Embedding

Formstack offers a variety of ways to publish your forms. You can provide a link to your form for use in an email or a hyperlink on a website or PDF, or you can choose to embed your form directly into your website to provide a cohesive experience for your customers.

Note: Before going live with your forms (sharing the link to the form in its published state with your audience), we recommend testing them in the state in which your users will be submitting the form. This will ensure that all aspects of your forms (conditional logic, integrations, etc.) are working properly. That way, you can catch any issues or errors before customers start filling out your forms.

 



To link to your Form, go into your Form >  Publish > Quick Start (or URL Links). Here, you will find the Hosted URL link. This link can be copied and pasted into your website or sent to your end users via email.  
 

On the 'URL Links' page, You will also notice the available QR Code (Quick Response Code) that is generated. You can use this code with any QR code reader app on a mobile device to access the form.

Embedding on Your Site
 


 

The easiest and least error-prone way to embed a form on your site is to use our JavaScript Embed Script. If you embed the form with this embed code, you won't have to update the code every time you make changes to the form in the form builder, as these changes will automatically show up on your website.

The embed method can be customized by using a theme or by using custom 
CSS on your website.  You can find the JavaScript embed code for your form on the Publish tab of your form by clicking on "Embed Form" on the left-hand menu.

The form will automatically re-size itself to the object it is placed inside of. For example, if you have a small column on the right or left of the page, and you would like to add a small contact form to it, the form will automatically size itself to fit into that column 
as long as the field sizes are small enough.

Note: The HTML code in emails is very limited, so you cannot embed the Form directly into an email, as the form will not function properly and will not submit. Additionally, many email clients do not support full HTML and they do not support form tags. Emails were not designed to be interactive, rather to simply convey data. That said, you can link to the form in the email using the URL in the Publish menu or hyperlink an image with the form's URL.

Our forms come with jQuery and will embed it into your site. If your site is already equipped with jQuery, you can choose "I don't need jQuery" from the Advanced Options and get code that excludes jQuery.

Note: We do not support embedding two forms on the same page when both are using the JavaScript Embed Script. If you need to embed two forms on the same page please use an iFrame for one form and a JavaScript Embed Script for the other.

Lightbox Embed Code



If you'd like to access our Lightbox Embed Code, it can be found by going to Publish > Embed Form. Lightbox Embed Code places a button on the side of your website that the user can click on in order to open your form.  You can also create your own link that opens the Lightbox by using the code below:


The Lightbox tab has 6 pre-defined positions. Those positions are located on your Lightbox Embed Code in the highlighted area.

<!-- Begin Lightbox -->
<div id="fsLightbox1077929" class="fsLightbox" style="display:none;">
<div align="right" style="padding-bottom:5px;"><a id="fsLightboxClose1077929" href="#" title="close"><img src="https://www.formstack.com/forms/images/2/cross.gif" border="0" /></a></div>
<div id="fsLightboxContent1077929" style="height:450px; width:650px; padding-top:0px; overflow:auto;">
<script type="text/javascript" src="https://www.formstack.com/forms/js.php?1077929-GwhnMf5cQl-v2">&l...>
</div>
</div>

<script type="text/javascript" src="https://www.formstack.com/forms/js/lightbox.js"></script>
<script type="text/javascript">
var fsLightbox1077929 = new FSLightbox({form: 1077929, 
handleText:"one",
handlePosition: "right", handleImage: "https://www.formstack.com/forms/lightboxHandle.php?str=one",
handle: "light-box_link"
});
</script>
<!-- Use fsLightbox1077929.show() or set handle: "ID" to open lightbox without using predefined handle -->
<!-- End Lighbox -->

Your embed code will look different, and your position will most likely be "left".

The six options that you can enter are: bottomRight, bottomLeft, topRight, topLeft, right, and left. All you need to do is take one of those options, say bottomRight, and put it where it says "left" in your embed code.

If you do not want to use the tab but would like to use a link or image instead, you can do so by following these steps:

1. Create your link

Example: <a onclick="javascript:fsLightbox1077929.show()" ID="light-box_link">This is a link!</a>

Your code will be a bit different of course, but just be sure that your fsLightbox1077929.show() matches the same bit of code that automatically comes with your Lightbox code. Also make sure that the ID="light-box_link" is the same as well. It will say "null" when you copy it, so make sure you change it to "light-box_link".

2. Place the link on the page.

You can place the link anywhere you want to on the page, as long as it is placed before the code for the Lightbox. It might be a good idea to place the Lightbox code all the way at the bottom, just before the </body> tag to be safe.


Changing the Wording on the Lightbox Tab: 

You can edit the Lightbox code to change the wording on the Lightbox tab. 

To do so, look for where it says "?str=" at the end of the handle link.

You will see it in the second clump below:

<!-- Begin Lightbox -->
<div id="fsLightbox1077929" class="fsLightbox" style="display:none;">
<div align="right" style="padding-bottom:5px;"><a id="fsLightboxClose1077929" href="#" title="close"><img src="https://www.formstack.com/forms/images/2/cross.gif" border="0" /></a></div>
<div id="fsLightboxContent1077929" style="height:450px; width:650px; padding-top:0px; overflow:auto;">
<script type="text/javascript" src="https://www.formstack.com/forms/js.php?1077929-GwhnMf5cQl-v2">&l...>
</div>
</div>

<script type="text/javascript" src="https://www.formstack.com/forms/js/lightbox.js"></script>
<script type="text/javascript">
var fsLightbox1077929 = new FSLightbox({form: 1077929, 
handleText: "one", handlePosition: "right", handleImage: "https://www.formstack.com/forms/lightboxHandle.php?str=one",
handle: "light-box_link"
});
</script>
<!-- Use fsLightbox1077929.show() or set handle: "ID" to open lightbox without using predefined handle -->
<!-- End Lighbox -->

It would be this part, at the end:

handleText:"one",
handlePosition: "right", handleImage: "https://www.formstack.com/forms/lightboxHandle.php?str=one",

change ?str=one  to whatever you want it to say: ?str=this+is+the+new+label
 

iFrame Embed


The Iframe Embed code should be used for ASP.NET websites or any sites where the JavaScript embed will not work. This will display the form within a frame on your website. Any redirects will display within the frame.

Consider using this embed style when your website's Javascript is conflicting with your form's Javascript and not allowing the form (or your site) to work properly.


Advanced Form HTML


It is highly recommended that you not attempt to use the full HTML of the form on your site unless you are an HTML expert. The JavaScript embed method above should be used by 99.9% of users.

If you use the full HTML, you can change any of the code in the document except for the form tags (<form>, <input>, <textarea>, <select>, <option>, etc.).  It is important that the name and value attributes in these tags remain as-is or else your form might not work properly when submitted to Formstack.com. It is highly recommended that you test form submissions thoroughly when hosting the form yourself. 

You can find the full HTML of the form by clicking on the Publish tab and then clicking on "Advanced."