Embedded forms allow you to automatically generate un-styled, raw HTML form code that you can embed straight into your website. This form will be in direct communication with your Drip account at all times.
Create an embedded form
Go to Forms tab and click New Opt-In Form.
Give it a descriptive name to help you differentiate it from the others.
Add additional form fields (optional)
Add as many additional form fields that you need. Click the Add Field button to add that field to your embedded form. Since the email field is required, all forms will already include it out of the box.
Disable the widget
Be sure to disable the form widget if you'll only be using the embedded form.
Note: It can take up to 15 minutes for the form widget to fully disable on your site. This is generally caused by site caching, or caching plugins that save versions of the site to decrease load times.
Get the form HTML
Now you can grab the HTML code of your embedded form. Keep in mind that your code will look a bit different, depending on additional form fields or other code you've added.
Copy and paste the form code wherever you would like the form to appear. Add any CSS styling needed to match your site.
Keep in mind that if you edit or modify the code in any way, that you will need to keep the input field for email. That is a required field for any Drip form to work properly. You will generally want to leave the form attributes as they were generated. Your form ID and post URL are automatically generated and any modification to those attributes might prevent your form from working properly.
Activate and test your form
Once you have your form ready to go, the last step is to activate it and make sure it is working properly.
Click the Activate button towards the top of your form page.
Now that the form is activated, go to your site and test it. If you get any errors, double check that the form has been activated.
Copy & paste embedded form template
Here's a basic embedded form template that you can copy and paste:
Be sure to replace 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"> <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> <div> <input type="submit" name="submit" value="Sign Up" data-drip-attribute="sign-up-button" /> </div> </form>
Tips and Frequently Asked Questions
An embedded form is capable of going beyond just a lead generation tool. Check out the following links for some ideas on how to expand its functionality:
- This article covers how an embedded form can be used to create a custom subscription preferences page for your subscribers.
- This article covers how an embedded form can be used to give subscribers an option for receiving weekly or monthly newsletters.
- This article covers how to add drop-down selectors, radio buttons, and checkboxes to an embedded Drip form.
Does Drip have a CSS editor?
No. Any CSS styling will need to be added outside of the app. Creating a new embedded form produces the raw HTML only.