Submitting a contact form with sent status on the same page

Question

I am building a portfolio website and in the contact form, I want a success/fail response after submission. I prefer to stay on the same page whilst this process.

I tried other solutions that were in other pages related to this topic but I could not understand why they did not work for me. Since I am a newbie, I will appreciate a crystal clear explanation. Thanks a lot!

I tried the solution under this topic: Submit contact form with success/fail alert on same page

MY CURRENT HTML CODE IS;

<form id="contact-form" method="post" action="contact.php" role="form" enctype="text/plain">
                        <div class="messages"></div>
                        <div class="controls">
                            <div class="form-group">
                                <input id="form_name" type="text" name="name" class="form-control" placeholder="Name *" required="required" data-error="name is required.">
                                <div class="help-block with-errors"></div>
                            </div>
                            <div class="form-group">
                                <input id="form_email" type="email" name="email" class="form-control" placeholder="E-mail *" required="required" data-error="Valid email is required.">
                                <div class="help-block with-errors"></div>
                            </div>
                            <div class="form-group">
                                <input id="form_subject" type="text" name="subject" class="form-control" placeholder="Subject">
                                <div class="help-block with-errors"></div>
                            </div>
                            <div class="form-group">
                                <textarea id="form_message" name="message" class="form-control" placeholder="Message for me *" rows="4" required="required" data-error="send a message."></textarea>
                                <div class="help-block with-errors"></div>
                            </div>
                            <input type="submit" name="submit" class="btn btn-send float-" value="Send message">
                            <p class="text-muted"><strong>*</strong> These fields are required.</p>
                        </div>
                        <div class="clearfix"></div>
                    </form>

I expect to see confirmation or fail report on the same page after submitting the form. It can be anywhere on the page. I just want the visitor to know that I received their message or could not.

Don't submit the form, but use `XMLHttpRequest` to check against your PHP file. — Jack Bashford, Mar 26 '19 at 23:13
I will take a look at how it works, Jack. Thanks for the quick info. — Nadir Pamuk, Mar 26 '19 at 23:17
I will check out AJAX too. I saw it as a solution before but could not understand how it worked. Let me focus on it. www.nadirpamuk.com is the website I am building by the way. I would appreciate it if you check it out. :) — Nadir Pamuk, Mar 26 '19 at 23:23
By the way, AJAX and XmlHttpRequest are just different names for the same technology. Basically it just let's you make a HTTP request to the server, and receive a response, from the JavaScript code within your page, without leaving the page. (By contrast, the normal way a browser makes a http request is when you click a link, type a URL or submit a form, and this always causes a full refresh of the page, destroying anything that was there before.) — ADyson, Mar 26 '19 at 23:25

Grzegorz Miśkiewicz · Accepted Answer · 2019-03-27T00:15:18.313

Simple example jQuery version:

$("#contact-form").submit(function() {
    var name = $("#form_name").val();
    var email = $("#form_email").val();
    // ...other fields
    // and validation if empty or e-mail is valid etc.
    // if validation fails just return false;

    if( !name ) {
        // here You can send message or activate help-block
        return false;
    }

    // if everything correct use for example ajax from jquery
    $.ajax({
        url: '/url/to/receiver',
        type: 'post',
        data: { name: name, .... },
        dataType: 'jsonp',
        success: function( r ) {
            if( r.success ) {
                // message and pass form validation 
                // clear fields, or hide contact form
            }

            if( r.error ) {
                // show error
            }
        }
    });

    return false;
});

Remember to return from server JSON like { success: true } or { error: true, msg: "message why fails" }.

But it will be much better, when You will change input type=submit to button, and then make:

$("#contact-form .class-of-input-button").off().on('click', function() { /* rest of the code */ });

Don't you need a `data` field for the actual formdata in your ajax request? — xDreamCoding, Mar 27 '19 at 00:09

Submitting a contact form with sent status on the same page

1 Answers1