https://jixipix.com/style/js/newsletter-form.js

1// Lightweight reusable newsletter form initializer.
2(function () {
3  function createEl(tag, attrs, text) {
4    var el = document.createElement(tag);
5    if (attrs) {
6      Object.keys(attrs).forEach(function (key) {
7        el.setAttribute(key, attrs[key]);
8      });
9    }
10    if (text) {
11      el.textContent = text;
12    }
13    return el;
14  }
15
16  function render(container, options) {
17    var endpoint = (options && options.endpoint) || '/Common/newsletter_submit.php';
18    var placeholder = (options && options.placeholder) || 'Sign up for promotions!';
19    var buttonText = (options && options.buttonText) || 'Subscribe';
20
21    var response = createEl('div', { class: 'response alert alert-success', style: 'display:none;' });
22    var closeBtn = createEl('button', { type: 'button', class: 'close', 'data-dismiss': 'alert' }, '×');
23    response.appendChild(closeBtn);
24    response.appendChild(createEl('p'));
25
26    var form = createEl('form', {
27      class: 'searchform forms',
28      method: 'post',
29      enctype: 'multipart/form-data',
30      novalidate: 'novalidate',
31      action: endpoint
32    });
33
34    var ol = createEl('ol');
35    var li = createEl('li', { class: 'form-row text-input-row email-field' });
36    var input = createEl('input', {
37      type: 'text',
38      name: 'email',
39      class: 'validate[required,custom[email]] required email',
40      value: placeholder
41    });
42    input.addEventListener('focus', function () {
43      if (input.value === placeholder) input.value = '';
44    });
45    var button = createEl('button', { type: 'submit', class: 'btn btn-default' }, buttonText);
46    var errorNote = createEl('p', null, ' * Please enter a valid email');
47
48    li.appendChild(input);
49    li.appendChild(button);
50    li.appendChild(errorNote);
51    ol.appendChild(li);
52    form.appendChild(ol);
53
54    var subscribedLabel = createEl('label', { class: 'subscribed-button hidden' }, 'Subscribed');
55
56    container.innerHTML = '';
57    container.appendChild(response);
58    container.appendChild(form);
59    container.appendChild(subscribedLabel);
60
61    form.addEventListener('submit', function (e) {
62      e.preventDefault();
63      var email = input.value.trim();
64      if (!email) return;
65
66      button.disabled = true;
67      fetch(endpoint, {
68        method: 'POST',
69        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
70        body: 'email=' + encodeURIComponent(email)
71      })
72        .then(function (res) {
73          return res.text();
74        })
75        .then(function (text) {
76          response.style.display = 'block';
77          response.querySelector('p').textContent = text;
78          subscribedLabel.classList.add('hidden');
79          button.disabled = false;
80          if (/already subscribed/i.test(text)) {
81            subscribedLabel.classList.remove('hidden');
82          }
83        })
84        .catch(function () {
85          response.style.display = 'block';
86          response.querySelector('p').textContent = 'There was an error processing your request. Please try again later.';
87          button.disabled = false;
88        });
89    });
90  }
91
92  window.initNewsletterForm = function (selector, options) {
93    var targets = document.querySelectorAll(selector);
94    targets.forEach(function (el) {
95      render(el, options || {});
96    });
97  };
98})();