قرار دادن فیلدهای فرم تماس در کنار هم در Contact Form 7 و WPForms

اگر می خواهید فیلدهای فرم تماس ساخته شده با افزونه فرم تماس 7 را در کنار هم قرار دهید و شکلی مشابه زیر برای فرم تماس خود ایجاد کنید، این مقاله دقیقاً مخصوص شما است. بسیاری از افزونه های فرم ساز وردپرس امکان قرار دادن فیلدهای فرم تماس در کنار هم در یک ردیف را نمی دهند. اما با ترفندهایی می توانید این کار را انجام دهید. انجام آن در افزونه WPForms راحت تر است ولی در فرم تماس 7 هم امکان پذیر است. در این مقاله نحوه نمایش فیلدهای فرم تماس در کنار هم در هر دو افزونه WPForms و Contact Form 7 را آموزش می دهیم.

برای آشنایی با افزونه WPForms و نحوه ساخت انواع فرم ها با این افزونه، مقاله آموزش افزونه WPForms را مطالعه کنید.

برای آشنایی بیشتر با افزونه فرم تماس 7 و نحوه ساخت فرم تماس با ما با استفاده از این افزونه، مقاله آموزش افزونه فرم تماس 7 را مطالعه کنید.

افزونه فرم تماس 7 یکی از افزونه های قدیمی و محبوب وردپرس برای ساخت فرم تماس با ما و انواع دیگر فرم ها است. هسته اصلی فرم تماس 7 قابلیت های محدودی دارد اما به لطف افزودنی های زیادی که برای این افزونه طراحی و توسعه داده شده است می توانید قابلیت های آن را افزایش دهید.

لیستی از افزودنی های فرم تماس 7 را می توانید در مقاله بهترین افزودنی های فرم تماس 7 مشاهده کنید.

یکی از اشکالاتی که افزونه Contact Form 7 دارد این است که فیلدهای فرم را در خطوط جداگانه قرار می دهد؛ اما بسیاری از کاربران ترجیح می دهند فیلدهایی مانند نام و آدرس ایمیل در کنار هم در یک سطر نمایش داده شود. انجام این کار در هسته اصلی افزونه فرم تماس 7 امکان پذیر نیست اما با دو تا افزونه Contact Form 7 Shortcode Enabler و Column Shortcodes به راحتی می توانید فیلدهای فرم را در کنار هم قرار دهید.

در این مقاله به شما نشان می دهیم که چگونه با استفاده از این دو افزونه فیلدهای فرم تماس 7 را در کنار هم قرار دهید. سپس نحوه انجام این کار را در افزونه WPForms آموزش می دهیم.

آموزش قرار دادن فیلدهای فرم تماس 7 در کنار هم

فرم تماسی که توسط افزونه فرم تماس 7 ساخته می شود، به صورت پیش فرض و فارسی سازی شده مشابه زیر است.

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

در حالت عادی، افزونه فرم تماس 7 امکان قرار دادن فیلدهای فرم در کنار هم را نمی دهد. اما خبر خوب این است که فرم ساز Contact Form 7 امکان نشانه گذاری HTML را می دهد.

CF7 به طور پیش فرض، نشانه گذاری HTML را فقط در ویرایشگر خود مجاز می کند. برای استفاده از کد کوتاه باید به وردپرس بگویید که می خواهید کد کوتاه را برای CF7 فعال کنید.

افزونه ای که برای انجام این کار وجود دارد، افزونه Contact Form 7 Shortcode Enabler نام دارد. اما این افزونه بیش از سه سال است که بروزرسانی نشده است.

اگر دوست ندارید از چنین افزونه ای استفاده کنید، با ویرایش فایل functions.php هم می توانید امکان قرار دادن کد کوتاه در فرم تماس 7 را فعال کنید.

ابتدا افزونه Contact Form 7 Shortcode Enabler را در سایت خود نصب کنید. اگر منو افزونه را ندیدید یا اطلاعات جزئی تری لازم دارید، به راهنمای گام به گام ما در مورد آموزش نصب افزونه وردپرس مراجعه کنید.

بعد از اینکه افزونه نصب شد آن را فعال کنید.

اگر علاقه ای به نصب افزونه ندارید، کد زیر را در فایل functions.php قالب فرزند سایت وردپرس خود قرار دهید:

add_filter( 'wpcf7_form_elements', 'delicious_wpcf7_form_elements' );
 
function delicious_wpcf7_form_elements( $form ) {
$form = do_shortcode( $form );
return $form;
}

برای آشنایی با مفهوم قالب فرزند و نحوه ساخت آن به مقاله آموزش قالب فرزند در وردپرس مراجعه کنید.

Column Shortcodes افزونه ای است که کدهای کوتاه را برای نمایش مطالب در چند ستون به عملکرد وب سایت وردپرس شما اضافه می کند. شما نه تنها می توانید از این افزونه برای تقسیم فیلدهای فرم تماس در یک ستون واحد استفاده کنید بلکه برای هر محتوای دیگری در وب سایت خود هم می توانید از آن استفاده کنید.

در مقاله آموزش افزونه Column Shortcodes می توانید به صورت کامل با این افزونه آشنا شوید.

افزونه Column Shortcodes را در سایت خود نصب و فعال سازی کنید.

بعد از اینکه این دو افزونه را نصب کردید، تنها کاری که باید انجام دهید این است که در پیشخوان وردپرس به مسیر فرم تماس » فرم های تماس رفته و فرم تماس مورد نظر خود را به حالت ویرایش باز کنید؛ یا یک فرم تماس جدید بسازید.

سپس به جای کد پیش فرض فرم، از کد زیر استفاده کنید.

<div class="content-column one_half"><div style="padding:"0;"><label> نام (الزامی)
    [text* your-name] </label></div></div>
 
<div class="content-column one_half last_column"><label> ایمیل (الزامی)
    [email* your-email] </label></div><div class="clear_column"></div>

<label> موضوع 
    [text* your-subject]</label>
 
<label> پیام شما
    [textarea your-message] </label>
 
[submit "ارسال"]

توجه داشته باشید که برای ایجاد یک خط 2 ستونی، باید یک کد کوتاه برای نیمه اول و یک کد کوتاه دیگر برای نیمه دوم ایجاد کنید.

اگ دقیقاً از کد بالا استفاده کنید، فیلدها به هم می چسبند. اگر می خواهید فیلدها از هم فاصله داشته باشند باید مقداری پدینگ اضافه کنید.

برای اضافه کردن پدینگ در پیشخوان وردپرس به مسیر سفارشی سازی » CSS اضافی بروید و کد زیر را اضافه کنید.

.content-column.one_half{
	padding-right: 10px;
}

نمایش سه ستون در فرم تماس 7

با همان روشی که در قسمت قبل برای قرار دادن دو تا از فیلدهای فرم تماس در کنار هم ذکر شد، می توانید این کار را برای سه فیلد هم انجام دهید و شکلی مشابه زیر داشته باشید.

برای دستیابی به این هدف، فقط نیاز به یک تغییر جزئی در کد 2 ستون دارید. با استفاده از کد زیر می توانید به راحتی 3 ستون در فرم تماس 7 خود نمایش دهید.

<div class="content-column one_third"><div style="padding:"0;"><label> نام (الزامی)
    [text* your-name] </label></div></div>
 
<div class="content-column one_third"><div style="padding:"0;"><label> ایمیل (الزامی)
    [email* your-email] </label></div></div>
 
<div class="content-column one_third last_column"><label> موضوع
     [text* your-subject] </label></div><div class="clear_column"></div>
 
<label> پیام شما
    [textarea your-message] </label>
 
[submit "ارسال"]

مطمئن شوید که کلاس ها در جای درست خود قرار گرفته اند. بخصوص در مورد کلاس “last-column” و هنگامی که کد را در مناطق مختلف کپی و پیست می کنید، دقت کنید.

قرار دادن فیلدهای فرم تماس در کنار هم در افزونه WPForms

افزونه WPForms یک افزونه عالی و کاربردی برای ساخت انواع فرم ها در وردپرس است. رابط کاربری کشیدن و رها کردن این افزونه بسیار راحت تر از فرم تماس 7 است.

برای قرار دادن فیلدهای فرم تماس افزونه WPForms در کنار هم ، فرم مورد نظر خود را به حالت ویرایش باز کنید.

روی فیلد اول کلیک کنید و در تب Field Options به پایین صفحه اسکرول کنید تا به قسمت Advanced Options برسید. روی آیکون فلش رو به پایین کلیک کنید تا پنجره کشویی مربوط به آن باز شود. سپس در قسمت CSS Classes روی لینک Show Layouts کلیک کنید. به این ترتیب می توانید ستون ها را به صورت بصری تنظیم کنید.

فرض کنید می خواهید دو فیلد Name و Email را در کنار هم قرار دهید. با همان روشی که در بالا گفته شد، گزینه زیر را انتخاب کنید:

خانه اول آن را انتخاب کنید. پس از انجام این کار، فیلد دوم را انتخاب کرده و همین کار را انجام دهید اما به جای آن خانه دوم را انتخاب کنید.

به این ترتیب CSS مناسب به فیلدها اضافه می شود. بنابراین وقتی فرم خود را منتشر می کنید طرح صحیحی دارد.

جمع بندی

افزونه Contact Form 7 و افزونه WPForms هر دو از بهترین افزونه های فرم ساز وردپرس هستند که امکان ساخت انواع فرم ها را به شما می دهند. اما قرار دادن فیلدهای فرم تماس در کنار هم نیاز به انجام برخی ترفندها دارد که در این مقاله به آموزش آنها می پردازیم.

امیدواریم این آموزش مورد توجه و استفاده شما قرار گرفته باشد.