On

If you want to collect feedback from visitors to your website, you can add a contact form to any HTML page, even on multiple pages. The page extension will always remain .html webpage file. However, a PHP file is required to process the form. The good news is that this PHP file will remain hidden from visitors. You can simply upload it to your root server, where it will securely handle form submissions and send emails in the background.


 

 

Step 1 : HTML and CSS Code for Contact Form

Now create a your contact page or feedback page, and from HTML Mode, paste the Code where you want to show the Contact Form.  


<form name="contact-form">
<p>Name</p>
<p><input class="Contact_Page_input" id="ContactForm1_contact-form-name" name="name" type="text" value="" /></p>

<p>Email *</p>
<p><input class="Contact_Page_input" id="ContactForm1_contact-form-email" name="email" type="text" value="" /></p>

<p>Message *</p>
<p><textarea class="Contact_Page_textarea" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea></p>

<p><input class="Contact_Page_button" id="ContactForm1_contact-form-submit" type="submit" value="Send" /></p>

<div style="text-align: left; width: 100%;">
<p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
<p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>
</div>
</form>

<style>
/* Contact_Page Class Start */

/* Common Styles */
.Contact_Page_textarea,
.Contact_Page_input,
.Contact_Page_select {
width: 100%;
appearance: none;
padding: 10px;
box-sizing: border-box;
margin: 0px;
}

/* Unique Styles */
.Contact_Page_textarea {
height: 200px;
text-align: justify;
overflow-x: hidden;
white-space: pre-wrap;
word-wrap: break-word;
padding: 10px;
}

.Contact_Page_input {
display: block;
}

.Contact_Page_textarea:focus,
.Contact_Page_input:focus,
.Contact_Page_select:focus {
transition: 0.1s;
outline: none;
}

.Contact_Page_button {
padding: 10;
cursor: pointer;
white-space: pre-wrap;
word-wrap: break-word;
margin: 5px;
}
</style>


If you don't use CSS, it will follow default stylesheet. But you can make it more beautiful. You just need little knowledge in CSS.




Step 2 : JavaScript Code for Contact Form

Now add this JavaScript code inside at the bottom of your webpage, just before the closing </body> tag. This ensures that the script loads after the HTML form is fully rendered.


<script>
document.querySelector('form[name="contact-form"]').addEventListener('submit', function(e) {
    e.preventDefault();
    let formData = new FormData(this);

    fetch('contact.php', {
        method: 'POST',
        body: formData
    })
    .then(response => response.text())
    .then(data => {
        if (data.trim() === "success") {
            document.getElementById('ContactForm1_contact-form-success-message').innerText = "Your message has been sent!";
            document.getElementById('ContactForm1_contact-form-error-message').innerText = "";
        } else {
            document.getElementById('ContactForm1_contact-form-error-message').innerText = "Oops! Something bad happened.";
            document.getElementById('ContactForm1_contact-form-success-message').innerText = "";
        }
    })
    .catch(error => console.error('Error:', error));
});
</script>


If you want the script to work across multiple pages without adding it to each page manually, you can:

  1. Save the JavaScript code in a separate file (e.g., contact.js).
  2. Include this <script> tag before the closing </body> tag of the HTML page like this:
<script src="contact.js"></script> 

This method is useful if you have multiple pages using the same form.




Step 3 : PHP Code for Contact Form

Here’s a contact.php file that you can upload to your root server. It will handle form submissions and send an email.


<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $name = isset($_POST['name']) ? strip_tags(trim($_POST['name'])) : '';
    $email = isset($_POST['email']) ? filter_var(trim($_POST['email']), FILTER_SANITIZE_EMAIL) : '';
    $message = isset($_POST['email-message']) ? strip_tags(trim($_POST['email-message'])) : '';

    if (empty($name) || empty($email) || empty($message) || !filter_var($email, FILTER_VALIDATE_EMAIL)) {
        echo "error";
        exit;
    }

    $to = "email@example.com"; // Change this to your actual email address
    $subject = "Email Feedback";
    $headers = "From: $name <$email>\r\n";
    $headers .= "Reply-To: $email\r\n";
    $headers .= "Content-Type: text/plain; charset=UTF-8\r\n";

    $body = "Name: $name\n";
    $body .= "Email: $email\n\n";
    $body .= "Message:\n$message\n";

    if (mail($to, $subject, $body, $headers)) {
        echo "success";
    } else {
        echo "error";
    }
}
?>


  • Save this as contact.php and upload it to your root server.
  • Update $to with your actual email address.