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)
		}}
	/>
)