Making Request Using Axios

Axios is an promise based HTTP client for the browser and node.js, it's lightweight and a common library for making HTTP requests. We are going to use the client side of Axios for this tutorial and show you how to make request to the your Formcarry form using Axios

Installing Axios

To install it we have 3 options:

Using NPM or Yarn

# Yarn
$ yarn add axios

# npm
$ npm install axios --save

Using Bower

$ bower install axios

Using with cdn

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

JSON Request Using Axios

Let's make a simple request

<script>
    axios.post('https://formcarry.com/s/YourFormID', {name: 'Alex', surname: 'Moran', email: '[email protected]'}, {headers: {'Accept': 'application/json'}})
        .then(function (response) {
            console.log(response);
        })
        .catch(function (error) {
            console.log(error);
    });
</script>

Output:

data: {code: 200, status: "success", title: "Thank You!", message: "We received your submission"}

To try it, just change the url to your forms url.

x-www-form-url-encoded Request Using Axios

When data is an object axios uses application/json by default.

let formData = {name: 'Alex', surname: 'Moran'};

const encodeForm = (data) => {
  return Object.keys(data)
      .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(data[key]))
      .join('&');
}

axios.post('https://formcarry.com/s/YourFormID', encodeForm(formData), {headers: {'Accept': 'application/json'}})
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
});

Output:

data: {code: 200, status: "success", title: "Thank You!", message: "We received your submission"}