@future-wd/contact-form-xhr

2.0.1 • Public • Published

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)

Readme

Keywords

none

Package Sidebar

Install

npm i @future-wd/contact-form-xhr

Weekly Downloads

0

Version

2.0.1

License

ISC

Unpacked Size

55.2 kB

Total Files

10

Last publish

Collaborators

  • sean-au
  • sean-pwd