@dotburo/newsletter-modal

Newsletter modal

Vanilla Javascript modal for newsletter forms.

Installation

npm i @dotburo/newsletter-modal

Usage

import {nodeListArray} from '../src/js/helpers.js';
import NewsletterModal from '../dist/NewsletterModal.js';

const rootElements = document.getElementsByClassName('root-el');

nodeListArray(rootElements).forEach(el => {
    new NewsletterModal(el, {
        url: '/api/v1/newsletter'
    });
})

Styling options

1. If you are using Bootstrap and Sass: just include the file src/css/modal.scss in your bundle.
   • Make sure the bootstrap components modal, forms, input-group and buttons are included too.
2. If not, include the file dist/bootstrapped.css in your project.
   • This bundled css does not include the reboot bootstrap module, that is left to your project to do.

All options

new NewsletterModal(el, {
    url: '/api/v1/newsletter',
    headers: {
        'X-CSRF-TOKEN': 'sdjfsldfj'
    },
    title: 'Subscribe to our newsletter',
    buttons: {
        open: {
            label: 'Subscribe',
            classes: 'btn btn-primary',
        },
        submit: {
            label: 'Submit',
            classes: 'btn btn-primary'
        }
    },
    fields: {
        email: {
            label: 'Email',
            placeholder: 'Email',
            icon: null,
            invalid: 'Please provide a valid email address.'
        },
        firstname: {
            label: 'First name',
            placeholder: 'first name',
            icon: null,
            invalid: 'Please provide a valid first name.'
        },
        lastname: {
            label: 'Last name',
            placeholder: 'Last name',
            icon: null,
            invalid: 'Please provide a valid last name.'
        },
        gdprCheckbox: {
            label: 'By subscribing to the newsletter I agree that ...',
            invalid: 'This is required.'
        },
        gdprNotice: {
            label: 'Privacy notice',
            text: null,
            url: null
        }
    },
});

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• dotburo
• All Contributors

License

GNU General Public License (GPL). Please see the license file for more information.