How to get around the FormSpree redirect?

I got my website over on the Github Pages Service. I’m trying to implement the FormSpree free contact form but after you submit the form, it redirects you to a different website. Something I’d like to avoid. So I looked it up on the internet and of course others wanted to get rid of it too (I omitted my email in the below picture).

This is the form I got above but it doesn’t actually work at all. It worked before I tried to fiddle with it though.

Here is what the form looks like by default from FormSpree:

<form action="//formspree.io/your@email.com"
      method="POST">
    <input type="text" name="name">
    <input type="email" name="_replyto">
    <input type="submit" value="Send">
</form>

Here is my version (which worked fine before I tried to get around the redirect)

<div class=modal-body style="background-color: #454545">
    <p>Please use the form below to contact us regarding feedback or any questions you may have!
        We will never use the information given below to spam you and we will never pass on your
        information to a 3rd party.</p>
    <p>As we are using <a target="_blank" href="http://formspree.io">FormSpree</a> for this form
    please consult their privacy policy for any questions regarding this matter.</p>
    <form id="contactform" method="POST">
        <div class="form-group">
            <div class="input-group">
                <span class="input-group-addon">Name</span>
                <input name="form-name-input" type="text" name="name" class="form-control" required>
            </div>
            <div class="input-group">
                <span class="input-group-addon">Email</span>
                <input name="form-email-input" type="email" name="_replyto" class="form-control" required>
            </div>
            <div class="input-group">
                <span class="input-group-addon">Subject</span>
                <input name="form-subject-input" type="text" name="subject" class="form-control" required>
            </div>
            <div class="input-group">
                <span class="input-group-addon">Description</span>
                <textarea name="form-description-input" name="description" class="form-control" rows="4" cols="60" required></textarea>
            </div>
            <input type="text" name="_gotcha" style="display:none" />
            <input class="btn btn-success" data-dismiss="modal" type="submit" id="form-submit-btn" value="Submit">
            <input type="hidden" name="_next" value="http://www.dynamicrealities.net" onclick="FormSentConfirmation()"/>
        </div>
        <script>
            var contactform =  document.getElementById('contactform');
            contactform.setAttribute('action', '//formspree.io/' + 'dynamicrealities@gmail.com');
        </script>
    </form>
</div>
<div class="modal-footer" style="background-color: #333333">
    <button class="btn btn-danger btn-bg" data-dismiss="modal" type="button" id="form-dismiss-btn" onclick="">Close</button>
</div>

And when I call _next I want it to execute the following alert:

function FormSentConfirmation() {
    alert('Thanks for the email, we'll be in touch promptly.');
}

When I press the Submit button, all that happens is that the form goes away but I don’t receive any emails. I’m probably just doing this wrong as I am fairly new still to HTML/JavaScript.

Answer

Follow their AJAX example at the bottom: https://formspree.io/

$("#sendMessage").on("click", function() {
    $.ajax({
        url: "//formspree.io/dynamicrealities@gmail.com", 
        method: "POST",
        data: {message: "hello!"},
        dataType: "json"
    });
});

Remember to include jQuery as well for this to work. Remove the:

var contactform =  document.getElementById('contactform');
contactform.setAttribute('action', '//formspree.io/' + 'dynamicrealities@gmail.com

and replace it with my code and change the selector. Or use $("form").on("submit"...

Here is my example, which sends you a mail and prompts an alert for the user: http://jsfiddle.net/228d4snb/

Do anything you’d like to do right before that return false;

Advertisement

Answer