User Manual
Overview

Create a Form

Drip popup form.

Drip provides multiple types of forms to optimize customer acquisition for you. 

  • Pop Up Form. Pops up after a time delay, page scroll, or button click. 
  • Exit Intent Pop Up Form. Pops up when a site visitor intends to leave your site or exhibits "exit intent." Exit intent is when a site visitor drags their cursor outside of the web browser used to access your website, showing intent to leave your site.
  • Side Tab Form. Dismissable tab that pops up on the side of the page.  
  • Embedded Form. A minimally styled, standalone HTML form to embed on your site. Learn about Embedded Forms

There are multiple ways to trigger the popup form to web visitors, such as time-delayed, exit intent, link URL, or JavaScript API. In this article, we’ll cover everything you need to know about using Drip forms. Callout: To host a form, install your Drip JavaScript snippet on your website. You can find your JavaScript snippet under Site Setup in your account settings.

Create a Form

Create a form

 

  1. Click Forms

  2. Click + New Opt-In Form

  3. Give the form a name

  4. Add a tag (optional)

  5. Select which kind of form you want to create

  6. Click Create Form

 

Once created, you'll land on the screen to customize the design and configuration, decide how to host it on your website, and activate the form.

 

Form Fields

Form field types

Manage the input fields for your form. Choose Text, Radio Buttons, Dropdown, Date, or Hidden. If you select Radio ButtonsDropdown, or Date, you have the option to create a new Custom Field or map to an existing field for deeper segmentation and personalization. 

 

Select Hidden to pass data not seen by your customers to Drip. For example, pass hardcoded text to track form name, referrer, or discount code. This data can then be used for segmentation or to personalize email content.

The Identifier is what the Custom Field in Drip will be called. The Label is what the form will display. 

Email Address is the only required field. To add a new form field:

  1. Set the field Identifier

  2. Enter the Label text

  3. Use the drop-down to make the field Optional or Required

  4. Click Add

  5. Click Save

 

To update the Properties in a person’s Profile, add the following identifiers to your Form: 

 

Form Identifier 

Person Property

first_name

First Name

last_name

Last Name

address1

Address 1

address2

Address 2

city

City

state

State

zip

Zip

country

Country

phone

Phone

Design

If your form was created before October 20th, 2020, these design options are not available. Create a new form to see custom style options. 

 Style

Customize your form to match the look and feel of your brand and website. You have the options to change:

  • Popup location (for side tab forms)

  • Background color 

  • Form size: Large, small, full-screen, or custom (max 800 x 800px) 

 

Advanced Styles

  • Padding

  • Margin 

  • Vertical spacing 

  • Corner radius 

  • Border style 

  • Border color 

  • Border stroke

Text

Form text box

Select the text for your form and click Save. 

  • Headline. The headline text is formatted in bold and is larger in size than any other text on the form.

  • Description. The text located directly underneath the form’s headline. There is a text editor for drafting the form’s description text.

Link Style

  • Color

  • Hover color

  • Active color 

Auto-generated hover/active colors

 

When you select a button color, Drip will auto-generate hover and active colors based on your color scheme.

Button

  • Button Text

  • Text color

  • Button color

  • Hover color

  • Active color 

  • Text size 

 

Advanced Styles 

  • Button size 

  • Button padding 

  • Border style: Solid, dashed, or dotted

Fields 

  • Background 

  • Text color

  • Label text color

  • Border color

  • Border hover color

  • Height 

  • Text size 

 

Advanced Styles

 

  • Corner radius 

  • Border style: Solid, dashed, or dotted

  • Border stroke

 

Image

Images can be placed on the left, right, top, logo, or background. 

To add an image to your form:

  1. Click Upload Image

  2. Select the image from your computer

  3. Use the drop-down to select the Placement and Alignment

  4. Click Save

Behavior

Set when you want your form to appear, show or hide for saved Segments, and other behavior settings for a form under Behavior

 Timing

Select when the form should pop up.

When should this form pop up?

Select After a time delay, Once the visitor scrolls to a point on the page, or When the visitor clicks a link or button

  • After a time delay. Use the slider to select the number of seconds to wait before the form pops up. 

  • Once the visitor scrolls to a point on the page. Use the dropdown to select a percentage. 

  • When the visitor clicks a link or button. Copy and paste the link to your website to launch the popup. 

Use the slider to select the number of days before the form should pop up again after the form first pops up and after a user manually closes the form. 

Visibility

Show the form to all visitors, show a form to one Segment, or hide a form to one Segment. 

  • When someone is removed from a Segment they will no longer see the form 

  • Otherwise, the behavior settings will apply 

  • Currently, you can show a form to one Segment

  • Currently, you can hide a form to one Segment 

Select where the form should appear on your website. 

  • Hide popup on mobile devices

  • Hide popup on specific pages.

  • Only show popup on specific pages.  

Use a Wildcard to hide or show entire subdirectories on your website. 

 

Advanced Settings 

Link URL

Copy and paste a provided anchor tag to integrate into the codebase of your website. The given anchor is constructed in HTML and may require a developer to integrate into your codebase. 

To trigger a widget with a link URL:

  1. Under Design, click Behavior

  2. Copy the HTML anchor tag

  3. In your codebase, paste the anchor tag

Anchor Tag

Set your own trigger point with an anchor tag.

  1. Create an anchor tag at the point you choose on your page

  2. Copy the tag you’ve created

  3. Go to Forms

  4. Select your form

  5. Under Design, go to Behavior

  6. Check the Show when user scrolls to… box

  7. Select the drop-down and choose anchor

  8. Paste your anchor tag in the anchor field

  9. Click Save Settings

Your widget will now appear when you scroll to the anchor tag you’ve set on your website page.

JavaScript API

Make requests to our JavaScript API to open and close a widget with the following methods: 

_dcq.push(["showForm", { id: "9999999" }]);

_dcq.push(["hideForm", { id: "9999999" }]);

For more information about our JavaScript form methods, read through our developer docs section about how to handle forms.

 

Submission

Thank You

The onscreen message taking the place of form widgets once the form has been submitted.

  • Headline. The top-most text in the post-signup message

  • Description. The main text body of the post-signup message.

  • Custom Thank You Page. The URL to the web page the person should be directed to after submitting the form. 

  • Button Text While Submitting. The on-screen message when the form is submitting.

Send a submission event to Google Analytics

Event category: "Drip Opt-In Form" Event label: "176780"

Double Opt-In

Use the drop-down to select from one of the options for sending a confirmation email to people that submit your form.

  • Active. This option sends a confirmation email to any person that submits the form, including people who are already on your list.

  • Active only to new people. This option sends a confirmation email only if the person has not already joined your list.

  • Disabled. This option does not send a confirmation email and people submitting the form will immediately join your list.

Edit the double opt-in email by clicking Edit Double Opt-in Email

Send Data to a Post Submission Page 

In addition to redirecting, you can send some data about people in a query string. Check the Send person data to post-submission page box to send people’s data to a post-submission page. You will get a URL like this: 

http://google.com?drip_email=example%40gmail.com&drip_subscriber_id=gtumu4zihebvms5sdy6o

You can then use the new person’s email to customize your page with a response. In addition, you can use the subscriber_id to make API calls and get even more data about the new person. This option is also available on the post-confirmation redirect page. It will yield the same results in the query string.

Embedded forms must redirect to the default post-submission page or a custom post-submission page.