FORMCARRY EXAMPLES
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
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 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.
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.
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 CodeCopy 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.
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 CodeCopy 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:
Sign up to formcarry to create your first form then copy your endpoint
You can follow the steps like in the video above 👆
Save your endpoint to somewhere, you are going to use it in 3rd step.
Copy the example code.
If you are in rush and want to quickly test it, consider using CodeSandbox to quickly test the code.
Paste the code and replace the endpoint that you got in 1st step.
Take the endpoint that you got from 1st step then replace the test endpoint inside the example code with your endpoint.
Collect submissions ✨
Now you are ready to collect submissions from your React form.
Check out our documentations for more information.
User our free form generator to kickstart your form, customize based on your needings, choose your form and get your fully-working form code.
Create an account and start collecting submissions
for your HTML forms, it only takes 2 minutes to setup your form
Built with ❤ love.
Product
Form Generator
formcarry. all rights reserved