Prerequisites

The.com BasicsElement Attributes

Intro

Start by creating a Formstack account or logging into your account. Create a new form or select a form to edit. Navigate to the Share tab.

If you haven't yet set up a subdomain for your forms, do this now (you should get a popup prompt to do this). Enter your website's domain without the "https://www." and ".com". So, if your domain is "https://silken-flyingfish-1358.com," just type/paste "silken-flyingfish-1358". The resulting subdomain will look something like this:

https://silken-flyingfish-1358.formstack.com/forms/form_name

Once you have set up your subdomain, click the Embed Form option on the left menu on the Share tab.

You can embed your form as an iFrame, as a JavaScript snippet, or as a Lightbox.

iFrame Embed

In The.com editor, you can set this up with an iFrame Element or a Raw HTML Element.

iFrame Element

1. On Formstack, copy the "src" value which is a URL.

2. On The.com, create a new iFrame Element where you want the form to be rendered.

3. Paste the URL into the Element's src attribute.

Note that you will have to set the width and height (and other styling) for this iFrame manually.

Raw HTML Element

1. Copy the full text from the textbox on Formstack.

2. Create a new Raw HTML Element where you want the form to be embedded.

3. Paste the code in the Text attribute.

Since there is styling defined in that code (width="600" and height="400"), the iFrame defaults to that size.

JavaScript Embed Script

1. Copy the code from the textbox.

2. In The.com editor, create a new Raw HTML Element where you want the form to appear.

3. Paste the code into the Text attribute. Since this code has a Script tag, refresh the page so the script loads properly.

The form renders, but the styling is not great. Not to worry! When you deploy the page and visit the live page the styling is applied. This is because of how our system loads and parses external scripts.

Lightbox

1. Copy the code in the textbox.

2. In The.com editor, create a Raw HTML Element where you want the button to appear.

3. Paste the code in the Text attribute.

Again, the styling will look bad, but don't worry. When viewed on the live page, the form styles from Formstack are applied. This is what it will look like: