我使用PHP和JavaScript的第一个联系表单 - 无页面重定向

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:

1. 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.

2. 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.

Answer 1

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

Answer 2

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
      }
    });
  });
});