Gatsby Drupal Webform

React component for webforms. Goal of this project is to have a react component that generates bootstrap like HTML from webform YAML configuration.

Setup

• Install drupal dependency.
• Enable REST resource "Webform Submit".
• Give access any webform configuration permission to user accesssing Drupal jsonapi.
• If your frontend is hosted on a different domain make sure browser has cross origin access to REST resource.

npm install --save gatsby-drupal-webform

Example

• Gatsby project
• Drupal project

import Webfrom from 'gatsby-drupal-webform'

import { navigate } from 'gatsby'

const ContactForm = ({ data: { webformWebform: webform } }) => (
    <Webform
        webform={webform}
        endpoint="http://localhost:8888/react_webform_backend/submit"
        onSuccess={(response) => navigate(response.settings.confirmation_url)}
    />
)

const query = graphql`
    query {
        webformWebform(drupal_internal__id: { eq: "contact" }) {
            drupal_internal__id
            elements {
                name
                type
                attributes {
                    name
                    value
                }
            }
        }
    }

`

Custom components

This module only provides basic components (textfield, number, textarea etc.) out of the box. More advanced webform components or composite components should be built as custom components. See: WebformEntityRadios for an example.

import React from 'react'
import { useStaticQuery, graphql } from 'gatsby'
import { useWebformElement, WebformElementWrapper } from 'gatsby-drupal-webform'

const WebformEntityRadios = ({ element, error }) => {
    const {
        allTaxonomyTermTags: { nodes: tags }
    } = useStaticQuery(graphql`
        {
            allTaxonomyTermTags {
                nodes {
                    drupal_internal__tid
                    name
                }
            }
        }
    `)

    const [inputProps, settings] = useWebformElement(element, {
        name: element.name,
        type: 'radio'
    })

    return (
        <WebformElementWrapper settings={settings} error={error}>
            {tags.map(({ drupal_internal__tid: tid, name }) => (
                <div className="form-check" key={tid}>
                    <inputid={`tags-${tid}`} className="form-check" defaultChecked={parseInt(inputProps.defaultValue, 10) === tid} {...inputProps} />
                    <label htmlFor={`tags-${tid}`} className="form-check-radio">
                        {name}
                    </label>
                </div>
            ))}
        </WebformElementWrapper>
    )
}

const SelectTagForm = () => (
    <Webform
        id="webform"
        webform={props.data.webformWebform}
        endpoint={config.env.ENDPOINT}
        customComponents={{
            webform_entity_radios: WebformEntityRadios
        }}
        onSuccess={() => {
            setSubmitted(true)
        }}
    />
)