Share Form

The Share Form Component uses JavaScript to share a page url via SMS or email. It will post the request to the action attributed to the form for backend processing but it will not submit directly to any messaging service. The url to be shared is defined in a hidden field in the form markup.

<div class="c-share-form" data-js="share-form">
  <button aria-controls="aria-c-share-form__text" aria-describedby="share-disclaimer" aria-expanded="false" class="btn btn-primary c-share-form__toggle" data-js="share-form__control disclaimer-control" data-scroll-offset="16">Text</button>
  <form aria-hidden="true" class="c-share-form__form hidden" id="aria-c-share-form__text" method="post">
    <input name="action" type="hidden" value="sms_send" />
    <input name="url" readonly="" type="hidden" value="MyURL" />
    <input name="hash" readonly="" type="hidden" value="MyHash" />
    <input maxlength="13" name="GUID" readonly="" type="hidden" value="MyGUID" />
    <div class="c-share-form__fieldset">
      <div class="c-share-form__input input-phone-us">
        <input data-js="share-form__input" name="to" placeholder="Phone Number" required="true" type="tel" />
      </div>
      <div class="c-share-form__button">
        <button class="btn btn-primary btn-small" type="submit">Send</button>
        <div aria-hidden="true" class="c-share-form__spinner" data-js="spinner">
          <svg class="spinner icon-4 text-yellow-access" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <circle class="spinner__path" cx="12" cy="12" fill="none" r="10"></circle>
          </svg>
        </div>
        <div class="c-share-form__success">Sent!</div>
      </div>
    </div>
  </form>
</div>

Share Form Usage

Global Script

The Share Form Component requires JavaScript for showing and hiding the SMS or email form field and for validating/submitting the form for backend processing. To use the Share Form Component through the global ACCESS NYC Patterns script use the following code:

<!-- Global Script -->
<script src="dist/scripts/AccessNyc.js"></script>

<script>
  var access = new AccessNyc();

  access.shareForm();
</script>

This will instantiate the Share Form Component and attach event listeners for toggling the form open and handling the form submission.

Module Import

The ES module requires importing and object instantiation in your main script. You must pass a DOM selection of each Share Form Component to a new instance of the class. A selector reference is stored in the class.

import ShareForm from 'src/components/share-form/share-form';

let elements = document.querySelectorAll(ShareForm.selector);

elements.forEach(element => {
  new ShareForm(element);
});

Custom Properties

The following properties can be overridden for customization after instatiation.

Property Description
selector The main component selector.
selectors Strings used by JavaScript to select DOM elements within the component.
classes CSS classes toggled by this component.
strings Strings used for validation feedback.
patterns HTML5 validation patterns for form input elements.
sent A function hook after a message has been sent successfully.

View the source (link at the top of this page) for defaults. See the property setting example below for property setting;

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

let shareForm = new ShareForm(element);

shareForm.strings = {
  {{ MY_CUSTOM_STRINGS }}
};

Polyfills

This script uses the Toggle Utility as a dependency and reqiures the same polyfills for IE11 support. See the “Toggle Usage” section for more details. In addition, it uses the Element.prototype.closest method and fetch API. See the “Polyfills” section in the Installation docs for a full recommendation on polyfills.