My First Contact Form using PHP & JavaScript - No Page Redirect

Question

Writing my first website that uses a contact form. In researching this myself so far, I came across the following article that I've been following:

http://www.nfriedly.com/techblog/2009/11/how-to-build-a-spam-free-contact-forms-without-captchas/

So far, however, it's not working. I have the contact page uploaded to a shared hosting server that has PHP on it. What follows is the code I have so far.

Here is the relevant content within the *.html file to the form:

<form action="/submit.php" method="post">
    <span>Name</span>
    <br>
    <input id="name-text" type="text" name="name">
    <br>
    <span>Email</span>
    <br>
    <input id="email-text" type="text" name="email">
    <br>
    <span>Subject</span>
    <br>
    <input id="subject-text" type="text" name="subject">
    <br>
    <input id="antispam-text" type="text" name="url" style="display:none;">
    <span>Message</span>
    <br>
    <textarea id="message-text" name="message"></textarea>
    <br>
    <div class="form-submit">
        <input id="submit-button" class="menu" type="submit" value="Submit">
    </div>
    <br>
    <div class="form-submit">
        <span id="sent-status"></span>
    </div>
</form>

Here is the relevant content within the *.css file to the form:

input[type="text"], textarea {
    width: 90%;
    margin: 10px;
    font-size: var(--font-text4);
}
textarea {
    height: 90px;
}
#submit-button:hover {
    border-color: #7AC943;
}
.form-submit {
    text-align: center;
    margin:-20px;
}
#submit-button {
    background-color: transparent;
    width: 150px;
    border: var(--thin-border);
    color: var(--font-color);
    font-size: var(--font-text3);
}
#sent-status {
    margin: -10px;
    padding: 7px;
    visibility: hidden;
    background-color: #000000;
}

Here is the relevant content within the *.js file to the form:

document.getElementById('submit-button').addEventListener('click', function () {
    var formFilled = true;
    if (document.getElementById('name-text').value == '')
        formFilled = false;
    if (document.getElementById('email-text').value == '')
        formFilled = false;
    if (document.getElementById('subject-text').value == '')
        formFilled = false;
    if (document.getElementById('message-text').value == '')
        formFilled = false;
    document.getElementById('sent-status').style.visibility = 'visible';
    if (formFilled) {
        document.getElementById('sent-status').style.color = '#7AC943';
        document.getElementById('sent-status').innerText = 'Message Sent Successfully';
    }
    else {
        document.getElementById('sent-status').style.color = '#FF1D25';
        document.getElementById('sent-status').innerText = 'Contact Form Incomplete';
    }
});

Here is the entire contents of the submit.php file:

<?php
// If the URL field is empty...
if(isset($_POST['url']) && $_POST['url'] == ''){
    // then send the form to your email.
    mail('beta@email.com', 'Contact Form', print_r($_POST,true) );
}
// Else, let the spammer think that they got their message through.
?>

Here are the following technical issues that affect this contact form:

Filling out all fields of the form and clicking the Submit button, the browser then goes to the submit.php file and leaves the *.html file. I want the browser to stay on the *.html file the whole time and never load the submit.php file as if it were a webpage.
Clicking the Submit button, then checking the target email account I specified, nothing arrives in inbox nor spam. The email account otherwise sends/receives email messages just fine. In the submit.php code, you'll see I put beta@email.com which is not the actual target email. For this post, I'm keeping my actual email target address private.

Much appreciated for the assistance.

For your first question, it sounds like you want to look into something called AJAX. Currently your form is doing a standard form post to the PHP page, so it's fully expected to go to that page. With AJAX you would instead contact that page from within your JavaScript code. As you continue with your research, look for examples/tutorials for AJAX. For your second question, has your debugging confirmed that `mail()` is ever called in the first place? If so, your next step is here: https://stackoverflow.com/questions/24644436/php-mail-function-doesnt-complete-sending-of-e-mail — David, May 26 '18 at 11:04
Should read up on how html forms work and how to handle them server side — charlietfl, May 26 '18 at 11:58

score 0 · Accepted Answer · answered May 26 '18 at 20:24

You can use the Fetch API, first prevent the default action of the submit button then send the form information using fetch like this:

document.getElementById('submit-button').addEventListener('click', function (event) {
    event.preventDefault();

    var formFilled = true;
    if (document.getElementById('name-text').value == '')
        formFilled = false;
    if (document.getElementById('email-text').value == '')
        formFilled = false;
    if (document.getElementById('subject-text').value == '')
        formFilled = false;
    if (document.getElementById('message-text').value == '')
        formFilled = false;
    document.getElementById('sent-status').style.visibility = 'visible';
    if (formFilled) {
        const form = document.querySelector('form');
        const data = new FormData(form);

        fetch('/submit.php', {
            body: data,
            cache: 'no-cache',
            method: 'POST',
            mode: 'cors'
        })
        .then(res => res.text())
        .then(result => {
            if (result === 'ok') {
                document.getElementById('sent-status').style.color = '#7AC943';
                document.getElementById('sent-status').innerText = 'Message Sent Successfully';
            } else {
                //failed message here ...
            }
        });
    } else {
        document.getElementById('sent-status').style.color = '#FF1D25';
        document.getElementById('sent-status').innerText = 'Contact Form Incomplete';
    }
});

and make this change to the submit.php file:

<?php
if(isset($_POST['url']) && $_POST['url'] == ''){
    extract($_POST);
    mail('beta@email.com', 'Contact Form', $message);

   echo 'ok';
}

in the mail function, the third argument should be the message, extract the message from the $_POST array and feed it to the mail function

Thank You!! This solution is excellent, concise, and it works! I like this even better because it does not require AJAX. — Joel Meine, May 29 '18 at 10:35

score 0 · Answer 2 · answered May 27 '18 at 17:08

You can try by using jQuery AJAX. Here is a sample of code that can be helpful for you.

HTML

<form action="" method="post" id="myForm">
<span>Name</span>
<br>
<input id="name-text" type="text" name="name">
<br>
<span>Email</span>
<br>
<input id="email-text" type="text" name="email">
<br>
<span>Subject</span>
<br>
<input id="subject-text" type="text" name="subject">
<br>
<input id="antispam-text" type="text" name="url" style="display:none;">
<span>Message</span>
<br>
<textarea id="message-text" name="message"></textarea>
<br>
<div class="form-submit">
    <input id="submit-button" class="menu" type="submit" value="Submit">
</div>
<br>
<div class="form-submit">
    <span id="sent-status"></span>
</div>
</form>

Then in your js file put this code (I've skipped the validation process, but in your production code don't forget to do it!)

$(document).ready(function(){
    $('#myForm').on('submit',function(event){
    event.preventDefault();
    var data = $(this).serialize();
    $.ajax({
      type: 'POST',
      url: '/submit.php',
      data: data,
      success: function(response){
// do your code stuff here if all goes well
      },
      error: function(err){
// do your code stuff here in case of errors
      }
    });
  });
});

Thank you for your contribution. I tested your solution and it does work, but I like the proposed solution that was first posted to this thread better. Thank you anyways. — Joel Meine, May 29 '18 at 10:37

My First Contact Form using PHP & JavaScript - No Page Redirect

2 Answers2