Create a Popup Form

Signup forms are more than the entry point to your list; they’re the jumping-off point for the relationship with your customers. Providing a signup form on your website helps you grow your customer base and collect important information about people. In this guide, we’ll go over how to create a popup form in Drip, the different data fields available, and how to use that data for personalization that provides customers with exceptional experiences that will keep them coming back for more. 

Before we jump into creating a form, make sure that you’ve done the following:

  1. Connect your Shopify, Magento, WooCommerce, or custom store to Drip. This automatically installs the Drip Javascript snippet on your site, which is necessary for pop up forms to work properly. 

  2. If you’re not using an ecommerce platform that automatically installs the snippet, manually install the Drip Javascript snippet on your website. Check out our Install Your Javascript Snippet guide to learn how to manually install the snippet on your website.

Once your ecommerce platform is connected and your Javascript snippet is installed on your site, you’re ready to create your pop up form. 

 

Create Your Form

Create a new opt-in form.

To create your pop up form in Drip: 

  1. Click Forms > + New Opt-In Form

  2. Give the form a name

  3. Add a tag (optional)

  4. Select Popup Form 

  5. Click Create Form

Now you’re ready to select your form fields, design your form, and configure the form behavior and submission settings. In this guide, we’ll walk through how to create a simple welcome pop up form with radio buttons. To learn about all of the form options and settings, head over to our User Manual

 

Form Fields

Add a field type.

Data collection is one of the main benefits of collecting email addresses via a form on your website. It’s an opportunity to collect information about your customers that you can use to create better experiences for them down the road. Think about the kind of products you sell, and about how you can make your content as relevant as possible for your customers. Once you’ve decided which fields to add to your welcome form, head to the Fields tab. 

There are several field types to choose from: Text, Date, Drowndown, and Radio Buttons. With each field type, you will select a custom field to store the responses in (we’ll go over how to access and use the custom field further down). 

For our welcome form, we want to know where people heard about us so we’re going to add 4 radio buttons:

  1. Click + New Field

  2. Select Radio Buttons

  3. Enter your different options: Facebook, Instagram, Twitter, and LinkedIn

  4. Select the custom field that the response will be stored as: source 

  5. Select if this question is required to submit the form 

  6. Click Add 

The form preview will refresh and your radio buttons will be visible on the screen. Configure your form’s design, behavior, and submission settings. Read more about each of the options in our Forms User Manual. Click Activate Form in the upper right-hand corner of the page and your pop-up form will appear on your website within 30 minutes! Next, we’ll walk through how to use the data you collect via forms. 

 

Use Data for Personalization

Preview the email as a person.

Once you’ve collected data about people that sign up to your list, use that information to personalize your communication to them. In Drip, you can do this by dynamically inserting custom fields into your emails with liquid code. 

Every Custom Field has an Identifier and a Value

Custom field identifier and value.

Liquid code provides a way for you to dynamically insert the information that you've collected and saved in Custom Fields into emails You dynamically insert information by calling Custom Field values with liquid code. Dynamically means it will be different for each person based on the Value of the Custom Field (their response). 

The following Liquid code template is how to call the Value of Custom Field:

{{ subscriber.custom_field_identifier }}

The subscriber keyword denotes the Value from a given Custom Field Identifier. For our example, the following Liquid code returns the Value of the field Identifier called source.

{{ subscriber.source }}

If the source Identifier contains a Value of Facebook the Liquid returns Facebook

To dynamically insert your form field responses into an email:

  1. Build a Broadcast or Automation email

  2. Write your email content, using the following template to dynamically insert the custom field you selected in form fields: {{ subscriber.custom_field_identifier }}

    Use liquid code to call the value of a custom field.

  3. Preview the email as a specific person who has the field set (or manually set it for a test user) to confirm it’s working

    Liquid code does not work in test emails. Use the Preview feature to confirm your liquid code is working

    4. If you’re in a Broadcast email, make sure that the person you’re previewing as is added as a recipient in the email

Once you schedule and send your Broadcast email or activate your Workflow anyone who has that field set will receive an email with their personalized form response!