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
Navigate to Forms tab and click the New Opt-In Form button.
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. The email field will be created automatically anytime a new opt-in form is created
Any additional form fields that you add here will be included when we grab our form HTML in step 4.
Disable the widget
In most cases, if you are creating a form to be used as an embedded form, you will not be using it as a widget.
Click the Enable the widget checkbox to uncheck it.
You will be redirected straight to the Embedded tab, and the widget should say “Disabled”.
Get the form HTML
You should now be able to see the HTML that was automatically generated for your use. Your code might look a bit different from this example if you added additional form fields in step 2.
Copy and paste the embedded form HTML where you would like the form to appear and 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 now button towards the top of your form page.
Now that the form is activated, you can navigate to the webpage displaying the form and test it with your own email address. At minimum, it should intake an email address and create or updated a subscriber in your Drip account.
Copy & paste embedded form template
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
Tip: An embedded form can serve functionality beyond lead generation:
- 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.
I’m having trouble with my embedded form
Please feel free to contact support and we’d be happy to help!