Formcarry.

React form example for formcarry

React is a javascript library for building user interfaces, in this tutorial we are going to craft an form and handle it using react.

You can use Formcarry in your React projects to collect submissions.

React

We are going to use create-react-app for our demo. It's pretty easy to create an react app with this cli.

$ npx create-react-app react-example
$ cd react-example
$ npm start

Let's install axios too, we will cover up this later.

# Yarn
$ yarn add axios

# npm
$ npm install axios --save

Filetree:

├── README.md
├── node_modules
├── package.json
└── public
	├── favicon.ico 
	├── index.html
	└── manifest.json
└── src
	├── App.css
	├── App.js
	├── App.test.js
	├── index.css
	├── index.js
	├── logo.svg
	└── registerServiceWorker.js

Let's change our App.js to Form.js, and other relevant files:

├── README.md
├── node_modules
├── package.json
└── public
	├── favicon.ico 
	├── index.html
	└── manifest.json
└── src
	├── Form.css
	├── Form.js
	├── Form.test.js
	├── index.css
	├── index.js
	├── logo.svg
	└── registerServiceWorker.js

Open our Form.js and add our first component:

import React from "react";

class Form extends React.Component {
  render() {
    return (
      <form onSubmit={this.handleForm}>
        <label htmlFor="name">Name</label>
        <input type="text" id="name" name="name" onChange={this.handleFields} />
        
        <label htmlFor="surname">Surname</label>
        <input type="text" id="surname" name="surname" onChange={this.handleFields} />

        <label htmlFor="email">Email</label>
        <input type="email" id="email" name="email" onChange={this.handleFields} />

        <label htmlFor="message">Your Message</label>
        <textarea name="message" id="message" onChange={this.handleFields}></textarea>

        <button type="submit">Send</button>
      </form>
    );
  }
}

export default Form;

Then change our index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Form from './Form'; //
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<Form />, document.getElementById('root'));
registerServiceWorker();

It renders perfectly

It's time to add some code to handle our fields

import React from "react";

class Form extends React.Component {
  constructor(props){
    super(props);
    this.state = {name: "", surname: "", email: "", message: ""};
  }

  handleFields = e => this.setState({ [e.target.name]: e.target.value });

  render() {
    return (
      <form>
        <label htmlFor="name">Name</label>
        <input type="text" id="name" name="name" onChange={this.handleFields} />
        
        <label htmlFor="surname">Surname</label>
        <input type="text" id="surname" name="surname" onChange={this.handleFields} />

        <label htmlFor="email">Email</label>
        <input type="email" id="email" name="email" onChange={this.handleFields} />

        <label htmlFor="message">Your Message</label>
        <textarea name="message" id="message" onChange={this.handleFields}></textarea>

        <button type="submit">Send</button>
      </form>
    );
  }
}

export default Form;

Now we have access to our fields, it's time to send request to formcarry, first import the Axios then submit our form.

import React from "react";
import axios from "axios"; // For making client request.


class Form extends React.Component {
  constructor(props){
    super(props);
    this.state = {name: "", surname: "", email: "", message: ""};
  }
  
  handleForm = e => {
    axios.post(
        "https://formcarry.com/s/yourFormId", 
        this.state, 
        {headers: {"Accept": "application/json"}}
      )
      .then(function (response) {
        
        // access response.data in order to check formcarry response
        if(response.data.success){
          // handle success
        } else {
          // handle error
          console.log(response.data.message);
        }

      })
      .catch(function (error) {
        console.log(error);
      });
    
    e.preventDefault();
  }

  handleFields = e => this.setState({ [e.target.name]: e.target.value });

  render() {
    return (
      <form onSubmit={this.handleForm}>
        <label htmlFor="name">Name</label>
        <input type="text" id="name" name="name" onChange={this.handleFields} />
        
        <label htmlFor="surname">Surname</label>
        <input type="text" id="surname" name="surname" onChange={this.handleFields} />

        <label htmlFor="email">Email</label>
        <input type="email" id="email" name="email" onChange={this.handleFields} />

        <label htmlFor="message">Your Message</label>
        <textarea name="message" id="message" onChange={this.handleFields}></textarea>

        <button type="submit">Send</button>
      </form>
    );
  }
}

export default Form;

We have successfully crafted a working form in React 🍹