ایجاد فرم تماس زیبا با 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

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

نظرات

rasol saeedavi سلام دوستان یه کدی نیاز دارم تحت وب هست یعنی وب سایت هست با کد HTML من میخوامیک text بزارم که مثلا توش اسم بنوسیم و یک باتن با text متصل میکنم مثلا وقتی من توی textنوشتم رسول و روی باتن کلیک کردم تو خوده صفحه بره مثلا سایت Google و وقتی که text خالیه کلیک کنم مثلا روی باتن بگه مثلا text متن را وارد کنید و چیزی عمل نکنه و وقتی اسم توی TEXT بنوسم کلیک کنم روی باتن بره سایت http://WWW.GOOGLE.COM اگه کسی بلده یه راهنمایی کنه مرسی
علیرضا احمدی سلام جناب رسول عزیز ، شما خیلی راحت میتونید این کار رو از طریق یک کد جاوااسکریپت یا جی کوئری انجام بدید.اگه امکانش هست آدرس ایمیل خودتون همینجا بذارید تا براتون کد ها رو ارسال کنیم.

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

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط