ایجاد فرم تماس زیبا با HTML5 و CSS3

امروز نحوه ساخت یک فرم تماس زیبا را در HTML5 و CSS3 آموزش خواهیم داد که می توانید به صورت رایگان سورس کد این فرم را دانلود کنید. آنچه یاد خواهیم گرفت:
  • اصول طراحی ظاهر با CSS3
  • چگونه یک فرم HTML ایجاد کنیم.
  • چگونه یک فرم تماس با ما زیبا با CSS3 یسازیم.

کد HTML:


<!DOCTYPE html>
<html>
<head>
<title>CSS Contact Form</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
</head>
<body>
<h2>فرم ارتباط با ما</h2>
<form dir="rtl">
<p>
<input type="text" name="name" id="name" placeholder="مهدی احدی" />
<label for="name">نام</label>
</p>
<p>
<input type="text" name="email" id="email" placeholder="mail@example.ir" />
<label for="email">ایمیل</label>
</p>
<p>
<input type="text" name="web" id="web" placeholder="www.example.ir" />
<label for="web">
وب سایت</label>
</p>
<p>
<textarea name="text" placeholder="متن خود را بنویسید. " /></textarea>
</p>
<p>
<input type="submit" value="ارسال" />
</p>
</form>
</body>
</html>

کد CSS:


/* ===========================
======= سبک بدنه ========
=========================== */

body {
padding: 50px 100px;
font-size: 13px;
font-style: Verdana, Tahoma, sans-serif;
}

/*====== h2 خاصیت ====== */
h2 {
margin-bottom: 20px;
color: #474E69;
font-family:Tahoma;
direction: rtl;
}

/* ===========================
====== فرم ارتباط =======
=========================== */

input, textarea {
padding: 10px;
border: 1px solid #E5E5E5;
width: 200px;
color: #999999;
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
}

/*====== textarea خاصیت ====== */
textarea {
width: 400px;
height: 150px;
max-width: 400px;
line-height: 18px;
}

/*====== قرار گیری ماوس روی کادر های متنی ====== */

input:hover, textarea:hover,
input:focus, textarea:focus {
border-color: 1px solid #C9C9C9;
box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 8px;
}

/*====== label خاصیت ====== */
.form label {
margin-left: 10px;
color: #999999;
font-family:Tahoma;
}

/* ===========================
====== دکمه ارسال ======
=========================== */

.submit input {
width: 100px;
height: 40px;
background-color: #474E69;
color: #FFF;
border-radius: 3px;
font-family:Tahoma;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

دانلود سورس آماده این آموزش

دانلود سورس آماده این آموزش با ASP.NET

نظر شما

مفاهیم طراحی وب مفاهیم طراحی وب

PNG یا GIF؟ نکته های حیاتی برای انتخاب روش یادگیری بهتر CSS چگونه دکمه Like فیس بوک را روی وب سایت نصب کنیم؟ ربات وب سایت چیست؟ رنگ بندی وب سایت را چگونه انتخاب کنیم؟ چگونه یک منوی زیبای افقی با CSS3 بسازیم؟ ساخت دکمه حبابی متحرک ایجاد جعبه تصاویر زیبا با CSS3 ایجاد فرم تماس زیبا با HTML5 و CSS3 ساخت پنل افقی شناور با CSS انتخاب فرمت مناسب برای تصاویر در وب سایت ایجاد دکمه مثلثی با سایه توسط CSS فونت ها چگونه می توانند وب سایت شما را تحت تاثیر قرار دهند؟ ساخت یک منوی عمودی فوق العاده زیبا ساخت جدول قیمت گذاری با css3 ساخت منوی کشویی با جعبه جستجو در CSS و HTML تبدیل template انگلیسی به template فارسی | آموزش css 4 نکته برای ساده کردن طراحی صفحات وب پلاگین اختصاصی وب مهراز (webmehraz dancing word) ویژگی های جدید در CSS4 ایجاد شکل های مختلف با CSS – سری اول ایجاد شکل های مختلف با CSS – سری دوم ساخت منو زیبا و کارآمد به همراه TAB سازگاری طراحی واکنشی وب با Cross-browser بدترین طراحی های وب که باید از آنها دوری کرد بهینه سازی طراحی با استفاده از ترازبندی مناسب آموزش کاربردی طراحی وب (درس 1) طراحی واکنشی (Responsive) وب و چگونگی انجام آن – بخش اول طراحی واکنشی (Responsive) وب و چگونگی انجام آن – بخش دوم طراحی واکنشی (Responsive) وب و چگونگی انجام آن – بخش سوم 6 قانون اساسی در سال 2016 برای بهینه سازی وب سایت SEO

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران بپیوندید

   
   
عضویت
پیام تستی برای گروه نرم افزاری وب مهراز