MailChimp Subscriptions Setup

Subscription Widget

The subscription widget is an AJAX newsletter signup form. It validates the email field, submits in the background to your handler, shows a loading spinner on the button or input icon, and reports the result either as an inline alert or as a toast notification. It works with any backend that returns a small JSON response, including a MailChimp bridge.

Structure

Wrap the form in .subscribe-widget. Include a result container with class .widget-subscribe-form-result and a form posting to your subscribe handler.

<div class="widget subscribe-widget">
	<h5><strong>Subscribe</strong> to Our Newsletter to get Important News, Amazing Offers &amp; Inside Scoops:</h5>
	<div class="widget-subscribe-form-result"></div>
	<form id="widget-subscribe-form" action="include/subscribe.php" method="post" class="mb-0">
		<div class="input-group mx-auto">
			<div class="input-group-text"><i class="bi-envelope-plus"></i></div>
			<input type="email" id="widget-subscribe-form-email" name="widget-subscribe-form-email" class="form-control required email" placeholder="Enter your Email">
			<button class="btn btn-success" type="submit">Subscribe</button>
		</div>
	</form>
</div>

The .required and .email classes on the input drive client side validation before the form is allowed to submit.

Button Loader Variant

By default the envelope icon (.bi-envelope-plus) spins during submit. Add data-loader="button" to the widget to spin the submit button's contents instead. Useful when there is no icon in the input group.

<div class="widget subscribe-widget" data-loader="button">
	<div class="widget-subscribe-form-result"></div>
	<form id="widget-subscribe-form-1" action="include/subscribe.php" method="post" class="mb-0 d-flex flex-column flex-md-row">
		<input type="email" id="widget-subscribe-form-1-email" name="widget-subscribe-form-1-email" class="form-control form-control-lg required email" placeholder="Your Email Address">
		<button class="button button-large button-rounded" type="submit">Subscribe Now</button>
	</form>
</div>

Options

Set these data-* attributes on the .subscribe-widget element. These are the exact attributes the module reads:

Attribute	Purpose	Default
data-alert-type	Set to inline to show the result as an inline alert inside .widget-subscribe-form-result. Otherwise the result is shown as a Canvas toast notification.	toast
data-loader	Set to button to spin the submit button contents during submit. Otherwise the envelope input icon spins.	icon
data-redirect	URL to redirect to on a successful (non error) submit.	none

Backend Response

The handler at your form action should return JSON. The widget reads two fields:

{
	"alert": "success",
	"message": "Thank you for subscribing!"
}

• alert: success or error. Anything other than error is treated as a success, and if data-redirect is set the browser navigates there.
• message: text shown in the inline alert or the toast notification.

On a failed request the widget shows a generic Something went wrong. Please try again. message.

Tips

• Keep .required and .email on the input. The widget uses validation and will not submit an invalid or empty email.
• The form resets automatically after a successful submit, so the field clears on its own.
• Use data-alert-type="inline" when you want the confirmation to appear in place under the form, or leave it off for a floating toast.
• Point the form action at a MailChimp bridge or any script that returns the expected {alert, message} JSON. The widget is backend agnostic.
• Give each form on a page a unique id and matching input name so multiple subscribe widgets can coexist.