Introduction:
The Contact Us form on a website is a simple and convenient way for visitors to communicate directly with the website owner or support team. It is very useful for visitors. Visitors can fill and submit the form, then the website owner will receive the data.
This is the code...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<meta name="generator" content="Hugo 0.84.0">
<title>coding30.com | Bootstrap5 Service Form</title>
<!-- Bootstrap core CSS -->
<link href="bootstrap5.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<!-- Navbar coding start -->
<nav class="navbar navbar-expand-lg navbar-light bg-light" style="background-color: #D2691E !important;">
<div class="container-fluid">
<a class="navbar-brand text-white" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active text-white" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">Pricing</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar coding end -->
<div class="container" style="margin-top: 1%;">
<div class="bg-light">
<div class="row">
<div class="col-lg-8 col-md-12 p-5 bg-white rounded-3">
<div class="d-flex mb-3 flex-column">
<h1 class="h5 text-capitalize my-4">What service You need ?</h1>
<div class="d-flex flex-wrap">
<select class="form-select" aria-label="Default select example" id="services">
<option selected>----Select your choice---</option>
<option value="Web_development">Web development</option>
<option value="Logo_Design">Logo Design</option>
<option value="Video_Editor">Video Editor</option>
</select>
</div>
</div>
<div class="row mb-3">
<div class="col-md-6 p-3">
<input required placeholder="first name" type="text" name="" id="first_name" />
</div>
<div class="col-md-6 p-3">
<input required placeholder="last name" type="text" name="" id="last_name" />
</div>
<div class="col-md-6 p-3">
<input required placeholder="E-mail" type="email" name="" id="email" />
</div>
<div class="col-md-6 p-3">
<input required placeholder="phone" type="tel" name="" id="tele_number" />
</div>
<div class="col-md">
<textarea required name="" placeholder="write your message" id="message" cols="30" rows="1"></textarea>
</div>
<div class="text-end mt-4">
<button class="btn px-4 py-3 btn-outline-dark" type="submit" onclick="submit_form()" />Send Message</button>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12 text-white aside px-4 py-5">
<div class="mb-5">
<h1 class="h3">Contact Information</h1>
<p class="opacity-50">
<small> Fill out the from and we will get back to you whitin 24 hours </small>
</p>
</div>
<div class="d-flex flex-column px-0">
<ul class="m-0 p-0">
<li class="d-flex justify-content-start align-items-center mb-4">
<span class="opacity-50 d-flex align-items-center me-3 fs-2">
<ion-icon name="call"></ion-icon>
</span>
<span>+1889xxxxxx</span>
</li>
<li class="d-flex align-items-center r mb-4">
<span class="opacity-50 d-flex align-items-center me-3 fs-2">
<ion-icon name="mail"></ion-icon>
</span>
<span>coding30.services@gmail.com</span>
</li>
<li class="d-flex justify-content-start align-items-center mb-4">
<span class="opacity-50 d-flex align-items-center me-3 fs-2">
<ion-icon name="pin"></ion-icon>
</span>
<span>52 RTDew Ln Conway, <br /> TMXde(AR), 72032 </span>
</li>
</ul>
<div class="text-muted text-center text-white">
<code>
<a class="text-white" href="https://coding30.com/"> Code By : www.coding30.com </a>
</code>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons.js"></script>
<script src="sweetalert.js"></script>
<script>
// This the submit form function
function submit_form() {
var services = document.getElementById("services").value;
var first_name = document.getElementById("first_name").value;
var last_name = document.getElementById("last_name").value;
var email = document.getElementById("email").value;
var tele_number = document.getElementById("tele_number").value;
var message = document.getElementById("message").value;
swal("Request is sent", "we will get back to you with in 24 hours!", "success").then(function() {});
}
</script>
</body>
</html>
Video tutorial here...
Preview...
Explanation:
- In this code i am using html, css, bootstrap 5.2 and add extra javascript file name is sweetalert. Basically sweetalert popup use for confirmation message.
- In the block of code, I am using a JavaScript function named submit_form(). When the user hits the submit button, the submit_form() function is called, and it accesses all the text field values using document.getElementById().