Create Simple Website Contact Form Using Bootstrap 5 || Indian Coding Wala || Omnath Dubey

Omnath Dubey 5/09/2023 07:20:00 AM

Html Source Code :-

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Indian Coding Wala Footer</title>

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Nunito:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<link href="style.css" rel="stylesheet">
</head>
<body>

<section id="services" class="services">

<div class="container mt-5 mb-5" data-aos="fade-up">


<section id="contact" class="contact">

<div class="container" data-aos="fade-up">

<div class="row gy-4">

<div class="col-lg-6">

<div class="row gy-4">
<div class="col-md-6">
<div class="info-box">
<i class="bi bi-geo-alt"></i>
<h3>Address</h3>
<p>GW32+88F, Fatima Nagar, Wanowrie, Pune, Maharashtra 411040</p>
</div>
</div>
<div class="col-md-6">
<div class="info-box">
<i class="bi bi-telephone"></i>
<h3>Call Us</h3>
<p>+91-9870000000<br>+91-9870000000</p>
</div>
</div>
<div class="col-md-6">
<div class="info-box">
<i class="bi bi-envelope"></i>
<h3>Email Us</h3>
<p>indiancodingwala@gmail.com<br>indiancodingwala@gmail.com</p>
</div>
</div>
<div class="col-md-6">
<div class="info-box">
<i class="bi bi-clock"></i>
<h3>Open Hours</h3>
<p>Monday - Friday<br>9:00AM - 05:00PM</p>
</div>
</div>
</div>

</div>

<div class="col-lg-6">
<form action="forms/contact.php" method="post" class="php-email-form">
<div class="row gy-4">

<div class="col-md-6">
<input type="text" name="name" class="form-control" placeholder="Your Name" required>
</div>

<div class="col-md-6 ">
<input type="email" class="form-control" name="email" placeholder="Your Email" required>
</div>

<div class="col-md-12">
<input type="text" class="form-control" name="subject" placeholder="Subject" required>
</div>

<div class="col-md-12">
<textarea class="form-control" name="message" rows="6" placeholder="Message" required></textarea>
</div>

<div class="col-md-12 text-center">
<div class="loading">Loading</div>
<div class="error-message"></div>
<div class="sent-message">Your message has been sent. Thank you!</div>

<button type="submit">Send Message</button>
</div>

</div>
</form>

</div>

</div>

</div>

</section>
</body>

</html>

CSS Source Code:-

:root {
scroll-behavior: smooth;
}

body {
font-family: "Open Sans", sans-serif;
color: #444444;
}

a {
color: #4154f1;
text-decoration: none;
}

a:hover {
color: #040935;
text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Nunito", sans-serif;
}


/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .info-box {
color: #444444;
background: #fafbff;
padding: 30px;
}

.contact .info-box i {
font-size: 38px;
line-height: 0;
color: #8f2e05;
}

.contact .info-box h3 {
font-size: 20px;
color: #012970;
font-weight: 700;
margin: 20px 0 10px 0;
}

.contact .info-box p {
padding: 0;
line-height: 24px;
font-size: 14px;
margin-bottom: 0;
}

.contact .php-email-form {
background: #fafbff;
padding: 30px;
height: 100%;
}

.contact .php-email-form .error-message {
display: none;
color: #fff;
background: #ed3c0d;
text-align: left;
padding: 15px;
margin-bottom: 24px;
font-weight: 600;
}

.contact .php-email-form .sent-message {
display: none;
color: #fff;
background: #18d26e;
text-align: center;
padding: 15px;
margin-bottom: 24px;
font-weight: 600;
}

.contact .php-email-form .loading {
display: none;
background: #fff;
text-align: center;
padding: 15px;
margin-bottom: 24px;
}

.contact .php-email-form .loading:before {
content: "";
display: inline-block;
border-radius: 50%;
width: 24px;
height: 24px;
margin: 0 10px -6px 0;
border: 3px solid #18d26e;
border-top-color: #eee;
animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input,
.contact .php-email-form textarea {
border-radius: 0;
box-shadow: none;
font-size: 14px;
border-radius: 0;
}

.contact .php-email-form input:focus,
.contact .php-email-form textarea:focus {
border-color: #4154f1;
}

.contact .php-email-form input {
padding: 10px 15px;
}

.contact .php-email-form textarea {
padding: 12px 15px;
}

.contact .php-email-form button[type=submit] {
background: #2c5102;
border: 0;
padding: 10px 30px;
color: #fff;
transition: 0.4s;
border-radius: 4px;
}

.contact .php-email-form button[type=submit]:hover {
background: #a50911;
}

@keyframes animate-loading {
0% {
transform: rotate(0deg);
}

100% {
transform: rotate(360deg);
}
}

Contact Form Using Bootstrap 5

There are millions of websites created every day, also, there is much fake content spread on the internet. So, Our main goal is to provide you with 100% Original and Safe content that provides you a great and better experience on the world wide web. We mainly focus on our service so and improving it regularly to provide a better user experience to all users. Basically, we focus on the News niche so, our main priority is to search for new content and present it in front of you to learn something new.