Drip Forms are a legacy feature, being replaced by Onsite Campaigns. If your account is created after November 2022, you will have access to Drip's new Onsite product instead.
Your Drip JavaScript snippet must be installed on your website to host a form. Locate your JavaScript snippet under Site Setup in your account settings.
Create a Popup Form
-
Click Forms > Forms
-
Click + New Form
-
Give the form a name
-
Choose a template or start from scratch
-
Click Create
It can take up to 15 minutes for a popup form to fully enable or disable on your site.
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.
To turn your form into an Exit-Intent or Side Tab form, you will navigate to the Behavior > Style section to select which style you want.
Exit-intent popup forms will pop 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 popup forms are dismissible tabs that pop up on the side of the page.
Form Fields
Select the input fields for your form. Choose Text, Radio Buttons, Dropdown, Date, or Hidden . If you select Radio Buttons, Dropdown, 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 Field Label is what the form will display. The Custom Field will be the same by default, but you can manually change the associated Custom Field.
Email Address is the only required field. To add a new form field:
-
Click the +New Field button
-
Enter the Field Label text
- Choose Field Type
-
Use the checkbox to make the field Required
-
Click Add
To update the Properties in a person’s Profile, add the following Custom Fields to your Form:
|
Form Custom Fields |
Person's Profile Properties |
|
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.
Popup
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
Select the font, size, color, and organization of the text for your form.
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
-
Button Text color
- Button Font
-
Button color
-
Hover color
-
Active color
-
Button Text size
Advanced Styles
-
Button Size
-
Button Padding
- Button Corner Radius
-
Button Border Style: None, Solid, Dashed, or Dotted
Fields
- Place text input labels
-
Field Background
- Field Border
-
Field Border Hover
- Label Font
-
Label Text Color
- Field Font
-
Field Text Color
- Field & Label Text Size
-
Field Height
Advanced Styles
-
Field Corner Radius
-
Field Border Style: Solid, Dashed, or Dotted
-
Field Border Stroke
Image
Images can be placed on the left, right, top, logo, or background.
To add an image to your form:
-
Choose the image you'd like to use by dragging and dropping the image from your desktop into the image library, or entering a URL
-
Select the image placement, fit, and alignment
- Adjust the image's height and padding
-
Click Done
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
When should this form pop up?
Select After a time delay, Once the visitor scrolls to a point on the page, or On click of a link or button, or via the JS API.
-
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.
- Advanced Option - Scroll position: Page anchor. Select "Page anchor" from the dropdown and add your Trigger anchor ID. Your widget will now appear when someone scrolls to the anchor tag you’ve set on your website page.
-
On click of a link or button, or via the JS API. Copy and paste the link to your website to launch the popup. See " Advanced Settings " for additional instructions.
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, to one Segment, or hide the form from one Segment.
-
If changing visibility based on segments, when someone is removed from the Segment you chose to show the form to, they will no longer see the form. Conversely, if you are hiding a form from the Segment you remove them from, they will now see it.
-
Otherwise, the behavior settings will apply
-
Currently, you can show a form to one Segment
-
Currently, you can hide a form from one Segment
Select where the form should appear on your website.
-
Only show popup on specific pages. List the path to each page on a separate line.
-
Hide popup on specific pages. List the paths.
-
Hide popup on mobile devices.
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 it into your codebase.
To trigger a widget with a link URL:
-
Under Design, click Behavior
-
Copy the HTML anchor tag
-
In your codebase, paste the anchor tag
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 takes the place of form widgets once the form has been submitted.
-
On-form thank you message. 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.