Embedding Mailchimp forms
Hey and Welcome back . In this section we’ll be covering embedded forms . In the previous section we looked at general forms .
Embedded forms are the forms that you can place on your web page and start collecting emails. The forms can be embedded by taking the embed code from Mailchimp and adding it to our website.
This post plus the video above will walk you through getting the code and pasting it on our web page ( For now a HTML web page). For how to embed a form in WordPress go to this post.
Getting to Embedded forms
- On the Mailchimp Menu, click on Lists .
- Choose the List for which you would like to create an embedded form. This is the list where your subscribers will be added when they add their details on your form .
- Once your list is open , click on Signup Forms .
- In the next page, choose Embedded Forms , by clicking on the Select button .
Embed Code options
In the next page that comes up you will see:
- Form Options ,
- a Preview for your form and
- the embed code for the form.
The types of forms you will see are:
- Classic : This is the default form and takes all the fields that you defined in your Signup forms section. You can also change settings for the fields you need shown to subscribers.
- Super Slim : This is a smaller form. The super slim form only has an email field and the submit button. You may choose to show the Form Title or not.
- Horizontal: It has the fields appearing horizontally . The email field and the button right next to each other. You may choose to show the title or not.
- Advanced : Advanced guide if you want to play with the code and the MailChimp API.
We are interested in the classic form . That’s the one we’ll be looking at and customizing.
Under the form options section you may choose to :
- Include form title .
- You may also change the title of the Form by typing in your new title in the Form title input box
- You may choose to show only the required fields or show all fields. The required fields can be edited on the signup form page builder . The link to the signup page is provided under this setting .
- Show interest group fields for your list
- Show required field indicators to indicate the mandatory fields.
- Choose to show Format options (HTML, plain-text, mobile options)
- You may give your form a fixed width . Giving your form a fixed width will make sure the form is always that width regardless of the screen size. I highly advise against this. Let your form’s width adapt to the width on which it is embedded. And then style it yourself using CSS if necessary.
- You may choose to include the archive link to all your recent campaigns
- You may show the Monkey Rewards Link : The powered by Mailchimp link.
Preview the form . And if you like it the way it is, you may go ahead and copy the embed code. Just click and the code will be selected , then copy.
Take the code and paste it in the location that you want it to be visible.
You can watch the above video to see how I embed the code on a Twitter Bootstrap HTML template.
In the next post / video you will see how to quickly add CSS styles to your form .
Latest posts by Ricky Wahowa (see all)
- 24 CSS Selectors – Combination Selectors , Multiple Selectors - March 21, 2017
- 23 CSS Selectors – PSEUDO Selectors - March 20, 2017
- 22 CSS Selectors – Attribute Selectors - March 17, 2017