Fetch Forms for React

What is Fetch Forms?

Fetch Forms is a headless forms builder designed to help developers build forms and connect data.

Documentation

• Full code examples
• Doc Overview
• The Fetch Form object
• Storing forms in source code

Add the package to your app

npm install @fetchforms/react

yarn add @fetchforms/react

Quick start

Using the <FetchForm /> component is the fastest way to see Fetch Forms in action. This component will handle client-side validation, data parsing, and saving to the cloud if your form has cloudSave set.

import { FetchForm } from "@fetchforms/react";

const MyFetchForm = () => {
    const onSubmit = async (values) => {
        console.log('values', values);
    };
    const onLoad = async (values) => {
        console.log('values', values);
    };

    return (
        <FetchForm
            slug="FORM_SLUG"
            onSubmit={onSubmit}
            onLoad={onLoad}
        />
    );
};

Using hooks

The useFetchForms hook allows you to display your forms in more complex layouts. See the custom form example to see an implementation using Ant.Design form element.

import { useFetchForms } from "@fetchforms/react";

const CustomFormLayout = () => {
    const [fetchForm, loading, error] = useFetchForms('FORM_SLUG');

    const onFinish = (values) => {
        console.log('values', values);
        // To show an error on the form, return a message as a string.
    };

    return (
        <>
            {error && <div>Error: {error}</div>}
            {loading ? (
                <div>Loading...</div>
            ) : (
                fetchForm && (
                    <form
                        name='customForm'
                        onSubmit={onFinish}
                    >
                        {fetchForm.formItems.map((item, i) => {
                            if(item.fieldType === 'select') {
                                return (
                                    <div key={item.fieldHtml.id}>
                                        <label for={item.fieldHtml.name}>{item.label}</label>
                                        <select {...item.fieldHtml}>
                                            {item.options.map((opt) => (
                                                <option value={opt.value} key={opt.value}>{opt.label}</option>
                                            ))}
                                        </select>
                                    </div>
                                );
                            } else if (item.fieldType === 'checkbox') {
                                return (
                                    <div key={item.fieldHtml.id}>
                                        <input {...item.fieldHtml} />
                                        <label for={item.fieldHtml.name}>{item.label}</label>
                                    </div>
                                );
                            {/* ...other field types */}
                            } else {
                                return (
                                    <div key={item.fieldHtml.id}>
                                        <input {...item.fieldHtml} />
                                        <label for={item.fieldHtml.name}>{item.label}</label>
                                    </div>
                                );
                            }
                        })}
                        <button type='submit'>
                            {fetchForm.submitText}
                        </button>
                    </form>
                )
            )}
      </>
    )
}