Contact Form XHR

Collect form data and asynchronously send over XHR with no page refresh

Import

import contactForm from './contact-form-xhr/src';
contactForm('formId',{params});

Basic Configurtion

import contactForm from './contact-form-xhr/src';
contactForm('js-contactForm', {
  formAction: 'https://mail.powerfulwebdesign.com.au/v2/index.php', 
  account: 'accName', // appended to form data used for end point
  grecaptchaKey: 'Public Key', 
});

Advanced Configuration (Defaults)

import contactForm from './contact-form-xhr/src';
contactForm('js-contactForm', { 
  formAction = '',
  grecaptchaKey = '',
  account: '',
  formTimeout = 8000,
  submitId = 'js-submit',
  statusId = 'js-statusMessage',
  spinnerId = 'js-load',
  alertClass = 'alert', // BS5
  successClass = 'alert-success', // BS5
  errorClass = 'alert-danger', // BS5
  hiddenClass = 'd-none', // custom css class dependency
  grecaptchaLocation = 'bottomleft',
});

Sample HTML Form

Sample HUGO Data See ./hugo DIR

Parameters

| Name | Type |Default |Description| | ---- | ---- | ---- |----| | formAction | string | undefined | ID of form to collect inputs from | | grecaptchaKey | string | undefined | URL to post form to | | formTimeout | integer | 8000 (milisec) | Time to wait before timeout | | submitId | string | 'js-submit' | ID of the form's submit button | | statusId | string | 'js-statusMessage' | ID of status message div | | spinnerId | integer | 'js-load' | ID of spinner div (continuous spin) | | alertClass | string | 'alert' | CSS class used to display an alert box | | successClass | string | 'alert-success' | CSS modifier class for success alert | | errorClass | string | 'alert-danger' | CSS modifier class for error alert | | hiddenClass | string | 'd-none' | CSS class used to hide a div | | grecaptchaLocation | string | 'bottomleft' | Recaptcha location (bottomright, bottomleft, or inline) |