Help Center
Try for Free Login

Embedded Form Builder

Create an Embedded Form

Embedded forms allow you to automatically generate HTML code to embed straight into your website. Embedded forms in Drip don’t come with any CSS styling. Any styling should be added to your website. Any embedded form will be in direct communication with your Drip account at all times.

Create an Embedded Form

Navigation to Forms > Embedded Forms > Create > New Embedded form

To create an Embedded Form:

  1. Navigate to Forms > Embedded Forms and select + Create

    • For accounts created before November 2022, your navigation will be Forms  > Forms, where you will + Create and select Embedded HTML </> in the popup

    • Create an Embedded form and choose a name after clicking the new+ button in Forms

  2. Select the Fields you want in your form

    Embedded Form Fields settings

  3. Click Done

  4. Configure your form Design - this will be unstyled text

    Embedded Form HTML Design block

  5. Click Done

  6. Configure the post-submission and opt-in settings for your form

    Embedded Form Submission settings

    "Send a submission event to Google Analytics" is currently only available for popup forms. Selecting this option with the Embedded Form style will not send data to Google Analytics.

  7. Click Done

  8. Copy the HTML code under ••• Settings and Code

  9. Paste the HTML code into your site’s codebase

Embedded Form Fields

Manage the input fields for your form. Choose Text, Radio Buttons, Dropdown, Date, or Hidden. If you select Radio Buttons, Dropdown, or Date, 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 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:

  1. Click the +New Field button

  2. Enter the Field Label text

  3. Choose Field Type

  4. Use the checkbox to make the field Required

  5. Click Add

To update the Properties in a person’s Profile, add the following Custom Fields on 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

Embedded Form Settings and Code

Embedded form settings and code

You’ll find the HTML code you need to copy on your website by clicking the ••• Settings and Code button. Paste the HTML code where you would like this form to appear on your website. You can use the included CSS styling or change it as needed to match your site. Recaptcha Settings can also be found here.

Click Drip-Hosted Form Link to open the URL for the hosted form in a new tab, which you can then copy. You’ll also find instructions for how to wire an existing form to Drip under "Can I connect my own form to Drip?" 

Embedded Form Submission Settings 

Thank You

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

  • Send a submission event to Google Analytics. This function is currently only available for popup form types.

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. 

Embedded Forms Double Opt-in settings

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.

Add reCAPTCHA (v3) to an Embedded Form

Embedded Form option to Add reCAPTCHA

Google reCAPTCHA is a free web security service that validates form submissions and prevents spam bots from landing on your list. When you register your website with reCaptcha, an API key pair is provided to you. Those credentials can be used to apply reCaptcha to your embedded forms.

Add a reCAPTCHA

  1. Register your website with Google reCAPTCHA
    • Registering will generate a Site Key and Secret Key unique to your forms.

  2. Click on ••• Settings and code, then reCAPTCHA settings 

    Settings and code for Embedded forms pointing to recaptcha setting button
  3. Toggle ON Enable reCaptcha for this form
  4. Enter the Site Key and Secret provided by Google ReCAPTCHA
  5. Click Close

  6. Refresh the page

    • When you update reCAPTCHA settings, you will need to refresh the page so that the form's html includes the updated reCAPTCHA code.
  7. When adding the updated code to your site, do not forget to also copy the ReCAPTCHA script provided in the reCAPTCHA settings:
Recaptcha settings for Embedded Forms