How to send form data using Formcarry.js

Formcarry.js is the most user friendly way to process an HTML form with formcarry. it's just 3.7KB (gzipped) 👌

Installation

Use our CDN to get started quickly

Put this code right before the </body> tag in your page:


<script src="https://carrier.formcarry.com/js/v1.js"></script>

Now let's say we have an form like this:


<form>
  <label for="name">Name</label>
  <input type="text" id="name"/>

  <label for="surname">Surname</label>
  <input type="text" id="surname"/>

  <label for="email">Email</label>
  <input type="email" id="email"/>

  <label for="message">Your Message</label>
  <textarea id="message"></textarea>

  <button type="submit">Send</button>
</form>

We need an unique identifier for our form tag, we can give an ID for that purpose:


<form id="my-sweet-form">
...

Now also we need to define name attribute for our input elements, with that formcarry can use this name to save them.


<form id="my-sweet-form">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" />

  <label for="surname">Surname</label>
  <input type="text" id="surname" name="surname" />

  <label for="email">Email</label>
  <input type="email" id="email" name="email" />

  <label for="message">Your Message</label>
  <textarea id="message" name="message"></textarea>

  <button type="submit">Send</button>
</form>

Now we can initialize formcarry.js, put this code after the script we've added in the beginning.


<script src="https://carrier.formcarry.com/js/v1.js"></script>
<script>
  formcarry({
    // replace this "you-form-id-in-formcarry" with your form id that you can get it from the dashboard.
    form: "your-form-id-in-formcarry",
    // id or class name of the form element, only form element allowed
    // works with css selectors
    // # <= for id
    // . <= for class
    element: "#my-sweet-form",
    // Success callback, you can show alert messages
    // or redirect the user in this function
    onSuccess: function(response){
      alert(response)
    },
    // Error callback, a good place to show errors 🗿
    onError: function(error){
      alert(error)
    }
  });
</script>

Congratz 🍬 that's it!

Things to keep in mind 🧠

1- You should replace the your-form-id-in-formcarry with the ID you can get from the dash, inside your form's configure tab

2- You need to add type="submit" to your submit button, otherwise formcarry can't detect the submit event.

Advanced Configuration

Well yes, now we have an working form but we assume it's not enough for you? right, let us guide you along the way 🧙‍♀️

Redirecting The User to Another Page After a Successful Submit

Easy peasy! formcarry.js has an success callback, we can use this to achieve that! For the redirection, we are going to use Window API, specifically window.location.href


<script>
  formcarry({
    form: "your-form-id-in-formcarry",
    element: "#my-sweet-form",
    // Success callback, you can show alert messages
    // or redirect the user in this function
    onSuccess: function(response){
	// redirect the user to your thank you page after a successful form submit.
	// replace the URL with your thank you page,
	// Don't forget to add http:// or https:// before the URL.
	window.location.href = "https://my-thank.you/page";
    },
    // Error callback, a good place to show errors 🗿
    onError: function(error){
      alert(error)
    }
  });
</script>

That's it 🍬

Uploading Files

First we need to add enctype="multipart/form-data" to our form element


<form enctype="multipart/form-data">
...

Then we should add an file input


<form enctype="multipart/form-data">
  ...
  <input type="file" name="picture" />
  ...

That's it 🍬