In this post, i am going to explain that how can we design a stylish HTML form for our website and this form will be good looking.I am going to use HTML,CSS, Jquery and bootstrape in this example.
First, You need to have a index.html file to design the input fields and i am going to create two columns in this file on one side there would be contact details such as mobile no, email and address with social media icons and on other column there would be input fields such as name email id, mobile number, country , message fields with submit button.
Table of Contents
Directory Structure
index.html
To design a good looking html form for enquiry or contact form ,you need to create a index.html file where you need to give fields of the forms.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, shrink-to-fit=no">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Website</title>
<meta name="description" content="" />
<!-- CSS: Bootstrap v-5.3 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<!-- CSS: Html Designer -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- PRELOADER -->
<div id="preloader">
<div class="spinner">
<div class="spinner-item"></div><div class="spinner-item"></div><div class="spinner-item"></div><div class="spinner-item"></div><div class="spinner-item"></div>
</div>
</div>
<!-- PRELOADER END -->
<!-- header wrapper start -->
<header class="header__wrapper">
<div class="container">
<div class="row formbck">
<div class="col-lg-6 formbckcolor formbckcol">
<h1>Get in touch with us !</h1>
<h4>Please fill the form to get back shortly with the details</h4>
<div class="calldetails">
<p class="form-border"><i class="fa fa-phone" ></i> +91-8282828282</p>
<p class="form-border"><i class="fa fa-envelope" ></i> info@forms.com</p>
<p class="form-border"><i class="fa fa-map-marker" ></i> 356 B Block, New Delhi</p>
</div>
<h5>FOLLOW US <i class="fa fa-facebook-square" aria-hidden="true"></i>
<i class="fa fa-instagram" aria-hidden="true"></i>
<i class="fa fa-twitter-square" aria-hidden="true"></i></h5>
</div>
<div class="col-lg-6">
<h1></h1>
<form id="form" class="form__wrapp p-4" autocomplete="off">
<div class="from-group mb-3 mb-4">
<div class="form-floating">
<input type="text" class="form-control" name="name" id="name" placeholder="Jhone Deo">
<label for="floatingInputName">Enter name</label>
</div>
</div>
<div class="from-group mb-3 mb-4">
<div class="form-floating">
<input type="email" class="form-control" name="email" id="email" placeholder="name@example.com">
<label for="floatingInputEmail">Email address</label>
</div>
</div>
<div class="from-group mb-3 mb-4">
<div class="form-floating">
<input type="tel" class="form-control" name="mobile" id="mobile" placeholder="name@example.com">
<label for="floatingInputPhoneNum">Mobile Number</label>
</div>
</div>
<div class="from-group mb-3 mb-4">
<div class="form-floating">
<select class="form-control" name="country" id="country"><option>India</option><option>America</option></select>
<label for="floatingInputPhoneNum">Country</label>
</div>
</div>
<div class="from-group mb-3 mb-4">
<div class="form-floating">
<textarea class="form-control" placeholder="Message" name="message" id="message" style="height: 100px"></textarea>
<label for="floatingTextarea">Message</label>
</div>
</div>
<div class="btn__box text-end">
<div style="text-align: left;float:left;"><label id="info"></label></div><button class="btn btn-dark rounded" name="submit" id="submit">Submit</button>
</div>
</form>
</div><!--.//col-->
</div><!--.//row-->
</div>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- JS: Bootstra -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!-- JS: Designer Script -->
<script src="js/script.js"></script>
<script src="js/main.js"></script>
</body>
</html>
style.css
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,400;1,300&family=Oswald:wght@200&display=swap');
/*============================== Variables =========================*/
:root {
--yellow: rgb(254, 206, 11);
--yellow-dark: #d6aa74;
--orange: #f4534e;
--dark: #0a0a0a;
--blue: #023a6e;
--gray: #504e4e;
--white: #ffffff;
--black: #333333;
--text-color: #646464;
--second-font: 'Roboto', sans-serif;
}
* {
margin: 0%;
padding: 0%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
font-size: 16px;
}
html {
width: 100%;
height: 100%;
scroll-behavior: smooth;
overflow-x: hidden;
}
body {
background-color: #fff;
text-rendering: optimizeLegibility;
font-family: 'Josefin Sans', sans-serif;
font-family: 'Oswald', sans-serif;
line-height: 1.4;
color: var(--text-color);
font-weight: 400;
font-style: normal;
}
input[type="radio"] {
/* ...existing styles */
width: 15px;
height: 15px;
border: 2px solid red;
box-shadow: 1px 1px 1px 3px #04b6fd;
margin: 10px;
background-color: black;
}
.headcontact
{
background-color: yellow;
padding: 0px 10px 0px 10px;
border-radius: 30px;
}
.formbck
{
background-image: url("../images/bck.webp");
border-radius: 20px;
box-shadow: #005080;
margin-top: 50px;
}
.formbckcol
{
background-color: #002649;
padding:30px;
border-radius: 20px 0px 0px 20px;
}
.formbckcolor
{
color: white;
}
.calldetails
{
padding: 50px;
}
.form-border
{
border:1px solid #002649;
padding: 5px;
border-radius: 50px;
font-size: 18px;
}
.form-border:hover
{
border:1px solid #005080;
padding: 5px;
border-radius: 50px;
}
.fa{font-size: 20px;margin:10px; }
.bg-primary {
background-color: #0b3476 !important;
}
/*------------------ Full width container management ----------------*/
@media (min-width: 1400px) {
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
max-width: 1170px;
}
}
@media (min-width: 576px) {
.mobile__actions {
display: none;
}
}
/*====================================================== Preloader Styles =========================================================================================*/
:root {
--size: 75px;
--clr-bg: #272324;
--clr1: #bbbb88;
--clr2: #ccc68d;
--clr3: #eedd99;
--clr4: #eec290;
--clr5: #eeaa88;
}
#preloader {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
z-index: 1040;
background-color: #fff;
}
.spinner:nth-child(1) {
--animation-duration: 1000ms;
width: var(--size);
height: var(--size);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: space-evenly;
-ms-flex-pack: space-evenly;
justify-content: space-evenly;
}
.spinner:nth-child(1) .spinner-item {
width: calc(var(--size) / 12);
height: 80%;
background: var(--clr-spinner);
-webkit-animation: spinner1 var(--animation-duration) ease-in-out infinite;
animation: spinner1 var(--animation-duration) ease-in-out infinite;
}
@-webkit-keyframes spinner1 {
50% {
-webkit-transform: scaleY(0.25);
transform: scaleY(0.25);
}
}
@keyframes spinner1 {
50% {
-webkit-transform: scaleY(0.25);
transform: scaleY(0.25);
}
}
@media (min-width: 992px) {
.navbar .dropdown:hover .dropdown-menu {
display: block;
}
}
/*# sourceMappingURL=style.css.map */
main.js
$(document).ready(function() {
var form = $('#form'),
name = $('#name'),
email = $('#email'),
mobile = $('#mobile'),
message = $('#message'),
info = $('#info'),
submit = $("#submit");
form.on('input','#name, #email, #mobile, #message', function() {
$(this).css('border-color', '');
info.html('').slideUp();
});
submit.on('click', function(e) {
info.html('Loading...').css('color', 'red').slideDown();
e.preventDefault();
if(validate()) {
$.ajax({
type: "POST",
url: "mailer.php",
data: form.serialize(),
dataType: "json"
}).done(function(data) {
if(data.success) {
email.val('');
name.val('');
mobile.val('');
message.val('');
info.html('Details submitted successfully !').css('color', 'green').slideDown();
} else {
info.html('Could not send mail! Sorry!').css('color', 'red').slideDown();
}
});
}
});
function validate() {
var valid = true;
if($.trim(mobile.val()) === "") {
mobile.css({"border-color":"red", "border-width":"3"});
valid = false;
info.html('<b><img src="images/error.png"/> Please fill the required details</b>').css('color', 'red').slideDown();
}
if($.trim(message.val()) === "") {
message.css({"border-color":"red", "border-width":"3"});
valid = false;
}
return valid;
}
});
[/jquery]
<h3>script.js</h3>
[jquery]
(function ($) {
/*---------------- Preloader Script --------------*/
$(window).ready(function () {
$('#preloader').delay(200).fadeOut('fade');
});
})(jQuery);
mailer.php
<?php
if($_POST) {
$to = "ravi@gmail.com"; // your mail here
$name = filter_var($_POST["name"], FILTER_SANITIZE_EMAIL);
$email = filter_var($_POST["email"], FILTER_SANITIZE_STRING);
$mobile = filter_var($_POST["mobile"], FILTER_SANITIZE_STRING);
$message = filter_var($_POST["message"], FILTER_SANITIZE_STRING);
$body = "Message: $message\nE-mail: $email\nMobile: $mobile\nName: $name";
$subject="Form Details";
$from="mail@ravindra24.com";
//mail headers are mandatory for sending email
$headers = 'From: ' .$from . "\r\n".
'Reply-To: ' . $email. "\r\n" .
'X-Mailer: PHP/' . phpversion();
if(@mail($to, $subject, $body, $headers)) {
$output = json_encode(array('success' => true));
die($output);
} else {
$output = json_encode(array('success' => false));
die($output);
}
}
?>
Ravindra is Web & Mobile application designer and developer. He is experienced guy in web & mobile app designing and development. He is a tech blogger too.
Related Posts:
