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.

$3

* 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
`

$3

* Gatsby project
* Drupal project

`jsx
import Webfrom from 'gatsby-drupal-webform'

import { navigate } from 'gatsby'

const ContactForm = ({ data: { webformWebform: 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
}
}
}
}


`

$3

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 }) => (