dotform

Dotform

An easy way to create professional forms in react

Dotform is an easy way to create professional forms in minutes, this library based on React Js.

Installation

npm i dotform --save

Usage

import DotForm from 'dotform';

const Form = (props) => {

    const [lastName, setLastName] = useState("Soen");
    
    const formStructure = [
        // Row 1
        {
            title: "Lorem Ipsum", // Row Title | Optional
            description: "Vivamus suscipit tortor eget felis porttitor volutpat.", // Row description || Optional
            rows: [
                [
                    {
                        name: "name", // Optional
                        label: "Name", // Optional
                        input: {
                            type: "text",
                            required: true,
                            value: "Lord"
                        }
                    },
                    {
                        name: "last_name",
                        label: "Last Name",
                        input: {
                            type: "text",
                            required: false,
                            value: lastName
                        }
                    }
                ],
                // Row 2
                [
                    {
                        name: "email",
                        label: "Email",
                        input: {
                            type: "email",
                            required: true
                        }
                    },
                    {
                        name: "password",
                        label: "Password",
                        input: {
                            type: "password",
                            required: true
                        }
                    }
                ],
            ]
        }
    ]
    
    const handleSubmit = (data) => {
        console.log(data);
    }

    return (
        <DotForm
            onSubmit={handleSubmit}
            structure={formStructure}
        />
    )
}

Result