تبلیغات
p5soft | دانلود نرم افزار,طراحی سایت,طراحی قالب وبلاگ
پرواز تفریحی پاراگلایدر
پرواز تفریحی پاراگلایدر پرواز تفریحی پاراگلایدر

دوشنبه 13 آبان 1392

آموزش ساخت فرم تماس با ما

نویسنده: امیر حسینی   


تقریباً تمام سایت ها یک فرم تماس با ما دارند، فرم های تماس با ما که از اشکال مختلف با استفاده از تکنیک های جدید یا بعضاً قدیمی طراحی شده اند. داشتن یک فرم تماس با ما در گوشه ایی از سایت یکی از نیازهایی است که تبدیل به دغدغه ی اکثر وب مسترها شده، حال با استفاده از افزونه ها یا کدهای آماده باید این نیاز برطرف شود.


فرم تماس با ما

در این مطلب به معرفی یک فرم تماس با ما ساده و استاندارد که با استفاده از دانش PHP، پوسته HTML5 و استایل CSS3 طراحی شده است خواهیم پرداخت. همچنین درس هایی از CSS3 و HTML5 خواهیم آموخت.

مانند تمامی فرم های تماس با ما در این فرم هم از فرم استاندارد HTML استفاده شده:


<form method="post" action="process.php">
	<p>
		<!--[if lte IE 9]><label for="name">نام</label><![endif]-->
		<input name="name" type="text" id="name" placeholder="نام">
	</p>
	<p>
		<!--[if lte IE 9]><label for="email">ایمیل</label><![endif]-->
		<input name="email" type="email" id="email" placeholder="email@example.com">
	</p>
	<p>
		<!--[if lte IE 9]><label for="comm">پیام</label><![endif]-->
		<textarea name="comments" rows="10" id="comm" placeholder="پیام شما؟"></textarea>
	</p>
	<p>
		<input type="submit" name="submit" value="ارسال">
	</p>
</form>


برای اینکه فرم زیبا و ساده جلوه کند از خاصیت Placeholder که از ویژگی های HTML5 هست استفاده کردم، این خاصیت متن مورد نظر شما را درون فیلد ها نمایش می دهد و وقتی کاربر شروع به نوشتن می کند متن پیش فرض حذف می شود.
همچنین Label ها را که معرف فیلد هستند به دلیل وجود Placeholder حذف کردم ولی چون اینترنت اکسپلورر 10 فقط از این خاصیت پشتیبانی می کند با استفاده از کامنت IF IE تگ Label فقط برای مرورگر IE 9 به پایین نمایش داده خواهد شد.
برای اینکه بیشتر در مورد استفاده از کامنت های مخصوص IE بدانید از این مطلب کمک بگیرید.


و در CSS مانند همه کارهایی که تا کنون ارائه کردم نیاز به یک CSS-reset هست:


/** css-reset **/
*{
	margin: 0px;
	padding: 0px;
	outline: 0px;
}
body{
	direction: rtl;
	font-family: Tahoma, Verdana, Segoe, sans-serif;
	font-size: 14px;
}
a{
	text-decoration: none;
}
label{
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-weight: bold;
	font-size: 17px;
	line-height: 28px;
	margin-right: 3px;
	color: #CCC;
}
ul{
	list-style: none;
}


در شیوه نامه فرم داریم:


/** Form **/
#form{
	background-color: #FDFDFD;
	padding: 10px 20px 10px 22px;
	border: 1px solid #EEE;
	width:300px; /*اندازه ثابت فرم*/
	max-width: 40%; /*حداکثر اندازه ایی که برای فرم تعریف کردیم*/
	min-width: 150px; /*و حداقل اندازه ایی که تعریف شده.*/
	margin: 2% auto;
}
#form h1{ /*متن سربرگ*/
	text-align: center;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-size: 18px;
	color: #CCC;
}
#form p{ /*فاصله بین فیلد ها*/
	display: block;
	margin-top: 10px;
}


برای فیلدها هم با جادوی CSS بدون استفاده از کلاس استایل تعریف کردیم به کدها دقت کنید:


input[type="text"], input[type="email"], textarea{
	background-color: #F9F9F9;
	-webkit-border-radius: 3px;
	border-radius: 3px; /*گوشه های گرد برای فیلدها*/
	-webkit-box-shadow: inset 0px 0px 3px -1px #BBB;
	box-shadow: inset 0px 0px 3px -1px #BBB; /*سایه ها*/
	width: 97%;
	border: 1px solid #DDD;
	padding: 4px;
	display: block;
}
textarea{
	overflow: auto; /*برای حذف اسکرول بار از قسمت پیام فرم*/
	resize: none; /*حذف قابلیت تغییر اندازه از قسمت پیام فرم*/
}
input[type="submit"]{ /*دکمه ارسال*/
	width: 80px;
	padding: 3px;
	background-color: #F9F9F9;
	color: #BBB;
	border: 1px solid #DDD;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0px 0px 3px -1px #BBB;
	box-shadow: 0px 0px 3px -1px #BBB; /*سایه در اطراف*/
	cursor: pointer; /*تغییر نشانگر موس*/
}
input[type="submit"]:active{ /*وقتی بر روی دکمه ارسال کلیک می شود*/
	-webkit-box-shadow: inset 0px 0px 3px -1px #BBB;
	box-shadow: inset 0px 0px 3px -1px #BBB; /*سایه در داخل Inset*/
}


همچنین برای Placeholder هم با استفاده از تکنیک و خاصیت زیر استایل تعیین کردیم:


::-webkit-input-placeholder { /*safary-chrome*/
	color: #aaa;
}
::-moz-placeholder { /*firefox*/
	color: #aaa;
}
:-ms-input-placeholder { /*intenet explorer*/
	color: #aaa;
}


قسمت هایی که نیاز به توضیح داشت به شرح بالا بود، اما طریقه ی نصب و استفاده.
این فرم حاوی یک فایل به نام Process.php می باشد که در قسمت ایمیل باید ایمیل خود را وارد کنید به این صورت:


<?php

// Information to be modified

$your_email = "email@email.com"; // email address to which the form data will be sent
$subject = "فرم تماس با ما"; // subject of the email that is sent
$thanks_page = "thankyou.html"; // path to the thank you page following successful form submission
$contact_page = "index.html"; // path to the HTML contact page where the form appears


تنها قسمتی که نیاز به ویرایش شما دارد همین قسمت هست که باید ایمیل خود را وارد کنید و اکیداً توصیه می کنم اگر دانش PHP ندارید تغییری در دیگر قسمت ها ایجاد نکنید.
بعد از وارد کردن ایمیل خود فایل را ذخیره کنید و در هاست یا سروری که از PHP پشتیبانی می کند فایل ها را آپلود نمایید.
همچنین این فرم حاوی یک فایل htaccess. با کد زیر است:


RewriteEngine on
RewriteCond %{THE_REQUEST} ^.*\/index\.html?\ HTTP/
RewriteRule ^(.*)index\.html?$ "/$1" [R=301,L]

با استفاده از این کد به لینک فرم تماس با ما فرمت استاندارد تری می دهید به این صورت که لینک فایل شما اگر به عنوان نمونه به این حالت باشد:

http://example.com/contact-form/index.html

به این فرمت تغییر خواهد کرد

http://example.com/contact-form/


با این کار لینک کوتاه تر و حرفه ایی به نظر می رسد که برای سئو سایت نیز با اهمیت است. اگر مایل نبودید این تغییر در لینک شما ایجاد شود کافیست فایل htaccess. راحذف کنید.
این فرم چون به حالت Responsive طراحی شده قابلیت فراخوانی در ستون کناری (sidebar) سایت را نیز دارد. (اگر در این مورد با مشکل مواجه شدید در قسمت بیان دیدگاه مطرح کنید)
نمایی از حالت جمع شده فرم:


فرم تماس با ما

و مطلب بعدی مرتبط با امنیت فرم است. در فیلدها محدودیتی ایجاد شده تا کاربر مجاز به استفاده از حروف نامربوط نباشد، که در تصویر به وضوح مشهود است:


فرم تماس با ما

و مطلب آخر اینکه این فرم تست شده و کاملاً کار میکند:


فرم تماس با ما
این فرم به صورت ساده و بدون پشتیبانی از حروف فارسی و utf-8 طراحی شده بود که با همکاری آقایRalph Mason تکمیل و برای شما ارئه شد.


به کپی رایت احترام بگذاریم و برای پشتیبانی از ما و ادامه این روند از حذف لینک کوچکی که به سایت ما داده شده جداً خودداری فرمایید.

منبع این سری آموزش های اسلاید شو http://demo.basics.ir


نظرات() 
فروش بیسیم پوکسینگ نمایندگی فروش بیسیم کنوود 3207 P5 BISIM
Edison
دوشنبه 25 اردیبهشت 1396 08:19 ق.ظ
This web site definitely has all of the information I needed about this subject and didn't know who to ask.
 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر

موضوعات

قالب فلش فوق العاده زیبا و حرفه ای
سئو چیست؟
وبلاگ های تازه طراحی و مطلب گذاری شده
به اشتراک گذاشتن اینترنت PC با موبایل از طریق usb
اتصال مستقیم تبلت به اینترنت adsl
دفترچه راهنمای فارسی گوشی هوشمند سامسونگ
راهنمای کامل فعال سازی اینترنت ایرانسل (GPRS و EDGE)، بسته های افزایشی و تعرفه‌های مربوطه
ساخت کاربر VIP برای سایت های وردپرسی
/طرح-لایه-باز-اسلایدر-سری-اول.
دریافت کد « ما را حمایت کنید 2 »
دانلود قالب گالری عکس
اسلاید شوی حرفه ای
کد اسلاید شو برای وبلاگ
قالب های حرفه ای وبلاگ همراه با اسلایدشو
ابزار نمایش اسلایدر تصاویر
ابزار اسلایدر عکس برای نمایش چندین تصویر در وبلاگ
قالب همراه با اسلاید شو
کد عضویت کاربر
دانلود اسکریپت مدیریت کاربران AuthManager نسخه ۳
عوامل موثر در افزایش رنکینگ سایت در گوگل
نمایش توضیحات برای یک فیلد در کنار آن به صورت Tooltip نمایش کد
اسلایدشو با قابلیت پیش نمایش فریم ها- کد جاوا
فیلم فارسی آموزش جاوا اسکریپت (JavaScript) – بخش اول
آموزش ساخت تاریخ و روز با جاوا
کد جاوا اسکریپت تغیر رنگ پس زمینه با کلیک بر روی یک دکمه/لینک
آموزش انتقال بازدید کننده از دامنه قدیمی به دامنه جدید سایت یا وبلاگ
پیش فرض چگونه جاوا اسکریپت را بر روی مرورگر فعال کنیم؟ (+آموزش تصویری)
دانلود کتاب آموزش جاوا اسکریپت صورت کامل
اسکریپت پرداخت آنلاین بانک پارسـیان
اسکریپت سئو سایت در موتور های جستجوگر seo paneL
مراقب لیست سیاه متور های جستجوگر باشید!!
افزونه رمز گذاری روی لینک های دانلود مخصوص vip کردن سایت+آموزش استفاده
25 افزونه کاربردی برای مرورگر کروم
25 افزونه کاربردی برای مرورگر کروم- part2
بازاریابی شبکه های اجتماعی
کلمات کلیدی مطلب : آموزش - تنظیمات - فیس بوک - امنیت فیس بوک - facebook -
آموزش کامل تنظیمات فیس‌بوک(قسمت اول)
5 اشتباه در رایج در شبکه های اجتماعی
ابزارهای بازاریابی شبکه های اجتماعی - نبض وب سایت تان را در دست بگیرید
5 راه برای فروش توسط شبکه های اجتماعی
سوالات و مشکلات سری d سامسونگ
آموزش تصویری / کامل Css3 - مقدماتی تا پیشرفته
ستون های چندگانه در Css3
آموزش تصویری / کامل Css3 - مقدماتی تا پیشرفته
مرجع کامل دستورات CSS2
آموزش ساختن منوی بازشو توسط CSS
آموزش ساخت منوی عمودی ساده با CSS
آموزش ساخت منوی افقی ساده با CSS
آموزش هک کردن فیس بوک
آموزش هک و جلوگیری از هک شدن مودم ADSL

آمار وبلاگ

  • کل بازدید :
  • بازدید امروز :
  • بازدید دیروز :
  • بازدید این ماه :
  • بازدید ماه قبل :
  • تعداد نویسندگان :
  • تعداد کل پست ها :
  • آخرین بازدید :
  • آخرین بروز رسانی :
  • P5design & PARAPINK5 Sales, I.R.I., Inc. All information applies to I.R. vehicles only
    tell number : 09365995390 | 09122061238 | 09022061238
    www.p5bisim.com