15th, September, 2020
0K
In every website we need a contact form so that the website viewers can visit those and contact with you if they need. And in this case we need to create a Contact form. We can create it by HTML and also can design it by our self. But we can’t make it dynamic if we need. because we feel it’s too tough. But turst me it’s not too much tough here we need to first of all use HTML5 and CSS3 to design the contact form then we use PHP to make it dynamic. Let me demonstrate the whole code step by setp.
Step-1:
Create the contact form in an .html file like conatct-us.html and under this we will make a contact form.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>contact Us</title> <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet"> <style type="text/css"> * {margin: 0; padding: 0;} body {width: : 100vw; height: 100vh; position: relative; } .contactUs {min-width: 500px; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .contactUs h1 {font-size: 40px; text-align: center; margin-bottom: 10px; font-family: 'Open Sans', sans-serif; } .inputer {width: : 100%; height: 50px; overflow: hidden; margin-bottom: 10px; } .inputer.message {height: 150px;} .inputer label {width: 125px; height: 100%; float: left; background: #202020; color: #fff; font-size: 25px; position: relative; } .inputer label p {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: 'Open Sans', sans-serif; } .inputer input, .inputer textarea {width: calc(100% - 125px); height: 100%; float: right; border: 1px solid #202020; font-size: 18px; padding: 10px 15px; box-sizing:border-box; font-family: 'Open Sans', sans-serif; } .contactUs button {width: 100%; padding: 10px 0; font-size: 18px; color: #fff; background: #202020; cursor: pointer; border: none; } </style> </head> <body> <div class="contactUs"> <h1>Contact Us</h1> <form action="send.php" method="post"> <div class="inputer"> <label for="name"><p>Name</p></label> <input type="text" id="name" name="name" placeholder="Name" required> </div> <div class="inputer"> <label for="email"><p>Email</p></label> <input type="email" id="email" name="email" placeholder="email" required> </div> <div class="inputer"> <label for="subject"><p>Subject</p></label> <input type="text" id="subject" name="subject" placeholder="Subject" required> </div> <div class="inputer"> <label for="url"><p>Website</p></label> <input type="url" id="url" name="url" placeholder="Website"> </div> <div class="inputer message"> <label for="message"><p>Message</p></label> <textarea id="message" name="message" placeholder="Message" required></textarea> </div> <button type="submit">send</button> </form> </div> </body> </html>
Here in the HTML file’s <form> tag you need to add an action attribute, here you need to give the php file name. That will create in the step-2. Like <form action=”any-name.php”>. And also add another attribute method=”POST” . So the full format of form tag will be like
<form action=”any-name.php” method=”POST”>
Under this contact form HTML CSS designs
</form>
Step:2 Now we need to add an PHP file like send.php by which we will send our mail.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Sent successfully</title> <link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet"> <style type="text/css"> <style type="text/css"> * {margin: 0; padding: 0;} body {width: 100vw; height: 100vh; position: relative; overflow: hidden; } .sendsuccess { min-width: 500px; padding: 50px 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #27ae60; color: #fff; text-align: center; font-family: 'Open Sans', sans-serif; } .sendsuccess a { display: inline-block; padding: 20px 15px; background: #fff; color: #202020; text-decoration: none; font-weight: 700; } .sendsuccess a:hover { text-decoration: none; color: #202020; } </style> </head> <body> <?php // This is come from the input tag's name field name="name" like $POST['name'] $name = $_POST['name']; $email = $_POST['email']; $subject = $_POST['subject']; $url = $_POST['url']; $messages = $_POST['message']; //This is the formate of receiving the Message in your email server $formcontent=" From: $name \n Email: $email \n Subject: $subject \n website: $url \n Messages: $messages"; // This is the your email address where message will send $recipient = "sajidztech@gmail.com"; //This is your heading of your contact form it will be come on the top of your received message $subject = "Contact Form"; $mailheader = "From: $email \r\n"; mail($recipient, $subject, $formcontent, $mailheader) or die("Error!"); // After sending the message it will take you in this page. this will be designed by you. You can change the design. echo "<div class='sendsuccess'><h1>Thanks for contact with us</h1><br/> <a href='http://www.sajidztech.com'>Go Back</a></div>"; ?> </body> </html>
Now, that’s it. Now you are able to use it to send messages via mail address. Just change the email address $recipient = “sajidztech@gmail.com”; (use here your mail address.)
And if you want to change the format of the contact form then make it as your wish. Then give a name=” ” attribute with different title for every input tag. Then give take the name attribute in the created PHP file add it like $take-the-variable-as-your-wish = $_POST[‘add here the name attribute from the specif input field.’]. like
in HTML file
<input type=”text” id=”name” name=”myName” placeholder=”Name”>
in PHP File
$thename = $_POST[‘myName‘];
Then make a format how your received mail will look like:
$formcontent=” From: $name \n Email: $email \n Subject: $subject \n website: $url \n Messages: $messages”;
Here it will come to you like
From: Sajid Hasan
Email: sajidztech@gmail.com
Subject: How to create a dynamic contact form
website: http://www.sajidztech.com
Message: This is the message that I want to send you.
Now you will get a part of Subject. It for your mail subject that’s like heading of your mail.
$subject = “Contact Form”;
It will come to you like
Contact Form
Then you will get an option from which mail address you receive the mail. it will come from the mail ID from the message sender.
$mailheader = “From: $email \r\n”;
This will be the form content.
mail($recipient, $subject, $formcontent, $mailheader) or die(“Error!”);
Now, here you can make a design as your wish. It will show when the message will send perfectly to the server. Here you can make a design as your wish under a echo”Make your HTML under this”.
That’s it. No, you can also do this design as your wish and make it dynamic. But it will not work in your desktop server. So to test it you need to use any Cloud server or http server to see the effect.
Comments (0)