In this article, you will learn how to add the following options to an embedded form:

Before going further with these form modifications, you will need to create an embedded form. Creating the form will automatically generate the HTML we will be using and modifying.

This article will take you through the steps to create an embedded form.

Each of the following examples will require at least 1 additional form field other than the required email field. If you are unsure about how to create additional form fields for your embedded form, review this step from the article mentioned above.

When you create an additional form field for your embedded form, it also creates a form field identifier.

form-field-identifier

You will want to be sure and use the form field identifier wherever you see:

name="fields[YOUR_FORM_FIELD]"

Additionally, wherever you see:

value="your value"

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

Lastly, if you will be copy and pasting these form code examples, you will need to 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">

Your can find your form ID under the form Embedded tab:

embedded-form-id

 

Drop Down

Drop down selectors allow the user to select only 1 of the choices provided. You should create an additional form field for each select HTML tag you will be using in your embedded form.

Here is the basic code template for a drop-down selector:

<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>

Add the above code wherever you would like the drop-down selector to appear in your embedded form.

An example of the drop-down selector in the form code: using an example form field identifier called newsletter_frequency.

<form action="https://www.getdrip.com/forms/YOUR_FORM_ID/submissions" method="post" data-drip-embedded-form="YOUR_FORM_ID">
  <h3 data-drip-attribute="headline">Your Headline</h3>
  <div data-drip-attribute="description">Your Description</div>
  <div>
    <label for="fields[email]">Email Address</label><br />
    <input type="email" name="fields[email]" value="" />
  </div>
  
  <!-- Drop-down selector example -->
  <div>
    <label for="fields[newsletter_frequency]">Newsletter Frequency</label><br />
    <select name="fields[newsletter_frequency]">
      <option value="monthly">Monthly</option>
      <option value="weekly">Weekly</option>
      <option value="daily">Daily</option>
    </select>
  </div>

  <div>    
    <input type="submit" name="submit" value="Sign Up" data-drip-attribute="sign-up-button" />  
  </div> 
</form>

Radio Buttons

Radio buttons allow the user to select only 1 of the choices given. You will most likely have 1 additional form field for your radio button options as they would be selecting one option from the group.

Here is the basic code template for radio buttons:

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

Add the above code wherever you would like the radio buttons to appear in your embedded form.

Example using radio buttons in the form code: using an example form field identifier called newsletter_frequency.

<form action="https://www.getdrip.com/forms/YOUR_FORM_ID/submissions" method="post" data-drip-embedded-form="YOUR_FORM_ID">
  <h3 data-drip-attribute="headline">Your Headline</h3>
  <div data-drip-attribute="description">Your Description</div>
  <div>
    <label for="fields[email]">Email Address</label><br />
    <input type="email" name="fields[email]" value="" />
  </div>
  
  <!-- Radio buttons example -->
  <div>
    <div><input type="radio" name="fields[newsletter_frequency]" value="monthly" />Monthly</div>
    <div><input type="radio" name="fields[newsletter_frequency]" value="weekly" />Weekly</div>
    <div><input type="radio" name="fields[newsletter_frequency]" value="daily" />Daily</div>
  </div>
  <div>     
    <input type="submit" name="submit" value="Sign Up" data-drip-attribute="sign-up-button" />   
  </div> 
</form>

Checkboxes

Checkboxes allow your subscribers to make multiple selections. This comes in handy if you want to give your subscribers a few options when they are selecting the email topics they are interested in receiving.

You will want to create additional form fields for each checkbox you add to your form code.

Here is the basic code template for checkboxes:

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

Add the above code wherever you would like it to appear in your embedded form.

By adding the “hidden” input field, we are able to store a default value for those checkboxes that were not selected by the subscriber.

Example using checkboxes in the form code: example using 3 different form field identifiers: promotions, marketing, and newsletter.

<form action="https://www.getdrip.com/forms/YOUR_FORM_ID/submissions" method="post" data-drip-embedded-form="YOUR_FORM_ID">
  <h3 data-drip-attribute="headline">Your Headline</h3>
  <div data-drip-attribute="description">Your Description</div>
  <div>
    <label for="fields[email]">Email Address</label><br />
    <input type="email" name="fields[email]" value="" />
  </div>

  <!-- Checkbox example -->
  <div>
    <input type="hidden" name="fields[promotions]" value="false" />
    <input type="checkbox" name="fields[promotions]" value="true" />Promotions
  </div>
  <div>
    <input type="hidden" name="fields[marketing]" value="false" />
    <input type="checkbox" name="fields[marketing]" value="true" />Marketing
  </div>
  <div>
    <input type="hidden" name="fields[newsletter]" value="false" />
    <input type="checkbox" name="fields[newsletter]" value="true" />Newsletter
  </div>
  <div>     
    <input type="submit" name="submit" value="Sign Up" data-drip-attribute="sign-up-button" />   
  </div> 
</form>

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

Both the hidden and the visible checkbox should line up with the same form field as seen in the code example above.

Tips & Frequently Asked Questions

Tip: Here is a couple of examples centered around how to use these form mods in real situations:

  • This article outlines how to create a custom subscription preferences page for your subscribers using an embedded form. This example uses checkboxes and a drop-down selector.
  • This article gives an example using a drop-down selector that gives the subscriber an option to receive monthly, or weekly newsletters.

Help, I’m having trouble with my embedded form

Please feel free to contact support and we’d be happy to help you out!