Sanity & Formspark Form Generator

import {FaAlignLeft} from 'react-icons/fa'

export default {
  name: 'formBuilder',
  title: 'Form Builder',
  icon: FaAlignLeft,
  type: 'object',
  fields: [
    {
      name: 'formFields',
      title: 'Form Fields',
      type: 'array',
      of: [{type: 'formFields'}],
    },
  ],
  preview: {
    prepare() {
      return {
        title: `Custom form setup`,
        subtitle: `Form Builder`,
        media: FaAlignLeft,
      }
    },
  },
}

export default {
  name: 'formFields',
  title: 'Form Fields',
  type: 'object',
  fields: [
    {
      name: 'required',
      title: 'Required',
      type: 'boolean',
      initialValue: false,
    },
    {
      name: 'fieldName',
      title: 'Field Name',
      type: 'string',
      validation: Rule => Rule.required(),
    },
    {
      name: 'placeholder',
      title: 'Placeholder',
      type: 'string',
      validation: Rule => Rule.required(),
    },
    {
      name: 'fieldId',
      title: 'Field ID',
      type: 'slug',
      options: {
        source: (doc, options) => options.parent.fieldName,
        maxLength: 200,
      },
      validation: Rule => Rule.required(),
    },
    {
      name: 'inputType',
      title: 'Input Type',
      type: 'string',
      initialValue: 'text',
      options: {
        layout: 'dropdown',
        list: [
          {value: 'text', title: 'Text input'},
          {value: 'email', title: 'Email'},
          {value: 'phone', title: 'Phone number'},
          {value: 'textArea', title: 'Text area'},
          {value: 'file', title: 'File upload'},
        ],
      },
      validation: Rule => Rule.required(),
    },
  ],
};

'use client';
import { useFormspark } from '@formspark/use-formspark';
import React, { FC, useState } from 'react';
import { useForm } from 'react-hook-form';

const InputField = ({ type, id, fieldName, required, placeholder, register }) => (
  <div>
    <label htmlFor={id}>{fieldName}</label>
    <div>
      <input
        type={type}
        id={id}
        required={!!required}
        placeholder={placeholder}
        aria-describedby={type}
        {...register(id)}
      />
    </div>
  </div>
);

export const FormBuilderBlock = ({ formFields, uid }) => {
  const [submitted, setSubmitted] = useState(false);
  const [submit, submitting] = useFormspark({ formId: 'YOUR_FORMSPARK_ID' });
  const { register, handleSubmit } = useForm();

  const onSubmit = (data) => {
    submit(data);
    setSubmitted(true);
  };

  if (submitted) {
    return (
      <div>
        <h1>Success box</h1>
      </div>
    );
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {Array.isArray(formFields) &&
        formFields.map((field) => {
          const { inputType, _key, fieldId, placeholder, _type, fieldName, required } = field ?? {};
          const { current } = fieldId ?? {};
          if (!inputType || !current) return null;

          if (inputType === 'textArea') {
            return (
              <div key={_key}>
                <label htmlFor={current}>{fieldName}</label>
                <div>
                  <textarea
                    id={current}
                    required={!!required}
                    placeholder={placeholder}
                    aria-describedby="textarea"
                    {...register(current)}
                  />
                </div>
              </div>
            );
          }

          return (
            <InputField
              key={_key}
              type={inputType}
              id={current}
              fieldName={fieldName}
              required={required}
              placeholder={placeholder}
              register={register}
            />
          );
        })}
      <button type="submit" disabled={submitting}>
        Submit
      </button>
    </form>
  );
};