Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a contact form design. To create this design we will use HTML, CSS,and JavaScript. We do not make use of any images, icons or external libraries and plugins to create this animation.
As I have mentioned in my tutorials before, this kind of design hardly finds application in real-world projects. However, they are a fun way to learn and explore new CSS properties.
This is a simple contact form design. It has inputs for name, email, and message, along with country selection, all of which you can customize.Contract From makes it easy for users to contact the site owner. If you are going to receive data from users through a contact form, you will need to use a third-party service. For example, EMailJS also has many libraries that allow you to receive contact data.
Project Folder Structure:
Before we start coding let us take a look at the project folder structure. We create a project folder called – ‘Contact Form’. Inside this folder, we have three files. These files are – index.html, style.css and script.js . The first file is the HTML document while the second one is the stylesheet and third one is javascript.
HTML:
We begin with the HTML code. First, copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contact Form | Codehemu</title>
<link href="https://www.codehemu.com/favicon.ico" rel="icon" type="image/x-icon">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app">
<div id="form">
<div class="header-message"><p class="message">Contact Form</p></div>
<form class="form-container">
<div>
<label for="name" class="label">Name</label>
<input type="text" autocomplete="off" name="name" id="name" required="required">
</div>
<div>
<label for="email" class="label">Email</label>
<input type="email" autocomplete="off" name="email" id="email" required="required" class="email">
</div>
<div>
<h4>Country</h4>
<p class="select">
<select class="country" id="countrySelect"></select>
</p>
</div>
<div>
<label for="zipcode" class="label">Zip Code</label>
<input type="number" autocomplete="off" name="zipcode" id="zipcode" required="required" class="zipcode">
</div>
<div>
<label for="textarea" class="label">
Message with Counter</label>
<textarea name="textarea" id="textarea" required="required" maxlength="255" class="message"></textarea>
<span class="counter">0 / 255</span>
</div>
<div><input type="submit" value="Send Form"></div>
</form>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
StyleSheet (CSS):
Next, we style the elements created by HTML to give them shape and add animation using CSS. Now copy the code provided to you below and paste it into your stylesheet.
*,
*::after,
*::before {
box-sizing: border-box;
}
body {
background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
min-height: 100vh;
font-family: sans-serif;
}
hr {
margin-top: 50px;
border-color: white;
}
#app {
display: flex;
}
#form {
font-size: 16px;
padding: 15px 30px;
border-radius: 4px;
margin: 50px auto;
width: 500px;
background-color: #fff;
box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.3);
}
#form .header-message {
height: 35px;
margin: 0px;
position: relative;
}
#form .header-message .message {
background: #e94b35;
color: #ffffff;
font-size: 1.4rem;
text-align: center;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border-radius: 0.25em;
padding: 16px;
}
.form-container {
margin: 50px 0 0 0;
}
.form-container div {
position: relative;
margin: 20px 0;
}
.form-container .label {
display: block;
}
.form-container h4,
.form-container .label {
color: #94aab0;
margin-bottom: 10px;
font-weight: 100;
}
.form-container input[type="text"],
.form-container input[type="email"],
.form-container input[type="number"],
.form-container textarea,
.form-container select {
padding: 12px;
border: 1px solid #cfd9db;
background-color: #ffffff;
border-radius: 0.25em;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.08);
display: block;
width: 100%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.form-container input[type="text"]:focus,
.form-container input[type="email"]:focus,
.form-container input[type="number"]:focus,
.form-container textarea:focus,
.form-container select:focus {
outline: none;
border-color: #2c3e50;
box-shadow: 0 0 5px rgba(44, 151, 222, 0.2);
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
.form-container select {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
cursor: pointer;
}
.select {
position: relative;
}
.form-container .select::after {
content: '\2B9F';
font-size: 16px;
color: #333;
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
.form-container textarea {
min-height: 120px;
resize: vertical;
overflow: auto;
}
.form-container .counter {
color: #2c3e50;
position: absolute;
right: 0px;
top: 0px;
font-size: 10px;
padding: 4px;
}
.form-container input[type="submit"] {
border: none;
background: #2c3e50;
border-radius: 0.25em;
padding: 12px 20px;
color: #ffffff;
font-weight: bold;
float: right;
cursor: pointer;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.error-text {
display: block;
color: red;
font-size: 0.9em;
margin-top: 5px;
}
JavaScript:
Next, Now copy the code provided to you below and paste it into your script.js file.
document.addEventListener('DOMContentLoaded', () => {
// An array to store our country data
const countries = [
{ code: "", name: "Select a country" },
{ code: "AF", name: "Afghanistan" },
{ code: "BD", name: "Bangladesh" },
{ code: "BI", name: "Burundi" },
{ code: "CZ", name: "Czechia" },
{ code: "DK", name: "Denmark" },
{ code: "DO", name: "Dominican Republic" },
{ code: "EC", name: "Ecuador" },
{ code: "FR", name: "France" },
{ code: "GA", name: "Gabon" },
{ code: "HT", name: "Haiti" },
{ code: "IS", name: "Iceland" },
{ code: "JM", name: "Jamaica" },
{ code: "JP", name: "Japan" },
{ code: "KG", name: "Kyrgyzstan" },
{ code: "LA", name: "Laos" },
{ code: "MM", name: "Myanmar" },
{ code: "NA", name: "Namibia" },
{ code: "OM", name: "Oman" },
{ code: "PT", name: "Portugal" },
{ code: "QA", name: "Qatar" },
{ code: "RU", name: "Russia" },
{ code: "SY", name: "Syria" },
{ code: "TJ", name: "Tajikistan" },
{ code: "UZ", name: "Uzbekistan" },
{ code: "VU", name: "Vanuatu" },
{ code: "YE", name: "Yemen" },
{ code: "ZW", name: "Zimbabwe" }
];
// Function to populate the country dropdown
function populateCountryDropdown() {
countries.forEach(country => {
const option = document.createElement("option");
option.value = country.code;
option.textContent = country.name;
countrySelect.appendChild(option);
});
}
// Call the function to populate the dropdown when the page loads
populateCountryDropdown();
const form = document.getElementById('form');
// Event listener for the form submission
form.addEventListener('submit', (e) => {
e.preventDefault(); // Stop the form from submitting normally
if (validateForm()) {
// If the form is valid, you can now process the data
console.log('Form is valid and ready to be submitted!');
// You can add code here to send the data to a server (e.g., using fetch API)
// e.g., form.submit() or a fetch call
} else {
console.log('Form has validation errors.');
}
});
// Event listener for the message counter
textarea.addEventListener('input', () => {
const counterSpan = document.querySelector('.counter');
const currentLength = textarea.value.length;
const maxLength = textarea.maxLength;
counterSpan.textContent = `${currentLength} / ${maxLength}`;
});
});
JavaScript logic
The logic behind how the above script works is explained. Hopefully, here is a discussion about main logics that you need to know.
document.addEventListener('DOMContentLoaded', () => { ... });: The script will run after the entire HTML document is loaded.
That’s it for this tutorial. If you have any queries, suggestions or feedback you can comment below. Happy Coding!
إرسال تعليق