DEV Community

Cover image for How to Send Mail using XAMPP Server with PHP
CodingNepal
CodingNepal

Posted on

How to Send Mail using XAMPP Server with PHP

Hello readers, Today in this blog you'll learn how to Send Emails with PHP & Gmail | Send Mail from Localhost using XAMPP Server. Earlier I have shared a blog on How to configure XAMPP to send Mail from Localhost in PHP? If you haven't still read that blog, I want to suggest you read that blog first.

Generally, in this program, on the webpage, there is a mail send the form with three inputs - email address, subject, and message. When you click on the send button without filling the form completely, there is a display of an alert labeled as "All input fields are required!". And when you filled up all inputs and click on the send button, your mail will be sent to a particular email address that you've provided in the recipient field and there is also display a success message labeled as "Your mail sent successfully to someone email".

If somehow mail can't be sent, there is a display of an alert labeled as "Sorry, failed while sending mail!". If you're feeling difficult to understand what I am saying.

You can copy the codes from the given boxes or download the code files from the given link but I recommend you to download the source code files instead of copying codes. Click here to download code files.

You might like this:

Password Show/Hide Toggle Button
Animated Login & Signup Form Design
Login & Signup Form with Email Verification
Configure XAMPP to send Mail from Localhost

PHP CODE:
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Send Mail From Localhost | CodingNepal</title>
    <link rel="stylesheet" href="style.css">
    <!-- bootstrap cdn link -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4 offset-md-4 mail-form">
                <h2 class="text-center">
Send Message</h2>
<p class="text-center">
Send mail to anyone from localhost.</p>
<!-- starting php code -->
                <?php
                    //first we leave this input field blank
                    $recipient = "";
                    //if user click the send button
                    if(isset($_POST['send'])){
                        //access user entered data
                       $recipient = $_POST['email'];
                       $subject = $_POST['subject'];
                       $message = $_POST['message'];
                       $sender = "From: shahiprem7890@gmail.com";
                       //if user leave empty field among one of them
                       if(empty($recipient) || empty($subject) || empty($message)){
                           ?>
                           <!-- display an alert message if one of them field is empty -->
                            <div class="alert alert-danger text-center">
                                <?php echo "All inputs are required!" ?>
                            </div>
<?php
                        }else{
                            // PHP function to send mail
                           if(mail($recipient, $subject, $message, $sender)){
                            ?>
                            <!-- display a success message if once mail sent sucessfully -->
                            <div class="alert alert-success text-center">
                                <?php echo "Your mail successfully sent to $recipient"?>
                            </div>
<?php
                           $recipient = "";
                           }else{
                            ?>
                            <!-- display an alert message if somehow mail can't be sent -->
                            <div class="alert alert-danger text-center">
                                <?php echo "Failed while sending your mail!" ?>
                            </div>
<?php
                           }
                       }
                    }
                ?> <!-- end of php code -->
                <form action="mail.php" method="POST">
                    <div class="form-group">
                        <input class="form-control" name="email" type="email" placeholder="Recipients" value="<?php echo $recipient ?>">
                    </div>
<div class="form-group">
                        <input class="form-control" name="subject" type="text" placeholder="Subject">
                    </div>
<div class="form-group">
                        <textarea cols="30" rows="5" class="form-control textarea" name="message" placeholder="Compose your message.."></textarea>
                    </div>
<div class="form-group">
                        <input class="form-control button btn-primary" type="submit" name="send" value="Send" placeholder="Subject">
                    </div>
</form>
</div>
</div>
</div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode
CSS CODE:
/* custom css styling */
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
html,body{
    background: #007bff;
}
::selection{
    color: #fff;
    background: #007bff;
}
.container{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Poppins', sans-serif;
}
.container .mail-form{
    background: #fff;
    padding: 25px 35px;
    border-radius: 5px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 
                0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.container form .form-control{
    height: 43px;
    font-size: 15px;
}
.container .mail-form form .form-group .button{
    font-size: 17px!important;
}
.container form .textarea{
    height: 100px;
    resize: none;
}
.container .mail-form h2{
    font-size: 30px;
    font-weight: 600;
}
.container .mail-form p{
    font-size: 14px;
}
Enter fullscreen mode Exit fullscreen mode

Don't forget to visit our blog for more related designs - https://www.codingnepalweb.com

Top comments (1)

Collapse
 
indusschoolb profile image
Shantanu Jana

Great tutorial! I appreciate how you broke down each step, making it easy to follow. The explanation of form validation is especially helpful, as it ensures user inputs are correct before submission. I am a student of IB Schools in Bangalore. Would love to see more examples like this for other types of elements. Keep up the good work!