React component for Drupal webforms
npm install 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.
* 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
* Gatsby project
* Drupal project
`jsx
import Webfrom from 'gatsby-drupal-webform'
import { navigate } from 'gatsby'
const ContactForm = ({ data: { webformWebform: 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
}
}
}
}
`
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.
`jsx
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 (
{tags.map(({ drupal_internal__tid: tid, name }) => (
} className="form-check" defaultChecked={parseInt(inputProps.defaultValue, 10) === tid} {...inputProps} />
))}
)
}
const SelectTagForm = () => (
webform={props.data.webformWebform}
endpoint={config.env.ENDPOINT}
customComponents={{
webform_entity_radios: WebformEntityRadios
}}
onSuccess={() => {
setSubmitted(true)
}}
/>
)
``