DEV Community

Cover image for Working Contact Form using PHP
Hassan Ali
Hassan Ali

Posted on • Originally published at hassanrao.com on

Working Contact Form using PHP

This article will teach you how to develop a working contact form in PHP. I’ll utilise HTML, CSS, and PHP to develop a functional contact form. When clicking the submit button, the Contact form will transmit the filled-in data to the email address specified in the code. A Contact Form is an important element on a page that allows users to interact with the website owner. This contact form has some input areas for entering your name, email address, and message, among other things. You can add or remove fields as needed for your site. As you can see in the image, there is a contact form with a heading, input fields, and button.

The Contact form with PHP code is a back-end form that collects user input from a website and sends it to an email address. The code was built in PHP, a popular programming language for web development. The form captures the user’s name, email, and message and sends it to a provided email address. PHP’s mail() function is used to send the email.

In PHP, the mail() function is used to deliver the email to the addressee. If the email is sent successfully, the user is sent to the website’s homepage and a success message is displayed. If there is an issue in sending the email, the user is returned to the website’s homepage and an error notice is displayed.

Moreover, the Contact form may be easily customised to match the theme or design of the website. It may be created with various layouts, colours/colors, and fonts to complement the style of the website. Moreover, the PHP code may be altered to incorporate extra fields such as a phone number, address, or website URL.

Source Code :

This project’s Contact Form is built in PHP. To begin, you must generate three files: Two PHP Files and One CSS(in css/ folder) file. Just copy and paste the following codes into your file after you’ve created these files. You can also get the source code files for this Contact Form in PHP by clicking the download button.

Step One: create an PHP file with the name of index.php and paste the given codes into your PHP file. Remember, you’ve to create a file with .php extension.

<!DOCTYPE html>
<html lang="en">
  <!-- By HassanRao - hassanrao.com -->

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> PHP Contact Form BY HASSAN RAO| HassanRao.com </title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="main">
        <div class="contact-form">
            <h2>Get In Touch</h2>
            <p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content.</p>
            <form action="formsubmit.php" method="POST">
                <input type="text" name="name" placeholder="Enter Your Name" required><br>
                <input type="email" name="email" placeholder="Enter Your Email" required><br>
                <textarea name="message" placeholder="Enter Message" required></textarea><br>
                <button type="submit" name="submit">Send</button>
            </form>
        </div>
    </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Step Two: create a CSS file with the name of style.css in css/ folder and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}
.main{
    width: 100%;
    height:100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #3b6deb;
}
.main .contact-form{
    width: 80%;
    height: auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 6px;
}
.main .contact-form h2{
    font-size: 25px;
    color: #3b6deb;
}
.main .contact-form p{
    color: #222333;
    font-size: 14px;
}
.main .contact-form form{
    margin-top: 10px;
}
.main .contact-form form input,.main .contact-form form textarea{
    width: 98%;
    height: 45px;
    padding: 7px;
    border-radius: 5px;
    background-color: rgb(241, 241, 241);
    border: none;
    outline: none;
    margin: 10px;
    color: #555;
}
.main .contact-form form textarea{
    max-height: 90px;
    min-height: 90px;
    max-width: 98%;
    min-width: 98%;
}
.main .contact-form form button{
    padding: 8px 15px;
    border-radius: 4px;
    outline: none;
    border: none;
    background-color: #3b6deb;
    color: #fff;
    font-size: 17px;
    cursor: pointer;
    margin-left: 10px;
    transition: 0.4s all ease-out;
}
.main .contact-form form button:hover{
    background-color: #235ceb;
}
@media (max-width:500px) {
    .main .contact-form form{
        margin-left: -10px;
    }
}
Enter fullscreen mode Exit fullscreen mode

Before now, you could call this an HTML CSS contact form by deleting the action and method attributes from the form tag.

Last Step: Create a PHP file called formsubmit.php and paste the following lines into it. You must create a file with the extension.php. Remember to include the email address in the $to variable where you wish to receive all messages after copying and pasting these PHP scripts. You must also establish an email with the sender email address (mail@youwebsite.com).

<?php
if (isset($_POST['name'])) {
    $name = $_POST['name'];
    $email = $_POST['email'];
    $msg = $_POST['message'];

    $to = "receivingEmail@anydomain.com";//Write Here Your Email Where You Want to Recieve user filled data.
    $headers = "From: mail@yourwebsite.com";//Write that email where from the emails will be send.
    $subject = $name." Just Filled your Contact Form";
    $message = "Name: \t".$name."\n";//Sometimes the \n don't work you can replace it with <br>.
    $message.= "Email: \t".$email."\n";//In my case the \n not wokring on localhost but wokring on actual server.
    $message.= "Message: \t".$msg;


    $send = mail($to, $subject, $message, $headers);

    if($send){
    ?>
    <script>alert("Message Sent Successfully.");window.location.href='index.php';</script>
    <?php
    }else{
    ?>
    <script>alert("ERROR While Sending A Message Please Try to Contact Us Manually.");window.location.href='index.php';</script>
    <?php
    }
}else{
    header('location:index.php');
}

?>
Enter fullscreen mode Exit fullscreen mode

In conclusion, the Contact form using PHP code is a great tool for any website that wants to contact with its consumers or clients. It allows for the safe and effective receipt of comments and criticism without disclosing the website owner’s email address. The Contact form is an essential component of every modern website due to its easy coding and customizability.

View This Post On Hassanrao.com for free source Files download Link.

Top comments (0)