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> 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; } Don't forget to visit our blog for more related designs - https://www.codingnepalweb.com
Top comments (1)
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!