Code Examples

FormBold provides free Form API that works with all frameworks, libraries, and platforms.

These code examples will help you to get started easily and to understand code structure in action.

Plain HTML

Simple FormBold code example on a plain HTML project.

<form action="https://formbold.com/s/FORM_ID" method="POST">
  <input type="email" placeholder="Email" name="email" />
  <input type="text" placeholder="Subject" name="subject" />
  <textarea name="message" placeholder="Type your message"></textarea>

	<button type="submit">Send Message</button>
</form>

Plain HTML with reCAPTCHA

Simple FormBold code example with reCAPTCHA on an HTML project.

// Loading reCAPTCHA script
<script src="https://www.google.com/recaptcha/api.js" async defer></script>

<form action="https://formbold.com/s/FORM_ID" method="POST">
  <label>
    Your email:
    <input type="email" name="email">
  </label>
  <label>
    Your message:
    <textarea name="message"></textarea>
  </label>
  // Insert reCAPTCHA site key here
  <div class="g-recaptcha" data-sitekey="your recaptcha site key"></div>
  <button type="submit">Send</button>
</form>

React / Next.js

This example code will work in the same way with NextJS and Gatsby

import { useForm } from "formbold-react";

function Form() {
  const [state, handleSubmit] = useForm("Form_ID");

  if (state.succeeded) {
    return <div>Form submitted successfully</div>;
  }

  return (
    <>
      <h1>Home Page</h1>
      <form onSubmit={handleSubmit}>
        <label htmlFor="email">Email Address</label>
        <input id="email" type="email" name="email" required />
        <textarea id="message" name="message" required />
        <button type="submit">Submit</button>

        <div>{state.error && state.error.message}</div>
      </form>
    </>
  );
}

export default Form;

React / Next.js with reCAPTCHA

This example code will work in the same way with Next.js and Gatsby, for reCAPTCHA you’ll have to install the dependency by this command:

npm install react-google-recaptcha

import { useForm } from "formbold-react";
import ReCAPTCHA from "react-google-recaptcha";
import { createRef } from "react";

function Form() {
  const [state, handleSubmit] = useForm("Form_ID");
  const recaptchaRef = createRef();

  if (state.succeeded) {
    return <div>Form submitted successfully</div>;
  }

  return (
    <>
      <h1>Home Page</h1>
      <form onSubmit={(e) => handleSubmit(e, recaptchaRef)}>
        <label htmlFor="email">Email Address</label>
        <input id="email" type="email" name="email" required />
        <textarea id="message" name="message" required />

        <ReCAPTCHA
          ref={recaptchaRef}
          // Insert reCAPTCHA site key here
          sitekey="Recaptcha site key"
        />
        <button type="submit">Submit</button>

        <div>{state.error && state.error.message}</div>
      </form>
    </>
  );
}

export default Form;