FormFlex with Next.js

Step 1: Generate Form Token

The first step is to generate a form token to be used. You can create the form token with your email address here.

Step2: Integrate with React.js

Establish a functional contact form effortlessly with the React framework, Next.js, and the FormFlex API. There's no requirement to configure SMTP, custom backend, or server settings; everything operates directly on the frontend. You can conveniently copy and paste this into your React application, which will function seamlessly.

export default function ContactUsPage() {
      const handleSubmit = async (event) => {
          event.preventDefault();
          const formData = new FormData(event.target);

          formData.append("formToken", "FORMFLEX_TOKEN");

          const object = Object.fromEntries(formData);
          const formInfo = JSON.stringify(object);

          const response = await fetch("https://api.formflex.dev/email/send-email", {
              method: "POST",
              headers: {
                "Content-Type": "application/json",
                Accept: "application/json"
              },
              body: formInfo
          });
          const result = await response.json();
          if (result.success) {
              console.log(result);
          }
      }

    return (
      <>
        <form onSubmit={handleSubmit}>
          <input type="text" name="name" />
          <input type="email" name="email" />
          <textarea name="message" />
          <button type="submit">Submit Form</button>
        </form>
      </>
    );
  }

Success!!! Following these steps, you can collect user input on your website, securely transmit it to the FormFlex API, and have it processed and delivered as an email to your designated recipient.