হ্যালো ভিউয়ারস, আশা করি ভালো আছেন। Notesaid24 ওয়েবসাইটে আপনাকে স্বাগতম। আজকে আপনাদের মাঝে শেয়ার করবো; কিভাবে Contact Us ফরম HTML এবং CSS এর মাধ্যমে ডিজাইন করা যায় ।
How To Design Contact Us Form in HTML And CSS With Icons
প্রোজেক্ট ধারণাঃ
- নামঃ Design Contact Us Form in HTML And CSS with Icons.
- ভাষাঃ HTML & CSS
- লাইসেন্সঃ ফ্রি
- রেস্পনসিভঃ না
- অথরঃ Notesaid24
প্রোজেক্ট করতে যা জানা প্রয়োজনঃ
- বেসিক HTML
- বেসিক CSS
- Margin & Padding ( মার্জিন & প্যাডিং )
- Font Awesome
Icon (এই প্রোজেক্ট এ Font Awesome এর 4.7.0 ভার্সন ব্যবহার করা হয়েছে ) - Form Input নিয়ে সামান্য ধারনা থাকলে হবে।
- Display Grid
আশা করি এসব জানা থাকলে এই প্রোজেক্ট করতে কোন সমস্যা নেই, তবে না জানা থাকলেও সমস্যা নেই প্রোজেক্ট করার সাথে সাথে ধারনা হয়ে যাবে। চলুন শুরু করা যাক……………
Contact Us ফরম ডিজাইন করার জন্য, প্রথমে আপনাকে দুটি ফাইল তৈরি করতে হবে। একটি হলো index.html আর অন্যটি হলো style.css ( নামের ব্যপারে কোন বাধ্যবাধকতা নেই তবে ডট নোটেশনের পর .html এবং .css এগুলো ঠিক রাখতে হবে) । নিন্মে index.html এবং style.css ফাইল দেওয়া হয়েছে। অথবা সোর্স কোড ডাইনলোড করে ব্যবহার করতে পারেন।
প্রথমত, আপনি একটা HTML ফাইল (index.html) তৈরি করে নিন, নিচের ব্লকে দেওয়া কোডটি Copy করে আপনার এইচটিএমএল (HTML) ফাইলে Paste করে নিন। মনে রাখবেন (.html) এক্সটেনশন যেন ঠিক থাকে।
HTML কোড ব্লকঃ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contact Us Form Design _ By Notesaid24</title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</head>
<body>
<div class="container">
<div class="mainContainer">
<div class="leftContainer">
<div class="innerLeftContainer">
<h1>Contact Info</h1>
<div class="leftSocialContainer">
<div class="sclInfo">
<li><i class="fa fa-map-marker"></i></li>
<p class="sclTitle">Address</p>
<p>1100, Narayngonj</p>
<p>Dhaka, Bangladesh</p>
</div>
<div class="sclInfo">
<li><i class="fa fa-phone"></i></li>
<p class="sclTitle">Phone</p>
<p>+880XXXXXXXXXX</p>
<p>+880XXXXXXXXXX</p>
</div>
<div class="sclInfo">
<li><i class="fa fa-envelope-open"></i></li>
<p class="sclTitle">E-mail</p>
<p>support@admin.com</p>
</div>
<div class="sclInfo">
<li><i class="fa fa-clock-o"></i></li>
<p class="sclTitle">Working Hours</p>
<p>Sunday: 10:00 am - 4:00 pm</p>
<p>Thursday: 10:00 am - 4:00 pm</p>
</div>
</div>
</div>
</div>
<div class="rightContainer">
<div class="innerRightContainer">
<h1>Write To Us</h1>
<form action="">
<div class="inputBox">
<input type="text" placeholder="Name" />
<input type="email" placeholder="Email" />
</div>
<textarea name="" id="" cols="10" rows="8"></textarea>
<input type="submit" value="Send Message" />
</form>
</div>
</div>
</div>
</div>
</body>
</html>
দ্বিতীয়ত, আপনি একটা CSS ফাইল (style.css) তৈরি করে নিন, নিচের ব্লকে দেওয়া কোডটি Copy করে আপনার সিএসএস (CSS) ফাইলে Paste করে নিন। মনে রাখবেন
(.css) এক্সটেনশন যেন ঠিক থাকে।
CSS কোড ব্লকঃ
* {
color: #646464;
}
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.mainContainer {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 30px;
box-shadow: 0 0 10px #acacac;
padding: 20px;
border-radius: 10px;
}
.innerLeftContainer {
text-align: center;
}
.innerLeftContainer h1 {
font-size: 32px;
}
.leftSocialContainer {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 30px;
}
.sclInfo {
border: 1px solid #e6e6e6;
padding: 10px;
border-radius: 5px;
transition: 0.5s ease-in-out;
}
.sclInfo:hover {
background-color: rgb(236, 236, 236);
cursor: pointer;
box-shadow: 0 0 10px;
}
.sclInfo li {
list-style: none;
}
.sclInfo li i {
font-size: 26px;
}
.sclInfo .sclTitle {
font-size: 20px;
margin-top: 5px;
font-weight: bold;
}
.sclInfo p {
font-size: 16px;
margin: 5px;
}
.innerRightContainer h1 {
text-align: center;
font-size: 32px;
}
.inputBox {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
width: 100%;
height: 100%;
}
.innerRightContainer input {
width: 100%;
height: 40px;
margin-bottom: 15px;
border: 1px solid #e6e6e6;
outline: none;
box-sizing: border-box;
padding-left: 5px;
font-size: 16px;
border-radius: 5px;
}
.innerRightContainer textarea {
width: 100%;
border: 1px solid #e6e6e6;
margin-bottom: 15px;
outline: none;
box-sizing: border-box;
padding-left: 5px;
font-size: 16px;
border-radius: 5px;
resize: none;
}
.innerRightContainer input[type="submit"] {
background-color: #646464;
color: #fff;
font-size: 16px;
cursor: pointer;
font-variant: small-caps;
}
আশা করি আপনি কোড টি সফলভাবে রান করাতে পেরেছেন। প্রোজেক্ট টি কেমন লেগেছে অবশ্যই কমেন্ট করে জানাবেন, আর যদি কোন ভূল হয়ে থাকে তাহলে ক্ষমা সুন্দর দৃষ্টিতে দেখবেন এবং কোথায় ভূল হয়েছে কমেন্ট করে জানাবেন। আর আপনাদের কেমন ধরনের প্রোজেক্ট লাগবে তাও জানাবেন , ইনশাআল্লাহ তা দেওয়ার চেষ্টা করবো। আর ওয়েবসাইটটি বন্ধুদের মাঝে শেয়ার করবেন। আজকের মতই এখানেই বিদায় নিলাম, ইনশাআল্লাহ দেখা হবে অন্য কোন প্রোজেক্ট এ। ভালো থাকবেন সুস্থ থাকবেন। আল্লাহ হাফেয।
