Making Request Using jQuery

Using AJAX

You can send your form data with AJAX to get more control on your own, here's an sample code block you can use:

Paste this code before the </body> tag

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(function(){
    $(".ajaxForm").submit(function(e){
        e.preventDefault();
        var href = $(this).attr("action");
        $.ajax({
            type: "POST",
            dataType: "json",
            url: href,
            data: $(this).serialize(),
            success: function(response){
                if(response.status == "success"){
                    alert("We received your submission, thank you!");
                }else{
                    alert("An error occured: " + response.message);
                }
            }
        });
    });
});
</script>

Note: dataType: "json" is required to get JSON response from Formcarry, it basically sets Accept Http Header to application/json

Then give your form ajaxForm class

<form class="ajaxForm" action="https://formcarry.com/s/{Your Form ID}" method="POST">
	<input type="email" name="email">
	<input type="submit" value="Send">
</form>

That's all, you can customize Javascript code to perform your own actions

Setting Response Format

If you want to get response in JSON format you have to set Accept Http Header to application/json

Uploading Files With AJAX

Usually you can't upload files with AJAX, but there's a trick works on modern browsers but some of old browsers (like IE) doesn't support this method.

Paste this code before the </body> tag

<script>
$(function(){
    $(".ajaxForm").submit(function(e){
        e.preventDefault();
        var href = $(this).attr("action");
        $.ajax({
            type: "POST",
            url: href,
            data: new FormData(this),
            dataType: "json",
            processData: false,
            contentType: false,
            success: function(response){
                if(response.status == "success"){
                    alert("We received your submission, thank you!");
                }else{
                    alert("An error occured.");
                }
            }
        });
    });
});
</script>

Add ajaxForm class and enctype="multipart/formdata" to your form

<form class="ajaxForm" action="https://formcarry.com/s/{Your Form ID}" method="POST" accept-charset="UTF-8" enctype="multipart/form-data">

Then add your file input:

<form class="ajaxForm" action="https://formcarry.com/s/{Your Form ID}" method="POST" accept-charset="UTF-8" enctype="multipart/form-data">
	<input type="file" name="picture">
	<input type="submit" value="Send">
</form>

Now you're ready to go 💅