Creating an Unstack form

How do I add a form to one of my webpages or blog sidebar?

When you'd like to add a form (or, lead capture) to one of your webpages within the Unstack application, you can begin by clicking the lightning icon within the component you'd like to add the form into.

Once you've clicked that, if the form is an available option, you'll see the option for a form to be added.

Add an Action OptionCommonly asked questions at this point:

QUESTION ANSWER
My form button is currently greyed out and I am unable to click on the form options.
Editing New page 2020-12-17 at 1.16.55 PM

What is occurring in this specific case is there is already a Button existing within that action location. This issue roots from the fact that a button and form cannot exist together, in the same action row. In order to add this form, you'll need to delete the button currently in that action row. You can do so by clicking the button then clicking the trash icon within the tooltip above it.

Once you've clicked the form button a drawer will expand open, within this drawer you'll configure (build) the form you'd like us to generate. You will be able to make adjustments after the initial generation of the form.

Let's build this thing together, step-by-step.

Building Your New Form


Note: If you'd not going to be using an Unstack Native form and you'd like to embed a Klaviyo or HubSpot form within this location please scroll to those respective tutorials within this document.

  1. We'll begin by assigning this form a name, this name will not be seen by your visitors, however, you will see this name within the contact records of anyone who fills out this form.

    This name does not need to be in any specific format, however, it should only be alphanumeric, thus, only consisting of letters and numbers.

    Editing New page 2020-12-17 at 1.25.17 PM
  2. Next, we'll begin setting up the form fields that we'd like the visitors to fill out during the process of completing this form.

    There are two types of fields that you may utilize when building out this form:
    1. Contact Fields
      1. First Name
      2. Last Name
      3. Full Name
      4. Email
      5. Phone Number
      6. Street Address
      7. City
      8. State/Region
      9. Country
      10. Company Name
    2. Generic Fields
      1. Text
      2. Number
      3. Checkbox
      4. Select (Dropdown)
      5. Multi-line Text
      6. Radio
      7. Date Picker
    You should begin by using our built-in Contact Fields for collecting personal information such as their name, company, phone, and email, then, move forward to using Generic Fields for when you'd like to ask custom questions like What Industry is Your Company In or others that are not specifically listed within our Contact Fields.
  3. Once you've selected the fields you'd like to include in this form, you can adjust the look of each field through the following options:
    1. Label
    2. Placeholder text
    3. Help text
    4. Make this field required
    5. Name (Internal, Unstack Name)
    For context, here is a graphic showing where each of these options come into play:
    Editing New page 2020-12-17 at 1.33.46 PM
  4. Now that you've added your fields and customized them to your liking, you may adjust or retain the text that is used for the submission button. By default, this is "Submit."

    However, this is an open, one-line text field that may be adjusted to your liking.
    Editing New page 2020-12-17 at 1.36.03 PM
  5. Once you've designated what text you'd like in your submit button, we'll not designate the behavior that should occur "On Submit" the options you'll have here include:
    1. Show Message
      1. This allow you to display a plain text message confirming their submission has been received
    2. Redirect to a Page / URL
      1. You can either use our Smart Linking tool and type a page name then select it from the dropdown or you can paste in a Full URL (e.g., https://example.com)
    3. POST to a URL
      1. This will send the form data, in the browser, to POST to a URL of your choice. Unless you have configured this endpoint, the end-user (visitor) will see this occur.
    4. GET to a URL
      1. This will send the form data, in the browser, to GET to a URL of your choice. Unless you have configured this endpoint, the end-user (visitor) will see this occur.
  6. Now that you've configured the behavior which will occur once a form has been submitted, you'll now determine the form styling, which includes two options:
    1. Add a White Background
    2. Do Not Add a White Background
    This is helpful for making the form stand out, if turned on a white background will be added behind the form to help end-users (visitors) see the form.
  7. Lastly, mattering on the integrations you have setup, you may see options for pushing the data collected here into connected third-party integrations like Mailchimp, Klaviyo, HubSpot, ActiveCampaign, and others.

Embedding a HubSpot Form

  1. Adjust the first dropdown from "Unstack" to "HubSpot":
    Editing New page 2020-12-17 at 1.52.22 PM
    To make this adjustment click the dropdown to expand the list of options and from that list select HubSpot, this will shift the options below into being an additional dropdown.
  2. Once the dropdown appears below the selection of HubSpot you may expand that dropdown to see all available form options pulled in from HubSpot. In order for a form to be an available option, it must be a HubSpot Regular Form. Additionally, your HubSpot account must be actively connected to Unstack.
  3. Once you've select which HubSpot form you'd like us to pull in, you'll now determine the form styling, which includes two options:
    1. Add a White Background
    2. Do Not Add a White Background
    This is helpful for making the form stand out, if turned on a white background will be added behind the form to help end-users (visitors) see the form.
  4. Then click Save and we'll render the HubSpot form within this page.

Embedding a Klaviyo Form

  1. Adjust the first dropdown from "Unstack" to "Klaviyo":
    Editing New page 2020-12-17 at 1.52.22 PM
    To make this adjustment click the dropdown to expand the list of options and from that list select Klaviyo, this will shift the options below into being an additional input.
  2. Within the Input below requesting the Klaviyo Form ID, you'll add in the form ID from Klaviyo which you may find by going to the form in Klaviyo, clicking Embed, making sure Desktop & Mobile are set to active and copying the code that looks like this:
    <div class="klaviyo-form-HSGM4R"></div>

    The Form ID in this case would be HSGM4R with no dashes preceding the ID.
  3. Once you've found and input your Klaviyo form ID, you'll now determine the form styling, which includes two options:
    1. Add a White Background
    2. Do Not Add a White Background
    This is helpful for making the form stand out, if turned on a white background will be added behind the form to help end-users (visitors) see the form.
  4. Then click Save and we'll render the Klaviyo form within this page.