Mailchimp: Create and embed a signup form with custom CSS

BizatWeb·Nov 2025

Demo summary

Building a signup form in Mailchimp, applying custom CSS for styling, and embedding it into a WordPress sidebar using shortcodes.

Step-by-step

Navigate to the Forms section in Mailchimp and click Add New Form.
Go to your website's WordPress Customizer and open the Custom CSS section.
Copy the provided CSS code from the source file and paste it into the Custom CSS box, then click Publish.
Return to the Mailchimp form editor and paste the specific class code snippet before the 'required' attribute in the form field.
Paste the button class code snippet before the 'value' attribute in the form code and click Save Changes.
Go to Appearance > Widgets in WordPress and add the Mailchimp Signup Form widget to your sidebar.
To add the form to a specific page, copy the form shortcode and paste it into a Shortcode block in the WordPress editor.

Options

Change the button color by replacing the background color hex code in the Custom CSS with a code from the provided color source link.
Embed the form in a sidebar via widgets or in a page/post via shortcodes.

Watch out for

You must manually insert a space bar after pasting the class codes into the form fields to ensure the code is valid.

Tips

Use the 'Customize' option on your website to find the Custom CSS section, as most themes include this by default.
If you want to change the button to a specific color like purple, copy the hex code from the provided sources page and replace the background color in your CSS.

Highlights

“Now friends, this is the thing it is created. Very simple, very easy.”

All demos from “MAILCHIMP TUTORIAL 2025 (For Beginners) - Step by Step Email Marketing Guide”

3:192:49Create a Mailchimp accountStep-by-step walkthrough of signing up for a free Mailchimp account, activating it via email, and completing the initial business profile setup.Mailchimp· Deliverability & setup
6:434:42Configure audience settings and double opt-inHow to manage audience settings, rename lists, enable double opt-in for verification, and set default sender details.Mailchimp· Audience & data
11:328:01Design an email template in MailchimpUsing the Mailchimp classic builder to customize layouts, change background colors, edit text, and add links to images.Mailchimp· Design a newsletter / email (drag-and-drop editor)
23:484:32Create image groups and social footersDemonstration of adding image groups to a template, linking them to external URLs, and configuring social media icons in the footer.Mailchimp· Use / customize email templates
30:391:41Connect Mailchimp to WordPress via APIHow to generate a Mailchimp API key and use the 'Mailchimp for WordPress' plugin to sync a website with an email list.Mailchimp· Integrate with Shopify / store / CRM / other apps
32:375:18Create and embed a signup form with custom CSSCurrentBuilding a signup form in Mailchimp, applying custom CSS for styling, and embedding it into a WordPress sidebar using shortcodes.Mailchimp· Create an email signup / subscription form
38:189:19Set up an exit-intent popupUsing the Hustle plugin to create a popup, connecting it to Mailchimp, and setting display rules like scroll depth and exit intent.Mailchimp· Add an opt-in popup
47:462:28Send a plain text email campaignWalkthrough of creating a plain text campaign, verifying the sending domain, and broadcasting to the entire audience.Mailchimp· Send a broadcast campaign
50:211:44Send a regular HTML email campaignSelecting a saved template and sending a formatted HTML newsletter to subscribers.Mailchimp· Send a broadcast campaign
52:052:18Set up a welcome email automationCreating an automated welcome email triggered when a new subscriber joins the list, including setting the delivery delay.Mailchimp· Build a welcome / drip automation
55:162:43Connect Mailchimp to WooCommerceInstalling the Mailchimp for WooCommerce plugin and enabling the 'subscribe at checkout' feature.Mailchimp· Integrate with Shopify / store / CRM / other apps
59:454:10Create a first-time customer thank you automationSetting up an automated thank you email for new customers that includes a dynamic promo code for future purchases.Mailchimp· Set up a post-purchase / win-back flow
1:04:572:08Configure abandoned cart recovery emailsActivating the abandoned cart automation in Mailchimp to automatically pull product data from a WooCommerce cart and email the user.Mailchimp· Set up an abandoned-cart flow (ecommerce)
Watch “MAILCHIMP TUTORIAL 2025 (For Beginners) - Step by Step Email Marketing Guide” →

Create an email signup / subscription form

32:375:18Create and embed a signup form with custom CSSCurrentBuilding a signup form in Mailchimp, applying custom CSS for styling, and embedding it into a WordPress sidebar using shortcodes.BizatWeb