خانه / سیستمهای مدیریت محتوا / وردپرس / چگونه یک popup فرم ارتباطی در وردپرس ایجاد کنیم

چگونه یک popup فرم ارتباطی در وردپرس ایجاد کنیم

این کار یعنی درست کردن یک popup فرم ارتباطی تبدیل به یک رویه در بسیاری از وب سایت ها شده است که باعث می شود کاربر برای پر کردن فرم مخاطب در یک صفحه جدید، با کلیک بر روی دکمه ارتباط یک popup برای او باز شود و فرم را پر کند. در این مقاله به شما آموزش می دهیم که چگونه این popup فرم ارتباطی را در وردپرس ایجاد کنید که تقریبا با همه پلاگین های فرم ارتباطی تطابق دارد. ما همچنین به شما نشان می دهیم که چه کنید تا مطمئن شوید هنگامی که مخاطب بر روی یک لینک یا دکمه کلیک می کند فقط popup بالا بیابید تا تجربه کاربری بهتری داشته باشد.

 

قدم صفرم: شروع کار

برای این آموزش شما نیاز دارید تا دو پلاگین را نصب و فعال کنید.

ابتدا پلاگین OptinMonster pro را که فرم نوع Canvas دارد را نصب و فعال کنید. OptinMonster یکی از بهترین پلاگین های popup در وردپرس است.سپس یک پلاگین برای فرم ارتباطی مانند WPForms، Gravity Forms، Contact Form 7 و غیره را نصب کنید. برای این آموزش ما از نسخه رایگان پلاگین WPForms یعنی WPForms Lite استفاده می کنیم.

ما فرض را بر این گذاشته ایم که شما هر دوی پلاگین ها را نصب و فعال کرده اید. حال به سراغ این برویم که چگونه باید یک فرم ارتباطی در وردپرس بسازیم.

قدم اول: ساخت یک فرم ارتباطی با استفاده از WPForms

در ابتدا باید یک فرم ارتباطی جدید با استفاده از پلاگین WPForms بسازید. اگر تاکنون یک فرم ارتباطی با WPForms ساخته اید می توانید از این قدم گذر کنید.

بر روی منوی WPForms در نوار کناری محیط ادمین وردپرس خود کلیک کنید و سپس بر روی دگمه Add New کلیک کنید.

این کار یک سازنده فرم را بالا می آورد. یک نام برای فرم خود انتخاب کنید برای مثال “Contact Us” و سپس بر روی فالب Simple Contact Form کلیک کنید تا کار ادامه یابد.

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

بعد از این که این کارها را انجام دادید بر روی دکمه ذخیره کلیک کنید تا تغییرات را ذخیره کنید. فرم ارتباطی شما اکنون آماده است.

شما باید به صفحه WPForms » All Forms سر بزنید. شما می توانید فرم ارتباطی خود را ببینید که در آنجا فهرست شده است. در کنار آن می توانید یک کد ببینید. شما به این کد برای قدم بعدی نیاز دارید.

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

قدم دوم: ساختن یک popup در وردپرس با استفاده از OptinMonster

اولین کاری که باید انجام دهیم این است که یک popup مدل با استفاده از OptinMonster بسازیم. شما باید یک optin جدید بسازید با انجام کلیک بر روی OptinMonster در منوی ادمین وردپرس و سپس بر روی دکمه Create New Optin کلیک کنید.

این کلیک شما را به وب سایت OptinMonster می برد که در آنجا می توانید popup خود را بسازید. اولین کاری که باید انجام دهید که یک عنوان برای کار خود انتخاب کنید. شما می توانید آن را هر چیزی بنامید برای مثال “Contact Form popup”.

سپس باید وب سایت خود را در منوی کشویی انتخاب کنید. در زیر گزینه Select Your Design بر روی Canvas کلیک کنید.

OptinMonster قالب های در دسترس را به شما نشان می دهد. در حال حاضر فقط قالب وایت برد (Whiteboard) برای Canvas در دسترس است. بر روی قالب کلیک کنید تا کار ادامه یابد.

این کلیک یک صفحه شخصی سازی optin یا Optin Customizer بالا می آورد. شما خواهید دید که Canvas در طراحی خالی است. این موضوع علت دارد و شما می توانید تقریبا هر چیزی که می خواهید اضافه کنید تا از قدرت OptinMonster استفاده کنید. شما می توانید یک فرم ثبت نام، فیسبوک، نظرسنجی ها، کدهای کوپن و تخفیف و یا چیزهای دیگر اضافه کنید.

در زیر تب طراحی شما می توانید عرض و ارتفاع canvas خود را انتخاب کنید. به صورت پیش فرض این ارقام بر روی ۷۰۰ در ۳۵۰ پیکسل تنظیم شده است. بگذارید ارتفاع را حداقل در ۵۲۰ پیکسل تنظیم کنیم.

در زیر باکس Custom HTML شما کد فرم ارتباطی خود را با هر HTML که ممکن است بخواهید، وارد می کنید.

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

۱ <h3>Do You Have Any Questions?</h3>

۲ <p class=”tagline”>Want to ask us more about our services? Simply fill out this form and we will get back to you as soon as possible. </p>

۳ [wpforms id=”119″]

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

بعد از HTML شخصی، گزینه بعدی این است که CSS شخصی خود را وارد کنید. زیر باکس CSS شخصی شما می توانید یک رشته ای از متن های تصادفی مانند زیر ببنید:

html div#om-mw7pzo63ch6wpfzi

این یک پیشوند CSS است که شما در CSS شخصی خود استفاده خواهید کرد. در اینجا CSS که ما برای ساخت یک popup نمونه برای این آموزش استفاده کرده ایم نشان داده شده است:

۰۱ html div#om-mw7pzo63ch6wpfzi div#om-canvas-whiteboard-optin {

۰۲ background-color:#f8f8f8;

۰۳ }

۰۴ html div#om-mw7pzo63ch6wpfzi h3 {

۰۵ text-align:center;

۰۶ }

۰۷ html div#om-mw7pzo63ch6wpfzi .tagline {

۰۸ font-style:italic;

۰۹ }

۱۰ html div#om-mw7pzo63ch6wpfzi .wpforms-container-full .wpforms-form .wpforms-field {

۱۱     padding: 10px 0;

۱۲     clear: both;

۱۳ }

۱۴ html div#om-mw7pzo63ch6wpfzi .wpforms-container-full .wpforms-form .wpforms-field-label {

۱۵     display: block;

۱۶     font-weight: 700;

۱۷     font-size: 16px;

۱۸     float: none;

۱۹     line-height: 1.3;

۲۰     margin: 0 0 4px 0;

۲۱     padding: 0;

۲۲     }

۲۳

۲۴ html div#om-mw7pzo63ch6wpfzi .wpforms-container-full .wpforms-form .wpforms-field-hp {

۲۵     display: none !important;

۲۶     position: absolute !important;

۲۷     left: -9000px !important;

۲۸ }

۲۹

نگران نشوید اگر الان نمی توانید پیش نمایش را ببینید، شما می توانید CSS خود را بعدا تنظیم کنید. شما قادر خواهید بود که از ابزار Inspect Element مرورگرتان استفاده کنید تا بفهمید که کدام کلاس ها و انتخاب گر های CSS را می خواهید هدف قرار دهید و css شخصی را با ویرایش optin شما اضافه کنید.

حالا بخش طراحی ما تمام شده است. حال به تب تنظیمات در شخصی ساز کننده می رویم.

هر دو مقدار “Optin Cookie Duration” و “Optin Success Cookie Duration” را صفر قرار دهید. این کار باعث می شود OptinMonster دیگر cookie مدت دار تنظیم نکند.

شما همچنین باید Optin Success Message را تغییر دهید. به صورت پیش فرض این کار از کاربران برای ثبت نام تشکر می کند، اما ما از آن در یک فرم ارتباطی استفاده می کنیم. شما باید پیام موفقیت در ثبت نام را با یک پیام تشکر از کاربران برای ارتباط با شما عوض کنید.

به علت این که popup ما تنها هنگامی ظاهر می شود که کاربر بر روی یک لینک یا یک دکمه کلیک کند، این به این معناست که ما باید نشانگر دستی را فعال کنیم. باکس کنار گزینه Load on Manual Trigger را فعال کنید.

بر روی دکمه Save کلیک کنید تا تنظیمات optin ذخیره شود و سپس بر روی دکمه خروج کلیک کنید تا از شخصی ساز خارج شوید.

قدم سوم: اضافه کردن popup به وب سایت وردپرس شما

به محیط ادمین وردپرس خود بازگردید و بر روی OptinMonster کلیک کنید. شما فهرستی از optin ها را در آن جا می بینید. اگر optin خود را در آن جا نمی بینید، بر روی دگمه refresh optins کلیک کنید.

بر روی لینک Edit output settings زیر optin هایتان کلیک کنید. این لینک تنظیمات خروجی popup را برای شما بالا می آورد.

در ابتدا شما باید باکس کنار Enable optin on site و Load optin globally را تیک بزنید. اگر این باکس ها را تیک نزنید، popup در سایت شما ظاهر نمی شود.

به پایین صفحه بیایید تا گزینه Parse content for shortcodes را ببینید. مطمئن شوید که تیک خورده باشد، در غیر این صورت OptinMonster کدها را داخل popup شما وارد نمی کند.

سپس باید کدی که شما در داخل popup شما وجود داشت را وارد کنید. این کد فرم ارتباطی شماست. بر روی save settings کلیک کنید تا تغییرات ذخیره شود.

اضافه کردن لینک یا دکمه برای اشاره کردن و بالا آمدن popup فرم ارتباطی

اولین چیزی که نیاز دارید کد خاص optin پلاگین OptinMonster شماست. بر روی آیکون OptinMonster در نوار کناری وردپرس کلیک کنید. شما این کد را در کنار عنوان optin خواهید دید.

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

۱ <a href=”#” class=”manual-optin-trigger” data-optin-slug=”mw7pzo63ch6wpfzi”>contact us</a>

فراموش نکنید که کد مخصوص خود را به جای عبارت data-optin-slug بگذارید.

تغییرات خود را ذخیره کنید و صفحه یا پست خود را بازدید کنید. بر روی لینک کلیک کنید تا در عمل، عملکرد popup را ببینید.

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

تمام! امیدواریم این مقاله به شما در بالا بردن ارتباطتان با مخاطبان توسط popup فرم ارتباطی کمک کرده باشد.

 

منبع

مطلب پیشنهادی

چگونه مهلت نظر دادن در وردپرس را برای بعضی پست ها تغییر دهیم

یکی از راه حل هایی که اغلب اوقات برای کاهش میزان نظرات اسپم پیشنهاد می …

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *