Skip navigation
User Manual
Overview

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.

x A mockup of the cover of the Holiday Ebook

Free Guide to Black Friday & Cyber Monday

Ready to rethink Black Friday? Focus on long-term loyalty, not just short-term sales. Grab our free guide full of whys and hows for this holiday season.

Get my copy