0
votes

Error on console- POST http://formspree.io/[email protected] 400 (BAD REQUEST) send @ jquery.min.js:4

I'm unable to submit forms using Formspree. The error shows:

Failed to load resource: the server responded with a status of 400 (BAD REQUEST)

I tried changing the URL to https://formspree.io/[email protected]. I have been facing this issue over the last 10 days and had no issues prior to that. This was tested on Google chrome version 64. Can someone help me on this.

1
Please show us your code, as your question in its current form is too broad. - Lajos Arpad
Fixed error quotes - Hunter Turner

1 Answers

0
votes

Unfortunately, AJAX submissions are now reserved for Gold users on Formspree.

To get around this, you can create a <form> element and programatically submit it, like so:

function submitForm(name, email, message){
    var destinationEmail = "[email protected]";
    var form = document.createElement('form');
    form.setAttribute("action", "https://formspree.io/" + destinationEmail)
    form.setAttribute("method", "POST")

    // Subject for your email
    var field = document.createElement("input");
    field.setAttribute("type", "hidden");
    field.setAttribute("name", "_subject");
    field.setAttribute("value", "Contact form submitted");
    form.appendChild(field);

    // Contact email address        
    field = document.createElement("input");
    field.setAttribute("type", "hidden");
    field.setAttribute("name", "email");
    field.setAttribute("value", email);
    form.appendChild(field);

    // Your user's name
    field = document.createElement("input");              
    field.setAttribute("type", "hidden");
    field.setAttribute("name", "name");
    field.setAttribute("value", name);
    form.appendChild(field);

    // The text message
    field = document.createElement("input");              
    field.setAttribute("type", "hidden");
    field.setAttribute("name", "message");
    field.setAttribute("value", message);
    form.appendChild(field);

    document.body.appendChild(form);    
    form.submit();
}

submitForm("Your user's name", "[email protected]", "Here is my message");

The downside is that your email address will be displayed on the address bar, and the browser will show a captcha before continuing.

However, I've found that after several submissions the Rest API actually starts to work fine.

Hope it helps