Share Forms

TABLE OF CONTENTS

• Customizing an iFrame
• Editing your Lightbox embed code
  • Move the Lightbox tab
  • Edit the label text
  • Change the color of the Lightbox tab
  • Remove the Lightbox tab image
  • Alternatives to a tab
• Embedding your Form in Squarespace
• Embedding your Form on Wix
• Embedding your Form in Weebly
• Embed your form into a Shopify Page
• Add Formstack Forms using iFrame
• Add Formstack Forms using Javascript
• Embedding in DNN
• Share Buttons
• Typepad Widget
• Embedding a Form in Wordpress
• Link and Embed Published Forms
• Link your form
• Embed your form
  • Option 1: JavaScript Embed Script 
  • Option 2: iFrame Embed Code
  • Option 3: Lightbox Embed Code
• Share your form via QR code
• Facebook Tab Embed
• Using Mobile Forms
• Testing Your Mobile Form
• Adding Forms to your Unbounce Page

Customizing an iFrame

Utilize the iFrame embed code to add one, or multiple, Formstack forms onto your website from the form’s Share tab.

NOTE: Formstack Support is limited to troubleshooting hosted forms (Forms hosted by Formstack) and cannot troubleshoot third-party sites. Review errors with your in-house dev team if issues occur with embedded forms on your site.

Here, customize the form’s dimensions by entering the width and height to automatically adjust the code’s pixel sizing to prevent a scrollbar.

Additionally, in the embed code, you can remove the form’s border and scrollbar by adding: 

scrolling = "no" and frameBorder = "0"

Review the form when embedded to confirm all form elements, including the submit button, are viewable without scrolling.

NOTE: The iFrame embed code is not mobile responsive. 

Editing your Lightbox embed code

Include a form to your site through the Lightbox embed code to display the form in front of your site, dimming out the rest of the page. This spotlight-feature embed code may be found under the form’s Share tab in the Website Embed section: 

NOTE: Formstack Support is limited to troubleshooting hosted forms (Forms hosted by Formstack) and cannot troubleshoot third-party sites. Review with your in-house dev team if issues occur with embedded forms on your site. 

Move the Lightbox tab

When you embed the Lightbox-coded form, your site will populate a tab where the end-user can select to see the form. This tab can be moved with adjustments to the code to appear in the bottom right, bottom left, top right, top left, right or left.

Locate “handlePosition: “x” in the code and change the location to the desired spot: 

• Bottom right: “bottomRight”
• Bottom left: “bottomLeft”
• Top right: “topRight”
• Top left: “topLeft”
• Left: “left”
• Right: “right”

Edit the label text

By default, the tab will use the name of the form; however, you can edit the code to change the label name.

In order to change what shows on the label, change the string at the end of the handle image URL. "handleImage: "https://jk.formstack.com/forms/lightboxHandle.php?str=xnamex""

Change the color of the Lightbox tab

 In order to edit the color of the Lightbox tab image you will need to replace the image entirely with your own image or remove the image entirely and edit the tab using just CSS.

You can change the image by replacing the code with your own image: 

handleImage: "https://jk.formstack.com/forms/lightboxHandle.php?str=CLICK+HERE""",

Remove the Lightbox tab image

The Lightbox image may be removed from the Lightbox tab by deleting the handleImage line of CSS code:
 

handleImage: "https://jk.formstack.com/forms/lightboxHandle.php?str=CLICK+HERE""",

When the handleImage is removed, the handleText will become the label on the Lightbox tab.

NOTE: When an image is removed, the text on the tab defaults to horizontal.

Alternatives to a tab

In place of a tab, you can add a link to your site to open the Lightbox.  

Above your form embed code on your site, add a link like the example below: 

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

There, replace "fsLightbox2235559.show()" with the option from your embed code. This can be found at the bottom of the code.

Then, edit the Lightbox embed code to tell it to use the link instead of the tab:

 

handle: "light-box_link",
  });
</script>
<!-- Use fsLightbox2235559.show() or set handle: "ID" to open lightbox without using predefined handle -->
<!-- End Lightbox -->

Embedding your Form in Squarespace

Embedding your Form on Wix

Embedding your Form in Weebly

Embed your form into a Shopify Page

Add your Formstack Forms to your Shopify pages to elevate a customized experience for your customers. Here's how! 

Add Formstack Forms using iFrame

Easily embed a form into your Shopify page using iFrame. If you plan to embed multiple forms on multiple pages, using iFrame is the best practice. 

Step 1: From the form builder's navigation, select the Share tab and choose Embed Form from the available sharing options. Here, copy the iFrame Embed text box: 

Step 2: Log into your Shopify account and navigate to the page where you would like to embed your Formstack form. Here, select the "< >" icon near the text editor. 

Step 3: Paste the iFrame code into the text editor and then click the < > icon to exit HTML code mode.

Step 4: Select Save and view the published page to test.  

Add Formstack Forms using Javascript

Use Javascript to embed your Formstack Forms to seamlessly look like a part of your website and be mobile responsive. 

Step 1: Access the theme code applied to your Shopify page. Under the Sales Channel, select Themes. Click the action icon (...) and select Edit Code from the dropdown options:

Step 2: From the auto-populated theme editing screen, select "Add a new Template" under Templates. 

Step 3: In the modal, use the dropdown to select Page, toggle to liquid, and give your template a unique name. Select Done to save the template. 

 
Step 4: Your newly created template is added in the template list titled 'page.{your_template_name}.liquid'. Click on your template. 

Step 5:  Toggle tabs to your Formstack form builder's navigation, select the Share tab, and copy the Javascript Embed Script. 

Step 6: Return to Shopify, paste the Javascript contents in your template's text box and select Save to capture.

Step 7: Under Sales Channel, select Pages and choose the page to embed the form or click Add Page to create a new site page.

Step 8: On the page editor, Select the Template dropdown and choose your newly created template:  

Step 9: Select View Page to see how the embed form looks on the public site. 

Note: Any text entered in the text box will display below the form.

Embedding in DNN

If you'd like to embed your Formstack Forms into Dot Net Nuke (DNN), you can do so by following a short workaround during the embedding process.

While within the Form you'd like to embed, click on the Publish tab and go to the Advanced menu option on the left sidebar. Within Form HTML, check the box 'Remove JavaScript' and copy the code to your clipboard.

You'll then copy the code into your DNN HTML module and then make some changes to the code. You'll see a section of code that looks similar to:

<div id="fsSubmit#######"><input id="fsSubmitButton#######" type="submit" value="Submit Form" /></div>

You'll replace that with the following:

<input type="submit" onclick="this.form.action='http://www.formstack.com/forms/index.php';this.form.submit();return false;" value="SUBMIT FORM" id="fsSubmit#######" />

Note: The ####### part of the code will be replaced with the actual ID number you'll see in the code. This will be unique for each Form.

Once finished, you can save the DNN Module and the Formstack From should be properly embedded and ready to use!

Share Buttons

The Share Buttons plugin will add Facebook, LinkedIn and Tweet share/like buttons to the bottom of your form, so users can share it. Note: This is doesn't share their submission details, just the message you set and the link to the form. This is good for viral forms, such as contests. To add the Share Buttons plugin, go to Settings > Plugins and click the Add button next to Share Buttons.

This will add a Share Buttons tab to your Settings under the Plugins tab on the left and automatically take you into the Share Buttons settings.  You can change the default Share Message users see when clicking on your Share buttons in the settings.

The Share Buttons will appear at the bottom of the browser window on your published form as shown below:

If you enable Share Buttons on your form and embed your form on your site via Javascript the Share Buttons will still be visible at the bottom of the page that the form is on. If you embed via Lightbox or iframe, the Share Buttons will be visible at the bottom of the frame or pop-up.

Typepad Widget

Formstack forms can be added as sidebar widgets on your TypePad blogs, with the click of a button. To enable the TypePad widget, go to the Publish > Social Media tab inside your form and click on the "Install Widget on TypePad" button in the TypePad Widget section at the bottom.

This will redirect you to TypePad, where you will need to log in.

After you login in, you will be directed to a page to set up the Widget. You will see a preview of the form and will be prompted to check a box next to the name of the blog(s) you want to add your form to, even if you only have one blog. If you do not check a blog, the form will NOT be added to any blog when you click the "Add Widget" button. You can also customize the name of the Widget if you'd like (optional).

After doing these things, you can click the "Add Widget" button and the form will be added to the sidebar of your blog(s). The form will take up as much space along the side of the blog as necessary depending on the size of the form.

Notes:   

It is possible to make a form that is too wide for your sidebar.  To avoid this, edit the field widths of your fields to be as small as possible and don't use multi-column forms.

Also, the form will take on some of the style elements of your blog.  If you are using a theme on your Formstack form, you cannot pass on all of the style elements from that theme to your blog.  Header images, footer images, and background colors/images will not be passed on to your blog.  Font colors and sizes and any changes directly within the form border will be.

The Formstack TypePad widget is designed to go in your sidebar and inherit the styles set in your blog. This widget won't work if you're using Advanced Themes or Mixed Media Layouts on TypePad.

Embedding a Form in Wordpress

Quickly and easily add a Formstack form in your Wordpress.org site using our Javascript embed code. 

Note: Wordpress.com sites do not allow you to add Javascript code.

Step 1) Get your form's javascript embed code from the share tab on the top right.

The basic embed code on this page should work great for you, but if you have a more advanced Wordpress setup you may need to visit the 'Embed Code' area of the 'Publish' page to view your options such as removing jQuery, jQuery UI, Modernizr, or CSS. More information about embedding your form can be found here.

Copy the code to your clipboard.

Step 2) Access your Wordpress.org site (http://yoursite.com/wp-admin/)

In order to add a form to your site, you must be an Admin, Editor, or Author.

Step 3) Create a new post

From the Wordpress dashboard, click 'Posts' > 'Add New'.

Step 4) Paste your Formstack form javascript embed code

There will be a 'Text' tab on the right side of the post box. 

Click it, then paste the code from Formstack into the text box.

Step 5) Preview and Publish

Now it's time to preview your page. If you like how it looks go ahead and publish it!  

Note: Sometimes Wordpress themes have some CSS that overpowers the form. This can make the form look different than what it looks like when you previewed the form. You can override any changes the Wordpress theme made by editing the CSS of your form.

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.

Link and Embed Published Forms

Once you have made your form publish-ready with customizations like adding confirmation and notification emails, integrations, and submission table views you are ready to share!

Formstack offers a variety of ways to publish the form from the Share tab: Link, embed, or share via QR code. 

Link your form

Send the form via a copied URL from the Link to your form section. Select Copy URL to copy the Form URL as it is or update the URL from the Customize link:

NOTE: Forms previously shared or embedded will not redirect to an updated URL. Where applicable, forms will need to be re-embedded and shared with the updated URL. 

Embed your form

Add your form directly to your business website to provide a cohesive experience. Formstack Forms are compatible with JavaScript, iFrame, and Lightbox. Use the toggle feature in the Website Embed section of the Share tab to view and copy the script or codes.

NOTE: Formstack Support is limited to troubleshooting hosted forms (Forms hosted by Formstack) and cannot troubleshoot third-party sites. Review with your in-house dev team if issues occur with embedded forms on your site. 

Option 1: JavaScript Embed Script 

JavaScript is the recommended embedding method since it does not require updating the code when a change is made to the form. Optionally, before copying the code, remove the Formstack theme on the form to inherit the site styling.

NOTE: JavaScript is not compatible with the one-question-at-a-time survey feature. 

Option 2: iFrame Embed Code

From the iFrame tab, customize the dimensions then copy and paste the embed code into your site’s HTML page.

Typically, the iFrame embed code should be used for ASP.NET websites or when your website’s JavaScript is conflicting with your form’s Javascript and not allowing the form, or site, to work properly. 

Option 3: Lightbox Embed Code

A stylized option is to use the Lightbox embed form code to highlight the form when accessing a new page or when a feature is selected and dimming the remaining site features. Review how to customize your Lightbox embed codes to add to the populated code from the Share tab.

Share your form via QR code

Easily share forms with the QR (Quick Response) Code from the Share tab. The unique image can be copied or saved to your device as an image to share on the go or via email.

Facebook Tab Embed

With Facebook Tab Embed, you can easily post your forms as tabs on your brand or organization's Facebook page! This method does not work with personal Facebook pages.

Important Note: The feature to turn this on as a tab from the share tab is no longer available on the most current version of our Form Builder.  If you're still using an older version, you can continue to scroll down for more info on setting this up. 
 

First, head to the "Publish" tab, then click on "Social Media". You will see the "Facebook Tab Application" at the top of the page.

Note: This feature is only available for users on the Teams plan and higher. Upgrade now to start using this awesome feature!

Next, click the "Authenticate your Facebook account" link. A popup window will appear asking you to sign in to Facebook.

Once you're logged in, you will be asked to choose which Facebook page to add your Formstack account.  Choose your desired page from the list, then click "Add Page Tab".

Click 'Templates and Tabs'  to re-order the tab to change Formstack's position on your page. 

 Click on the tab while you're logged in and you'll see a preview of how the form will look when someone clicks the tab.

Click "Settings" to unlink your Formstack account or change the linked form to another form in your Formstack account.

Good to Know

• Facebook's iPhone, iPad and Android Apps, as well as the Facebook mobile site, do not display any custom tabs that pages may have on their page.
• Facebook only allows for one tab through us, and a tab can only have one form on it.
• Facebook will not support our embed unless the Page has over 2000 followers.

Using Mobile Forms

When you build a Formstack form, a mobile version of that form is automatically created.  This mobile version is optimized for phone usage and may strip out some of the styling seen on the web version of your form.  This is to make the form load quickly and correctly on mobile devices.

There is nothing you need to do to send users to the mobile version of your form.  If a user navigates to your form, Formstack will detect if they are using a mobile device or not.  If we see a mobile device, the mobile version of your form will be displayed instead of the web version.  The user does have the option of switching back to the web version of the form if they prefer, by clicking on the link at the bottom of the form. 

Web version of a basic contact form:
 

Mobile version of the same form:

Testing Your Mobile Form

If your form is still on the Version 2 platform, on the Share tab of your form, we give you a URL link to Version 3 Form which includes support for mobile device optimization.  

If your form is on the Version 3 or 4 platform, you will notice only one URL is provided (as shown below). This is because mobile optimization is built into the URL on v3 & v4 forms. For more information on updating your Form to the most current version, check out this article. 
 

Note: Factors like browsers, screen sizes, operating systems, and version updates will affect how forms appear across devices. It is recommended to always test forms on any device you need to support.

Adding Forms to your Unbounce Page

Unbounce allows you to easily build, publish and test landing pages and with the Formstack embed code, you can add your Form right to the Unbounce page! It's easy; let's show you how.

First, you will want to build your Formstack Form and include any fields you will need for data collection. You will also want to build your Unbounce Landing page, either by creating a new Page or using one of their existing templates. You may also want to customize the Formstack Form with CSS to adjust the Form width, background colors, styling etc. We will also include the CSS used on our example Form below for reference.

Once your Form has been built, navigate to your Unbounce Landing page and add the "Custom HTML" object into the Landing page where you would like the Formstack Form to be listed.

Now you will need the Form embed code to add into the Unbounce HTML object. This can be extracted by going into the Form, navigating to the Share tab and then copying and pasting the listed code under the website embed tab into for your Unbounce HTML page.

Paste the HTML Form code into the body of the "Embed Custom HTML Code" Unbounce field. Depending on how your Form is setup, you may want to toggle the Soft Wrap option On or Off. After the code has been pasted, click the "Done" option to save your changes.

With the code added to Unbounce, you may also want to expand or contract the sizing of the HTML Object to fit nicely into the Landing page.  After any changes have been made in Unbounce, be sure to click the "Save Changes" button. 

You can also click the Preview option to view the Form and Landing page during the creation process.

CSS Used on this Form:  If you like what you saw in the preview and want to give this a try on your Form, the below CSS was used to customize the Form.

Adjust the Form width:  .fsBody .fsForm {width:500px;}

Set Form footer to transparent:  .fsForm .fsSubmit {background-color: transparent !important;}

Set Form background to transparent:  .fsBody .fsForm { background-color: transparent; }

Remove the Form border:  .fsBody .fsForm { border: none !important; }

Remove the Form border shadowing:  .fsboxshadow .fsBody .fsForm {box-shadow:none !important;}