See what's launched

The next gen Gatsby is here Performance, developer velocity, and scaling to meet Enterprise needs - See what’s launched

Sign Up for Free
Community Plugin
View plugin on GitHub


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


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 = () => (
    <input type="text" name="name" />
    <textarea name="message"></textarea>
    <input type="submit" value="Send Message" />

export default MyComponent;


  • 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 (
        name="Newsletter Form"
        <div className="form-row">
          <div className="col-12 mb-3">
            <div className="form-group">
              <label htmlFor="email_address">Enter Your Email Address</label>
                name="Email Address"
              <small className="text-dark form-text mt-2">
                We will never share your email with anyone else.
          <div className="col-12">
            <div className="form-group">
              <div className="webriq-recaptcha" />

          <div className="col-12">
            <div className="form-group">
              <button className="btn btn-primary hvr-shadow" type="submit">

export default IndexPage;

Intended Use

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


  • 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! :)

© 2022 Gatsby, Inc.