Contact Page | With Sending Emails PHP - Using PHPMalier - PHP & Javascript | Coding Snow | Creative Web Design Tutorials

Description

Watch Part-01Responsive Contact Page UI Design - https://youtu.be/8kTPtrz7PiU

In this tutorial, you can learn how to develop a PHP contact page (contact form) to send emails (messages) using PHPMailer. This email sending contact page is tested on both localhost and Live Host Server and It's 100% Working.

If you getting any error alert like below when you run this on a live host server. There can be multiple reasons for that. If you are running this on a live host, you have to use the necessary settings in your host service. Because the settings of the host services are different from one to another. Read this.

"SMTP Error: Could not authenticate."
"SMTP Error: Could Not Connect to SMTP Host"

If you get these errors when you try on a live host. This might be helpful.

In your host > go to cpanel > Email Accounts > Webmail > Configure Mail Client

Then you can find Secure SSL/TLS Settings (Recommended).
From that settings use settings below.

● Username (Web Email Address)
● Password (Web email Password)
● Outgoing Server
Host can be yourdomain.com / mail.yourdomain.com
SMTP Port: Can be 465/587

*you can use a Gmail or any email address to receive emails.

After you change codings it can be look like below.

$mail->isSMTP();
$mail->Host = 'yourdomain.com'; // Can be mail.yourdomain.com
$mail->SMTPAuth = true;
$mail->Username = 'webmail@domain.com'; // Your host email account which you want to use as SMTP server
$mail->Password = 'host email password'; // host email account password
$mail->SMTPSecure = 'ssl'; // Can be tls
$mail->Port = 465; // Can be 587

$mail->setFrom('webmail@domain.com'); // Your host email account which you used as SMTP server
$mail->addAddress('youranyemail@email.com'); // Email Address where you want to receive emails (You can use any other email address to receive emails)

Source Codes

index.php

<?php include 'sendemail.php'; ?>

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Contact Form</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
  </head>
  <body>

<?php echo $alert; ?>

<div class="contact-section">
      <div class="contact-info">
        <div><i class="fas fa-map-marker-alt"></i>Address, City, Country</div>
        <div><i class="fas fa-envelope"></i>contact@email.com</div>
        <div><i class="fas fa-phone"></i>+00 0000 000 000</div>
        <div><i class="fas fa-clock"></i>Mon - Fri 8:00 AM to 5:00 PM</div>
      </div>
      <div class="contact-form">
        <h2>Contact Us</h2>
        <form class="contact" action="" method="post">
          <input type="text" name="name" class="text-box" placeholder="Your Name" required>
          <input type="email" name="email" class="text-box" placeholder="Your Email" required>
          <textarea name="message" rows="5" placeholder="Your Message" required><textarea>
          <input type="submit" name="submit" class="send-btn" value="Send">
        </form>
      </div>
    </div>

</body>
</html>

style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body{
  min-height: 100vh;
  background: url(background.jpg) no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-section{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-info{
  color: #fff;
  max-width: 500px;
  line-height: 65px;
  padding-left: 50px;
  font-size: 18px;
}

.contact-info i{
  margin-right: 20px;
  font-size: 25px;
}

.contact-form{
  max-width: 700px;
  margin-right: 50px;
}

.contact-info, .contact-form{
  flex: 1;
}

.contact-form h2{
  color: #fff;
  text-align: center;
  font-size: 35px;
  text-transform: uppercase;
  margin-bottom: 30px;
}

.contact-form .text-box{
  background: #000;
  color: #fff;
  border: none;
  width: calc(50% - 10px);
  height: 50px;
  padding: 12px;
  font-size: 15px;
  border-radius: 5px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  opacity: 0.9;
}

.contact-form .text-box:first-child{
  margin-right: 15px;
}

.contact-form textarea{
  background: #000;
  color: #fff;
  border: none;
  width: 100%;
  padding: 12px;
  font-size: 15px;
  min-height: 200px;
  max-height: 400px;
  resize: vertical;
  border-radius: 5px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  opacity: 0.9;
}

.contact-form .send-btn{
  float: right;
  background: #2E94E3;
  color: #fff;
  border: none;
  width: 120px;
  height: 40px;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
  transition-property: background;
}

.contact-form .send-btn:hover{
  background: #0582E3;
}

@media screen and (max-width: 950px){
  .contact-section{
    flex-direction: column;
  }

.contact-info, .contact-form{
    margin: 30px 50px;
  }

.contact-form h2{
    font-size: 30px;
  }

.contact-form .text-box{
    width: 100%;
  }
}

/*css for alert messages*/

.alert-success{
  z-index: 1;
  background: #D4EDDA;
  font-size: 18px;
  padding: 20px 40px;
  min-width: 420px;
  position: fixed;
  right: 0;
  top: 10px;
  border-left: 8px solid #3AD66E;
  border-radius: 4px;
}

.alert-error{
  z-index: 1;
  background: #FFF3CD;
  font-size: 18px;
  padding: 20px 40px;
  min-width: 420px;
  position: fixed;
  right: 0;
  top: 10px;
  border-left: 8px solid #FFA502;
  border-radius: 4px;
}

sendemail.php

<?php
use PHPMailer\PHPMailer\PHPMailer;

require_once 'phpmailer/Exception.php';
require_once 'phpmailer/PHPMailer.php';
require_once 'phpmailer/SMTP.php';

$mail = new PHPMailer(true);

$alert = '';

if(isset($_POST['submit'])){
  $name = $_POST['name'];
  $email = $_POST['email'];
  $message = $_POST['message'];

try{
    $mail->isSMTP();
    $mail->Host = 'smtp.gmail.com';
    $mail->SMTPAuth = true;
    $mail->Username = 'youremail@gmail.com'; // Gmail address which you want to use as SMTP server
    $mail->Password = 'youremailpassword'; // Gmail address Password
    $mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS;
    $mail->Port = '587';

$mail->setFrom('youremail@gmail.com'); // Gmail address which you used as SMTP server
    $mail->addAddress('youranyemail@gmail.com'); // Email address where you want to receive emails (you can use any of your gmail address including the gmail address which you used as SMTP server)

$mail->isHTML(true);
    $mail->Subject = 'Message Received (Contact Page)';
    $mail->Body = "<h3>Name : $name <br>Email: $email <br>Message : $message</h3>";

$mail->send();
    $alert = '<div class="alert-success">
                 <span>Message Sent! Thank you for contacting us.</span>
                </div>';
  } catch (Exception $e){
    $alert = '<div class="alert-error">
                <span>'.$e->getMessage().'</span>
              </div>';
  }
}
?>

Download Source Files

If the download didn't start automatically, click here.

We only allow you to publish relevant and respectful comments. Vulgar, hateful, or spam comments will be removed.

UnknownJanuary 28, 2021 at 6:23 AM
Nice, But I get confuse how to get the code into my own php custom email sender
UnknownApril 7, 2021 at 9:32 PM
SMTP connect() failed. https://github.com/PHPMailer/PHPMailer/wiki/Troubleshooting
i am geting this error when i upload on server and submit the form
UnknownApril 19, 2021 at 12:50 PM
504 Gateway Time-out whats the reson behind this, give me quick answer
UnknownMay 12, 2021 at 12:09 AM
Thank you so much working absolutely fine first got error of Authenticate issue when i allowed https://myaccount.google.com/lesssecureapps?pli=1&rapt=AEjHL4N3OX7HfyUt9W70HD_s2fCJeM8hOQHnSeaUt9W1TdjEpoqePrbbSyh2RhGZL5Dvq_bj1tl242EjppKVfFHqyiR4QHFR3g Less secure apps Link On then completed the task thank you so much
MohanMay 27, 2021 at 5:59 AM
How to fix this Maximum execution time of 120 seconds exceeded in C:\xampp\htdocs\my_project\phpmailer\SMTP.php on line 1227

Wednesday, January 13, 2021

Contact Page | With Sending Emails PHP - Using PHPMalier - PHP & Javascript

Description

Source Codes

index.php

style.css

sendemail.php

Featured Post

Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript

Popular Posts

Tags

Contact Form

Wednesday, January 13, 2021

Contact Page | With Sending Emails PHP - Using PHPMalier - PHP & Javascript

Description

Source Codes

index.php

style.css

sendemail.php

Follow Us on

Featured Post

Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript

Popular Posts

Tags

Contact Form