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: