Newsletter | ACCESS NYC Patterns

Source: src/objects/newsletter/newsletter

The Newsletter Object is an embedded Mailchimp signup form. More details about embedded Mailchimp forms can be found on the Mailchimp website. This form can work with any Mailchimp subscriber list that is configured through the form action;

 form action="https://nyc.us18.list-manage.com/subscribe/post?u={{ mailchimp account }}&id={{ form id }}" method="post" id="mc-embedded-subscribe-form"

While the Newsletter Object doesn’t require JavaScript, it is needed for borough data processing (Which borough(s) would you like to recieve updates for?) and front-end validation.

Get Updates

<div class="mb-4 p-3 screen-desktop:p-4 bg-white" data-js="newsletter">
  <div class="type-h3">Get Updates</div>
  <form action="https://nyc.us18.list-manage.com/subscribe/post?u=d04b7b607bddbd338b416fa89&amp;id=aa67394696" id="mc-embedded-subscribe-form" method="post" novalidate="true" target="_blank">
    <div class="c-question">
      <label class="c-question__label">Receive benefits news and reminders about upcoming open enrollment periods.</label>
      <div class="c-question__container">
        <input class="w-full" name="EMAIL" placeholder="Email address" required="true" type="email" />
      </div>
    </div>
    <div class="c-question mt-3">
      <fieldset class="c-question">
        <legend class="c-question__label">Which borough(s) would you like to recieve updates for?</legend>
        <div class="c-question__container screen-tablet:layout-columns">
          <label class="checkbox" for="mce-group[4369]-4369-0">
            <input id="mce-group[4369]-4369-0" name="group[4369][1]" type="checkbox" value="1" />
            <span class="checkbox__label">Bronx</span>
          </label>
          <label class="checkbox" for="mce-group[4369]-4369-4">
            <input id="mce-group[4369]-4369-4" name="group[4369][16]" type="checkbox" value="16" />
            <span class="checkbox__label">Staten Island</span>
          </label>
          <label class="checkbox" for="mce-group[4369]-4369-3">
            <input id="mce-group[4369]-4369-3" name="group[4369][8]" type="checkbox" value="8" />
            <span class="checkbox__label">Queens</span>
          </label>
          <label class="checkbox" for="mce-group[4369]-4369-1">
            <input id="mce-group[4369]-4369-1" name="group[4369][2]" type="checkbox" value="2" />
            <span class="checkbox__label">Brooklyn</span>
          </label>
          <label class="checkbox" for="mce-group[4369]-4369-2">
            <input id="mce-group[4369]-4369-2" name="group[4369][4]" type="checkbox" value="4" />
            <span class="checkbox__label">Manhattan</span>
          </label>
        </div>
      </fieldset>
    </div>
    <div aria-hidden="true" style="position: absolute; left: -5000px;">
      <input name="b_d04b7b607bddbd338b416fa89_98ff3f3900" tabindex="-1" type="text" value="" />
    </div>
    <button class="btn-primary btn-small" type="submit">Sign Up</button>
    <article aria-hidden="true" class="c-alert-box bg-status-warning mt-3 text-small hidden" data-js-newsletter="alert-box-warning">
      <div class="c-alert-box__icon">
        <div class="c-alert-box__svg bg-icon-warning"></div>
      </div>
      <div class="c-alert-box__body" data-js-newsletter="alert-box__text"></div>
    </article>
    <article aria-hidden="true" class="c-alert-box bg-status-success mt-3 text-small hidden" data-js-newsletter="alert-box-success">
      <div class="c-alert-box__icon">
        <div class="c-alert-box__svg bg-icon-success"></div>
      </div>
      <div class="c-alert-box__body" data-js-newsletter="alert-box__text"></div>
    </article>
  </form>
</div>

Newsletter Usage

Global Script

The Newsletter Object does not require JavaScript, however, the associated script provides front-end validation and borough data processing. To use the Newsletter in the global ACCESS NYC Patterns script use the following code:

var access = new AccessNyc();
var newsletter = access.newsletter();

This function will attach the Newsletter submission event and borough data processing to the body of the document.

Providing Strings

The list of strings below are used for validation and alert messaging. They can be overridden using the .strings method and passing an object of new strings. Dynamic variables are passed to the strings (denoted by {{ }} below) is provided and rendered in the output of the string. This method can be used to provide a localized set of strings.

newsletter.strings({
  VALID_REQUIRED: 'This field is required.',
  VALID_EMAIL_REQUIRED: 'Email is required.',
  VALID_EMAIL_INVALID: 'Please enter a valid email.',
  VALID_CHECKBOX_BOROUGH: 'Please select a borough.',
  ERR_PLEASE_TRY_LATER: 'There was an error with your submission. Please try again later.',
  SUCCESS_CONFIRM_EMAIL: 'Almost finished... We need to confirm your email address. To complete the subscription process, please click the link in the email we just sent you.',
  ERR_PLEASE_ENTER_VALUE: 'Please enter a value',
  ERR_TOO_MANY_RECENT: 'Recipient "{{ EMAIL }}" has too many recent signup requests',
  ERR_ALREADY_SUBSCRIBED: '{{ EMAIL }} is already subscribed to list {{ LIST_NAME }}.',
  ERR_INVALID_EMAIL: 'This email address looks fake or invalid. Please enter a real email address.',
  LIST_NAME: 'ACCESS NYC - Newsletter'
});

Module Import

The Newsletter source exists in the NYCO Patterns Framework. Install the @nycopportunity/patterns-framework module to import the module.

import Newsletter from '@nycopportunity/patterns-framework/src/utilities/newsletter/newsletter';

let element = document.querySelector(Newsletter.selector);

if (element)
  new Newsletter(element);

The component requires the data-js="newsletter" attribute and a unique ID targeting the form body.