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

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

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

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

آموزش کنار هم قرار دادن Contact Form7

در حالت عادی، افزونه فرم تماس 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 را در سایت خود نصب و فعال سازی کنید. بعد از اینکه این دو افزونه را نصب کردید، تنها کاری که باید انجام دهید این است که در پیشخوان وردپرس به مسیر فرم تماس » فرم های تماس رفته و فرم تماس مورد نظر خود را به حالت ویرایش باز کنید؛ یا یک فرم تماس جدید بسازید.

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

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

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

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

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

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

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

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

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

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

سخن پایانی

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