Skip to content

Form Builder

Build your form with code and example.

Layout

!You can start adding fields with Input Creator.

  • First name
  • Last name
  • Email
  • Mobile number
  • Title
  • Developer

Input Creator

!This form allows you to create and update inputs. The Generate Form button will create a new form with the updates.

or

Code

!As you are making changes over the form, the code section will be updated and you can copy the code as well.

import React from 'react';
import { useForm } from 'react-hook-form';

export default function App() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data);
  console.log(errors);
  
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="text" placeholder="First name" {...register("First name", {required: true, maxLength: 80})} />
      <input type="text" placeholder="Last name" {...register("Last name", {required: true, maxLength: 100})} />
      <input type="text" placeholder="Email" {...register("Email", {required: true, pattern: /^\S+@\S+$/i})} />
      <input type="tel" placeholder="Mobile number" {...register("Mobile number", {required: true, minLength: 6, maxLength: 12})} />
      <select {...register("Title", { required: true })}>
        <option value="Mr">Mr</option>
        <option value="Mrs">Mrs</option>
        <option value="Miss">Miss</option>
        <option value="Dr">Dr</option>
      </select>

      <input {...register("Developer", { required: true })} type="radio" value="Yes" />
      <input {...register("Developer", { required: true })} type="radio" value="No" />

      <input type="submit" />
    </form>
  );
}
BEEKAI Form builder

Next-gen form builder

Build the next-generation forms with modern technology and best in class user experience and accessibility.

  • Generate code for React/Vanilla JS

  • GUI with drag and drop

  • Improved accessibility by default

  • Support dynamic field array

  • End-to-end integration with submission

  • User behaviour analytic

  • and many more features

Try it now

Want to learn more?

Check out the React Hook Form documentation and learn all about the API.

Edit