For enhancing better communication on your Website, a contact form often breaks down the barrier & connects potential clients. Let's start to contact form in HTML
We tend to communicate online with our friends, family, relatives, and peers in today's modern world. Likewise, each company has a custom contact page to attract clients. A study shows that it helps in a great way for lead generation.
What is the main concept of a contact form?
A contact form serves as an ideal channel to contact the company directly. It has the customer details to key in and send to the email of the business proprietor. The communication form may act in the fastest way to convey your inquiries.
Though the contact page has all kinds of getting in touch methods like phone number, email, or social media profile links, etc., Many of us still prefer the most convenient way of typing in your name, email, and query. See, it is simple and time-saving.
The 3 crucial steps of building a contact form that sends email via PHP
Develop an HTML form
A simple HTML form layout illustrates the typical arrangement of a web page. The HTML body has a page type or doc type, heading, title, body-like headers, subheadings, sections, snapshots and so on.
Document type - the very beginning of a static web page or dynamic page brings out the doctype. It seems necessary to let the system know about the HTML-type record to operate.
<html> - This arises as the next major item in an HTML document and the most fundamental component. All the other HTML tags initiating from the head tag to the last body tag pursue that except for the doctype.
<head> - The head tag specifies the metadata, the vital factor of the page that provides authorization. It mostly says all about the data on the file.
<title> - Include the web page title that has been visual in the heading of the browser to all users.
<body> - The body tag proposes significant content setups like titles and sections. pictures, or even tables, etc.,
Design the form using CSS properties
CSS Properties
CSS properties support in developing your website or a web page. It holds more weight to the HTML facet summing up to each aspect and its characteristics. You shall come across around a hundred properties when you get into it.
The behaviors of the elements have been specially distributed for them. Ex- you can add color, change font size, give margin or border, and box model. Hence you drive your web pages better this way.
Types of CSS properties and their uses
Accent, Alignment, Animation, All, Aspect ratio, Backdrop, Background, Border, Break, Box, Column and color, Display Font styling Grid Image Margin properties have their way of adding a great look to the web pages.
Other properties include content modifications, adding gaps, height, empty cells, quotes, editing, rotating, scroll behavior, text changes, transitioning and word wrapping. It can make use of the CSS selectors and change it to a contemporary interface.
The selectors do their job in selecting the element that has to be altered as the name suggests. Ex- it can choose by the name, id, class, universal selector ‘*’, grouping selectors, and so on. Similarly, it modifies the alignment, and borders, adds animations, and all.
Write the PHP script that sends email
We have created a brand new web page or a page for customer interaction. We must input some of the scripts using the PHP mail to fulfill its purpose.
<?php
if(isset($_POST['send'])){
$name = $_POST['name'];
$email = $_POST['email'];
$enquiry = $_POST['enquiry'];
$to = "your-email@abc.com";
$subject = "New Enquiry from Contact Form";
$body = "Name: $nameEmail: $email$enquiry";
mail($to,$subject,$body);
echo "Thank you for your mail!";
}
?>Here, the system examines whether the send button has been pushed down. The script strictly proceeds only after that.
It goes with the flow to the $to the variable where it goes to the particular email id.
The $subject variable contains the heading of the contact form.
Whereas $body involves the summary of the consumer question.
The mail() delivers the mail to the desired mail ID in no time.
We have successfully worked with our contact form that can be used on a contact page. The enterprises use this technique to cover as many clients well as possible for their market needs. We make sure that all beginners strive for a better career.
Hence, we started our exclusive training plan well thought out for both freshers and professionals. It has multiple benefits like person-oriented projects and hence portfolio-designed. We help you to excel in your interview by standing out.
Our company CCT provides you with our dedicated project page consisting of your mini-project. The IT industries prefer the ones that have prior project experience. You can also check out our website contact form to get in touch with us.
FAQs
What is the usage of HTML?
HTML is a hypertext markup language used through many platforms with no restrictions.
HTML has been made up of tags and elements and used to produce content on websites.
It also carries numerous styles of text that may appear on the web page like a paragraph, bulleted points, or an image.
Why is PHP used?
PHP has always been used as a scripting language for computers on their server side.
It helps us to build the website content and interconnect with databases.
It has been a time-effective and flexible language indeed.
How to create a contact form via php in simple words?
We mainly utilize PHP to add more performance to the contact form. We need to produce a php file dedicated specifically to add it to the HTML file. It always acts as an action part. Hence the contact.php file has been built and then added to the HTML document.
Sample HTML code for contact form with output;
<!DOCTYPE html>
<html>
<body>
<section id="last">
<!-- heading -->
<div class="full">
<h3>Welcome to Calanjiyam!</h3>
<div class="lt">
<!-- form starting -->
<form class="form-horizontal" method="post"
action="contact.php">
<div class="form-group">
<div class="col-sm-12">
<!-- name -->
<input type="text" class="form-control"
id="name" placeholder="NAME"
name="name" value="" />
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<!-- email -->
<input type="email" class="form-control"
id="email" placeholder="EMAIL"
name="email"
value="" />
</div>
</div>
<!-- message -->
<textarea class="form-control" rows="10"
placeholder="MESSAGE" name="message">
</textarea>
<button class="btn btn-primary send-button"
id="submit" type="submit" value="SEND">
<i class="fa fa-paper-plane"></i>
<span class="send-text">SEND</span>
</button>
</form>
<!-- end of form -->
</div>
<!-- Contact information -->
<div class="rt">
<ul class="contact-list">
<li class="list-item">
<i class="fa fa-map-marker fa-1x">
<span class="contact-text place">
316/6, North Street, Sooriampalayam, Odathurai, Tamil Nadu 638455
</span>
</i>
</li>
<li class="list-item">
<i class="fa fa-envelope fa-1x">
<span class="contact-text gmail">
<a href="mailto:yourmail@gmail.com"
title="Send me an email">
calanjiyam@gmail.com</a>
</span>
</i>
</li>
<li class="list-item">
<i class="fa fa-phone fa-1x">
<span class="contact-text phone">
+918667280728
</span>
</i>
</li>
</ul>
</div>
</div>
</section>
</body>
</html>
Output for the above HTML contact form;
We're sincerely grateful for your time spent reading our blogs;
Your support means the world to us!