@webriq/gatsby-webriq-form NPM

@webriq/gatsby-webriq-form

@webriq/gatsby-webriq-form exports a React Component to make WebriQ Forms work with Gatsby sites.

Install

npm install @webriq/gatsby-webriq-form

How to use

This is what a component using @webriq/gatsby-webriq-form looks like:

import React from "react";

import WebriQForm from "@webriq/gatsby-webriq-form";

const MyComponent = () => (
  <WebriQForm
    name={FORM_NAME}
    id={HTML_ID}
    className={HTML_CLASSES}
    data-form-id={FORM_ID}
    data-thankyou-url={URL_TO_REDIRECT_AFTER_SUBMISSION}
  >
    <input type="text" name="name" />
    <textarea name="message"></textarea>
    <input type="submit" value="Send Message" />
  </WebriQForm>
);

export default MyComponent;

where:

Prop data-form-id is REQUIRED. You can use formId instead of data-form-id if you like it better. So it goes like:
```
<WebriQForm formId={FORM_ID}>...</WebriQForm>
```

Prop redirectUrl is an alias of data-thankyou-url So it goes like:

<WebriQForm redirectUrl={URL_TO_REDIRECT_AFTER_SUBMISSION}>...</WebriQForm>

Props name, id, className, data-thankyou-url are optional
Prop name is for form name, id is the form id attribute, and className for css classes.
Added in version 1.0.1 Props unmountScript will remove all WebriQ Form DOM related scripts on component unmount. On next component render, they will be loaded and added back to the DOM as a means to start fresh. This process is rather slow and as a last resort to resolve problems introduced by multiple forms, etc.
Added in version 1.0.2 When WebriQ Form init script is loaded, we define the referrerPolicy to be able to send Referrer info.

Example used in Newsletter

import React from "react";

import WebriQForm from "@webriq/gatsby-webriq-form";

class IndexPage extends React.Component {
  render() {
    return (
      <WebriQForm
        method="POST"
        data-form-id="5bcd42f86b63453b251972bc"
        name="Newsletter Form"
        className="form-newsletter"
      >
        <div className="form-row">
          <div className="col-12 mb-3">
            <div className="form-group">
              <label htmlFor="email_address">Enter Your Email Address</label>
              <input
                className="form-control"
                type="email"
                name="Email Address"
                id="email_address"
                placeholder="info@yourmail.com"
              />
              <small className="text-dark form-text mt-2">
                We will never share your email with anyone else.
              </small>
            </div>
          </div>
          <div className="col-12">
            <div className="form-group">
              <div className="webriq-recaptcha" />
            </div>
          </div>

          <div className="col-12">
            <div className="form-group">
              <button className="btn btn-primary hvr-shadow" type="submit">
                Submit
              </button>
            </div>
          </div>
        </div>
      </WebriQForm>
    );
  }
}

export default IndexPage;