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

You can use Axios to collect form submissions with formcarry

Installing Axios

To install it we have 3 options:

Using NPM or Yarn

shell
# Yarn
$ yarn add axios
 
# npm
$ npm install axios --save

Using Bower

shell
bower install axios

Using CDN

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

Using JSON Content Type

Let's make a simple request

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

Output:

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

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

💡

Don’t set your Content-Type to application/json in axios headers, axios automatically does that and sometimes especially when you are uploading a file it causes problems.

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

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

javascript
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:

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