.....

چطور در وردپرس، «فرم تماس با ما» را به صورت دو ستونه و واکنش‌گرا طراحی کنیم؟

همان طور که می‌دانیم در حال حاضر بسیاری از سایتها که شامل مشهورترین‌ها و محبوب‌ترین‌ها چه در داخل ایران و چه در جهان نیز می‌شود، از وردپرس استفاده می‌کنند. همچنین یکی از بخش‌های کلیدی هر سایت، بخش «تماس با ما» است. گردانندگان سایت تمایل دارند که نظرات بینندگان و خوانندگان را بدانند و بازدیدکنندگان هم می‌خواهند مواقعی که اشکالی در سایت دیده‌اند و یا نظر و انتقادی دارند آن را با مدیران سایت در میان بگذارند. در اختیار قرار دادن تنها یک ایمیل نمی‌تواند جوابگوی این نیاز باشد و از طرف دیگر با طراحی فرم‌های «تماس با ما»، گردانندگان سایت می‌توانند از دریافت بخشی از اطلاعات مانند نام و ایمیل تماس‌گیرنده تا حدودی مطمئن شوند.

اما مشکل ادامه‌دار و تا حدی آزاردهنده در وردپرس این است که با وجود این که معمولا پلاگین Contact Form 7 به همراه وردپرس نصب می‌شود و میلیونها کاربر دارد، این افزونه تقریبا شامل هیچگونه امکان سفارشی‌سازی و طراحی دلخواه فرم‌ها نیست. فرم‌های نهایی بسیار نامتوازن و به نوعی شلخته هستند. یکی از مهم‌ترین خواسته‌های کاربران که در جستجوهای گوگل چه به فارسی و چه زبانهای دیگر دیده می‌شود، امکان اضافه کردن ستون به فرم‌هاست. و البته در دوران حاضر که موبایل‌ها و تبلت‌ها حدود ۵۰٪ دنیای مرور اینترنت را شامل می‌شوند، بحث مهم دیگر واکنش‌گرا یا ریسپانسیو بودن فرم‌هاست. به این معنی که فرم تک و یا دو ستونهٔ ما در ابعاد مختلف دچار مشکل نشود.

حالا امروز ما راهی را به شما معرفی می‌کنیم که توسط WPSnippet ارائه شده است. این فرم تماس دو ستونه که به صورت واکنش‌گرا هم عمل می‌کند، در ابعاد بزرگ، دو ستونه دیده می‌شود و وقتی صفحهٔ نمایشگر کوچک باشد، یک ستونه می‌شود.

ما پیشنهاد می‌کنیم که تنها در صورتی از این روش استفاده کنید که پوسته یا قالب سایت وردپرسی شما بخش Custom CSS و یا گزینه‌ای مانند آن داشته باشد. اما با این وجود اگر تمایل دارید که کد CSS را مستقیم در Style.css وارد کنید، بهتر است که پیش از آن از فایل Style.css خود یک نسخهٔ پشتیان تهیه کرده باشید.

بخش HTML

کافیست که به افزونهٔ Contact 7 خود رفته و یک فرم جدید با زدن بر روی گزینهٔ Add New ایجاد کنید. کد زیر را کپی کرده و در صفحهٔ باز شده، به جای متن انتخاب شده در تصویر قرار دهید:

<div id="responsive-form" class="clearfix">

<div class="form-row">
<div class="column-half">First Name [text* first-name]</div>
<div class="column-half">Last Name [text* last-name]</div>
</div>

<div class="form-row">
<div class="column-half">Email [email* your-email]</div>
<div class="column-half">Phone [text* your-phone]</div>
</div>

<div class="form-row">
<div class="column-full">Subject [text* your-subject]</div>
</div>

<div class="form-row">
<div class="column-full">Your message  [textarea your-message]</div>
</div>

<div class="form-row">
<div class="column-full">[submit "Send"]</div>
</div>

</div><!--end responsive-form-->

تکنامه - چطور در وردپرس یک فرم دو ستونهٔ واکنش‌گرای «تماس با ما» بسازیم؟

 

حالا فرم خود را ذخیره کنید و مانند همهٔ فرم تماس های دیگر می‌توانید از Shortcode آن در هر بخش از سایت خود استفاده کنید.

 

قالب CSS

حالا به بخش Custom CSS پوستهٔ خود رفته و این ۲ کد را در آنجا قرار دهید:

#responsive-form{
	max-width:600px /*-- change this to get your desired form width --*/;
	margin:0 auto;
        width:100%;
}
.form-row{
	width: 100%;
}
.column-half, .column-full{
	float: left;
	position: relative;
	padding: 0.65rem;
	width:100%;
	-webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box
}
.clearfix:after {
	content: "";
	display: table;
	clear: both;
}

/**---------------- Media query ----------------**/
@media only screen and (min-width: 48em) { 
	.column-half{
		width: 50%;
	}
}

.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea {
	width: 100%;
	padding: 8px;
	border: 1px solid #ccc;
	border-radius: 3px;
	-webkit-box-sizing: border-box;
	 -moz-box-sizing: border-box;
	      box-sizing: border-box
}
.wpcf7 input[type="text"]:focus{
	background: #fff;
}
.wpcf7-submit{
	float: right;
	background: #CA0002;
	color: #fff;
	text-transform: uppercase;
	border: none;
	padding: 8px 20px;
	cursor: pointer;
}
.wpcf7-submit:hover{
	background: #ff0000;
}
span.wpcf7-not-valid-tip{
	text-shadow: none;
	font-size: 12px;
	color: #fff;
	background: #ff0000;
	padding: 5px;
}
div.wpcf7-validation-errors { 
	text-shadow: none;
	border: transparent;
	background: #f9cd00;
	padding: 5px;
	color: #9C6533;
	text-align: center;
	margin: 0;
	font-size: 12px;
}
div.wpcf7-mail-sent-ok{
	text-align: center;
	text-shadow: none;
	padding: 5px;
	font-size: 12px;
	background: #59a80f;
	border-color: #59a80f;
	color: #fff;
	margin: 0;
}

تمام شد!

حالا می‌توانید در صورت تمایل تغییرات و جابجایی و اصلاحات مورد نظر خودتان را بر روی قالب و ظاهر فرم اعمال کنید. به عنوان مثال عنوان‌ها را در بخش HTML فارسی کرده و گزینه‌های اضافی را حذف کنید. به همین راحتی و در عرض چند دقیقه، حالا شما یک «فرم تماس با ما» به صورت دو ستونه و ریسپانسیو دارید.

تکنامه - چطور در وردپرس، «فرم تماس با ما» را به صورت دو ستونه و واکنش‌گرا طراحی کنیم؟

دبلیوپی‌اسنیپت

avatar
آیلار تبریزی
مهمان
آیلار تبریزی

سلام وقت بخیر, من از پلاگین فرم تماس ۷ که روی قالب آوادا وجود داره استفاده کردم, مشکلی که دارم اینه روش هایی که شما در فوق فرمودید را اجرا کردم ولی خطاهایی که باید در فرم نشون بده رو نشون نمیده, مثلا اگر ایمیل را وارد نکنه خطا نمایش نمیده, اگر محبت کنید راهنمایی کنید ممنون میشم.

سید
مهمان
سید

ممنون

milad
مهمان
milad

ادمین جان عالی بود.

تکنامه