@future-wd/contact-form-xhr

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)