DynamicUserForm

contact-us.js

import React from 'react';
import { graphql, useStaticQuery } from 'gatsby';
import ContactForm from './DynamicUserForm';

const ContactUs = () => {
  const { contactPage } = useStaticQuery(
    graphql`
      query getContactForm {
        contactPage(slug: {eq: "/contact-us/"}) {
          id
          title
          content
          formFields {
            edges {
              node {
                id
                name
                required
                sort
                title
                type
                options
              }
            }
          }
        }
      }
    `,
  );

  return (
    <GenericLayout>
      <ContactForm
        id="ContactForm"
        formData={contactPage}
        formFields={contactPage.formFields.edges}
      />
    </GenericLayout>
  );
};

ContactUs.propTypes = {};
ContactUs.defaultProps = {};

export default ContactUs;

DynamicUserForm.js

import React from 'react';
import { withFormik } from 'formik';
import * as Yup from 'yup';

const MyForm = (props) => {
  const {
    values,
    touched,
    errors,
    handleChange,
    handleBlur,
    handleSubmit,
  } = props;
  return (
    <form onSubmit={handleSubmit}>
      { formFields.map(({ node }) => (
        <input
          type={node.type}
          onChange={handleChange}
          onBlur={handleBlur}
          value={values.name}
          name={node.name}
        />
      ))}
      {errors.name && touched.name && <div id="feedback">{errors.name}</div>}
      <button type="submit">Submit</button>
    </form>
  );
};

const DynamicUserForm = withFormik({
  // set up intial values for fields
  mapPropsToValues: (props) => {
    const initialValues = {};
    props.formFields.map(({ node }) => {
      initialValues[node.name] = node.default || '';
    });
    return initialValues;
  },
  // basic dynamic validation with Yup
  validate: (props) => {
    const toValidate = {};
    props.formFields.forEach(({ node }) => {
      if (node.required) {
        toValidate[node.name] = Yup.string().required('This field is required');
      }
    });
    return Yup.object().shape({
      ...toValidate,
    })
  },

  handleSubmit: (values, { setSubmitting }) => {
    // do submit action
    // you can hook into apollo mutaion here to then post your data to Silverstripe graphQL
  },

  displayName: 'BasicForm',
})(MyForm);

export default DynamicUserForm;