Client-side handling of newsletter subscriptions via ajax. Validates email and shows server response.
We invest a lot of resources into creating best in class open source packages. You can support us by buying one of our paid products.
We highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using. You'll find our address on our contact page. We publish all received postcards on our virtual postcard wall.
This package is custom built for Spatie projects and is therefore not registered on npm. In order to install it via npm you have to go through our registry:
npm set registry https://npm.spatie.be
npm set ca nullOr you can require the package straight from GitHub:
npm install spatie-custom/newsletter-form --saveor
yarn add spatie-custom/newsletter-formThe first step is to create a form that looks like this:
<form data-newsletter method="POST" action="...">
<input data-newsletter-email type="email" name="email">
<button data-newsletter-button>Subscribe</button>
</form>
<div data-newsletter-message
data-newsletter-error-email="No valid email"
data-newsletter-error-ajax="Submission failed">
</div>If you're using the defaults, the easiest way to use the component is to just new it up.
import NewsletterForm from 'newsletter-form';
new NewsletterForm();Wanna do something special? You can customize the behaviour by passing one or more of these options:
const options = {
$form = $form || $('.js-newsletter');
$email = $email || $('.js-newsletter-email');
$button = $button || $('.js-newsletter-button');
$message = $message || $('.js-newsletter-message');
responseKeys: {message: "customMessageField", type: "customTypeField"},
cssClasses: {error: "-custom-error", success: "-custom-success"},
};
new NewsletterForm(options);The used css classes and expected repsonse keys can also be changed:
const options = {
responseKeys: {message: "customMessageField", type: "customTypeField"},
cssClasses: {error: "-custom-error", success: "-custom-success"},
};
new NewsletterForm(options);If you're using the default response keys, a json response with these keys is expected from the server:
// All Good
{"message":"Subscription is done", "type":"success"}
// Warning
{"message":"Already subscribed", "type":"info"}
// No Good
{"message":"Newsletter database is down", "type":"error"}Please see CHANGELOG for more information what has changed recently.
Please see CONTRIBUTING for details.
If you discover any security related issues, please contact Willem Van Bockstal instead of using the issue tracker.
Spatie is a webdesign agency based in Antwerp, Belgium. You'll find an overview of all our open source projects on our website.
The MIT License (MIT). Please see License File for more information.