By modifying a bit of HTML, you can easily create a drop-down selector to give the subscriber the option to select how often they would like to receive a newsletter email.

Example use case

Let’s say we want to allow our opt-in subscribers to select whether they would like to receive a monthly, or a weekly newsletter; adding an HTML drop-down selector will work great for this!

The end result will look similar to this:

skitch-12

Step 1: Create the form

First, we will need to create the Drip form that will generate the embedded form code. We will then modify the HTML to create our drop-down.

If you are new to creating an embedded Drip form, check out this article.

Since the email field is already included by default, we will only need to add one additional form field. Let’s call it newsletter frequency.

skitch-5

Now we have all the form fields we need for this example.

skitch-6

Since we won’t be using the widget, let’s go ahead and disable it.

skitch-7

Step 2: Get the embedded form code

Select the Embedded tab to reveal the embedded form code that Drip has generated for us.

skitch-8

Copy and paste the code into your text editor, and it should now be visible in your browser.

skitch-11

Step 3: Modify the code

Now we are going to modify the original code:

skitch-4

Change the original code (above) to match the modified code in the screenshot below.

skitch-9

Step 4: Test the form

Check it out in your browser. You should now be able to select one of the two options.

skitch-14

The newsletter_frequency custom field will now assign it’s value to whichever selection the user has chosen from the drop-down once the form is submitted.

Recap

We have swapped out the <input> tag for the <select> tag, and added a couple of <option> tags that will hold the values we wish to appear in the drop-down selector.