formcarry.
:')
formcarry
_

FORMCARRY EXAMPLES

React Form Example

Start collecting form submissions from your React form with formcarry in 2 minutes. Create your form in formcarry and paste your unique URL inside your form. Look the code examples and detailed tutorial below and get started.

With Fetch

With Axios

With Formcarry.js

Uploading Files

VS Code

Copy Code

1import { useState } from "react";
2
3export default function Fetch() {
4  const [email, setEmail] = useState("");
5  const [message, setMessage] = useState("");
6
7  const [submitted, setSubmitted] = useState(false);
8  const [error, setError] = useState("");
9
10  function submit(e) {
11    // This will prevent page refresh
12    e.preventDefault();
13
14    // replace this with your own unique endpoint URL
15    fetch("https://formcarry.com/s/XXXXXXX", {
16      method: "POST",
17      headers: {
18        "Content-Type": "application/json",
19        Accept: "application/json"
20      },
21      body: JSON.stringify({ email: email, message: message })
22    })
23      .then((res) => res.json())
24      .then((res) => {
25        if (res.code === 200) {
26          setSubmitted(true);
27        } else {
28          setError(res.message);
29        }
30      })
31      .catch((error) => setError(error));
32  }
33
34  if (error) {
35    return <p>{error}</p>;
36  }
37
38  if (submitted) {
39    return <p>We've received your message, thank you for contacting us!</p>;
40  }
41
42  return (
43    <form onSubmit={submit}>
44      <label htmlFor="email">Email</label>
45      <input
46        id="email"
47        type="email"
48        value={email}
49        onChange={(e) => setEmail(e.target.value)}
50        required
51      />
52
53      <label htmlFor="message">Message</label>
54      <textarea
55        id="message"
56        value={message}
57        onChange={(e) => setMessage(e.target.value)}
58      />
59
60      <button type="submit">Send</button>
61    </form>
62  );
63}

Step-by-step guide

React Form Tutorial

What is React?

React is a JavaScript library for building user interfaces. It was developed by Facebook and is now used by many companies and organizations to build web and mobile applications. React allows developers to create reusable components that can be easily shared and modified, making it easier to build and maintain complex applications.

What is Formcarry?

Formcarry is a tool that helps businesses process form data from their websites. It offers a simple way to add custom contact forms to a website and process the data through Formcarry's servers instead of through the website itself. With Formcarry, businesses can automatically receive email notifications for each new form submission, set up auto-responder messages for the sender, and have built-in spam protection for their forms.

How to create a simple form in React

To create a simple form in React, you can use the form element and add form fields such as text inputs, email inputs, and textareas. Here is an example of a simple form component:

VS Code

Copy Code

1
2import React from 'react';
3
4const Form = () => {
5  return (
6    <form>
7      <label htmlFor="name">Name:</label>
8      <input type="text" id="name" />
9      <br />
10      <label htmlFor="email">Email:</label>
11      <input type="email" id="email" />
12      <br />
13      <label htmlFor="message">Message:</label>
14      <textarea id="message"></textarea>
15      <br />
16      <button type="submit">Submit</button>
17    </form>
18  );
19};
20
21export default Form;
Copied example to clipboard 👏

This form component creates a form with a text input for the name, an email input for the email address, a textarea for the message, and a submit button.

How to process form data using Formcarry

To process form data using Formcarry, you'll need to sign up for an account at formcarry and create a new form. Save your unique endpoint URL, which you can use to submit the form data to Formcarry. Then, in your form component, import the axios library and use it to send a POST request to the Formcarry endpoint with the form data when the form is submitted. Here is an example of how to handle form submissions in React:

VS Code

Copy Code

1import React, { useRef } from "react"
2
3const Form = () => {
4  // create a Ref to access our form element
5  const formRef = useRef(null)
6
7  const sendFormData = async (event) => {
8    // this will prevent your form to redirect to another page.
9    event.preventDefault();
10
11    if(!formRef.current){
12      console.log('something wrong with form ref')
13      return
14    }
15
16    // get our form data
17    const formData = new FormData(formRef.current)
18
19    // add some additional data if you want
20    // formData.append('language', window.navigator.language)
21
22    fetch('https://formcarry.com/s/{Your-Unique-Endpoint}', {
23      method: 'POST',
24      body: formData,
25      headers: {
26				// you don't have to set Content-Type
27				// otherwise it won't work due to boundary!
28        Accept: 'application/json'
29      }
30    })
31    // convert response to json
32    .then(r => r.json())
33    .then(res => {
34      console.log(res);
35    });
36  }
37
38  return (
39	// bind formRef to our form element
40    <form ref={formRef} onSubmit={sendFormData}>
41      <label htmlFor="nameInput">Name</label>
42      <input type="text" id="nameInput" name="name" />
43
44      <label htmlFor="messageInput">Message</label>
45      <textarea id="messageInput" name="message"></textarea>
46
47      <label htmlFor="pictureInput">Picture</label>
48      <input type="file" id="pictureInput" name="picture" />
49
50      <button type="submit">Submit</button>
51    </form>
52  )
53}
54
55export default Form
Copied example to clipboard 👏

This updated form component uses the useState hook to create a state object for the form fields, the onChange event handler to update the state when the form fields change, and fetch API to send a POST request to the Formcarry endpoint when the form is submitted.

With these steps, you now know how to create a form in React and process the form data using Formcarry. You can use these skills to build more complex forms and improve the user experience of your web applications

Make sure to check out other things that you can do with formcarry:

INSTALLATION

How to setup React form

1

Sign up to formcarry to create your first form then copy your endpoint

Steps to create first form

You can follow the steps like in the video above 👆
Save your endpoint to somewhere, you are going to use it in 3rd step.

2

Copy the example code.

Copy example code

If you are in rush and want to quickly test it, consider using CodeSandbox to quickly test the code.

3

Paste the code and replace the endpoint that you got in 1st step.

Paste your code inside your project.

Take the endpoint that you got from 1st step then replace the test endpoint inside the example code with your endpoint.

4

Collect submissions ✨

Now you are ready to collect submissions from your React form.

Collect Submissions!

Check out our documentations for more information.

FREE FORM GENERATOR

Need templates?
Say less.

User our free form generator to kickstart your form, customize based on your needings, choose your form and get your fully-working form code.

Free form templates
Setting email notifications

EMAIL NOTIFICATIONS

Set email notifications for your form

Get an email from formcarry whenever you receive a new submission, add your own HTML template, use it with our smart tags

THANK YOU!

Use our customizable thank you pages

Formcarry offers 3 different customizable thank you pages that you can customize based on your brand image. Available on all plans.

Customizable thank you pages

FORMCARRY BLOG

Useful to read

:)
:)
:)
:)

LET'S GET STARTED!

Hassle Free Forms

Create an account and start collecting submissions

for your HTML forms, it only takes 2 minutes to setup your form

formcarry dashboard.
Blur
Your email address|
Copied example to clipboard 👏