Skip navigation
User Manual
Overview

Embedded

The embedded form option.

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 on your website. Like the form Widget, an embedded form will be in direct communication with your Drip account at all times.

Create an Embedded Form

To create an embedded form:

  1. Go to Forms

  2. Click New Opt-In Form

  3. Enter a name for your form

  4. Toggle off Enable Form Widget

  5. Add any form fields you’d like to have on your form by clicking the Add Field button to add that field to your embedded form

  6. Under the Embedded tab copy the HTML code of your form

  7. Paste the form code wherever you would like it to appear on your website

  8. Add any CSS styling needed to match your site

It can take up to 15 minutes for the form Widget to fully disable on your site.

Add a Drop-Down Selector, Radio Buttons, and Checkboxes to an Embedded Form

Drop-downs, radio buttons, or checkboxes can be added to your embedded Forms with some additional HTML coding. In this section, you’ll learn how to add a drop-down, radio button, and checkbox to your forms HTML code.

To add each of these, you’ll need to create additional form fields for your form first. When you create an additional form field, it also creates a form field identifier.

Insert the identifier in your form code in the following places:

name="fields[YOUR_FORM_FIELD]"

Or:

value="your value"

replace “your value” with the value that will be assigned to the form field identifier when someone makes their selections.

Copy and paste this code and swap out YOUR_FORM_ID with the ID of your embedded form:

<form action="https://www.getdrip.com/forms/YOUR_FORM_ID/submissions" method="post" data-drip-embedded-form="YOUR_FORM_ID">

Find your form ID under the form's Embedded tab.

Drop-Down Selector

Drop-down selectors allow you to select only one of the choices provided. Create an additional form field for each select HTML tag you will be using in your embedded form.

To add a drop-down selector to your embedded form, add this code where you would like the drop-down selector to appear in your form code:

<select name="fields[YOUR_FORM_FIELD]">
 <option value="your value">Option 1</option>
 <option value="your value">Option 2</option>
 <option value="your value">Option 3</option>
</select>

Radio Buttons

Radio buttons allow you to select only one of the choices given.

To add a radio button to your embedded form, copy and paste this code where you would like the radio buttons to appear in your form code:

<input type="radio" name="fields[YOUR_FORM_FIELD]" value="your value" />
<input type="radio" name="fields[YOUR_FORM_FIELD]" value="your value" />

Checkboxes

Checkboxes allow people to make multiple selections.

To create checkboxes in your embedded form, add this code wherever you would like the checkboxes to appear in your form code:

<input type="hidden" name="fields[YOUR_FORM_FIELD]" value="your value" />
<input type="checkbox" name="fields[YOUR_FORM_FIELD]" value="your value" />

By adding the “hidden” input field, you can store a default value for those checkboxes that were not selected by someone. Both the hidden and the visible checkbox should line up with the same form field.

If someone does not check off a given selection, the “hidden” input field will default that form field value to false. If someone does check off the option, the value for that field will be set to true. This will help if someone returns to this form and makes any modifications to their selections.

Add reCAPTCHA to an Embedded Form

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

  2. Enter your Site Key

  3. Enter your Secret

  4. Enable the setting to Enable reCaptcha for this form

  5. Click Save

Apply Tags and Custom Fields through Embedded Form Fields

You can apply tags and custom fields when someone submits an embedded form in Drip.

Custom Fields

To apply a custom field, use the following syntax to add a hidden field to your embedded form code:

<input type="hidden" name="fields[your_custom_field_name]" value="your custom field value" />

This code will automatically create a custom field for any person, new or existing, who submits this form.

Tags

To add a tag to anyone who submits your form, use the following hidden input:

<input type="hidden" name="tags[]" value="your_tag" />

This code will automatically create a tag for any person, new or existing, who submits this form.