@dotburo/newsletter-modal NPM

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

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.
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
        }
    },
});