Community Plugin

@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.

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;

Intended Use

This is used specifically for WebriQ Forms which is by default integrated in WebriQ App.

Versions

1.0.2 - Adds referrerPolicy to script to be able to pass Referrer info
1.0.1 - Bugfixes and improvements.
0.0.1 - Initial release

Bugs / Issues / Suggestions

Please file a new issue at Issues tab. Thank you! :)