افزودن فرم تماس بصورت پاپ آپ در وردپرس
اخیرا برخی کاربران در مورد اینکه آیا میتوانند به سایت وردپرس خود فرم تماس با ما اضافه کنند میپرسند. این یک روند معمولی در اغلب سایتها میباشد که وقتی کاربر روی فرم تماس با ما کلیک میکند به جای باز شدن صفحه ی جدید یک پنجره فرم تماس باز میشود. در این مقاله ما به شما روش افزودن پنجره فرم تماس به سایت وردپرس را آموزش میدهیم. همچنین به شما نشان میدهیم چگونه با کلیک روی دکمه یا لینک فقط پنجره پاپ آپ باز شود.
گام 0: شروع
برای این آموزش نیاز به نصب دو افزونه دارید:
ابتدا نیاز به افزونه OptinMonster’s pro که با فرم نوع Canvas می آید دارید. OptinMonster یک افزونه وردپرسی است. پس از آن نیاز به افزونه فرم تماس مانند WPForms، Gravity Forms و Contact Form 7 دارید. بخاطر این مقاله ما از نسخه های رایگان افزونه فرم تماس مانند WPForms Lite استفاده خواهیم کرد.فرض کنیم که هر دو افزونه را نصب کردید و فعال شدند.
گام 1: ایجاد فرم تماس با استفاده از WPForms
ابتدا نیاز به ایجاد یک فرم تماس جدید با WPForms دارید.اگر یک فرم تماس ایجاد کردید پس میتوانید از این مرحله بگذرید. روی منوی WPForms در نوار بخش مدیریت کلیک کرده و سپس روی گزینه Add New کلیک کنید.
با این کار فرم راه اندازی میشود. برای فرم خود یک نام در بخش Contact Us انتخاب کرده و برای ادامه دادن روی قالب Simple Contact Form کلیک کنید.
فرم ساز شما را به فیلد ویرایشگر میبرد. شما میتوانید فیلدها را از فرم حذف کنید یا به آن اضافه کنید یا آنرا براحتی با کشیدن و رها کردن مجددا تنظیم کنید.
هنگامیکه انجام دادید نیاز دارید روی دکمه save برای ذخیره تغییرات کلیک کنید. هم اکنون فرم تماس شما آماده است. باید به صفحه WPForms » All Forms بروید،در آنجا لیست فرم تماس خود را خواهید یافت در کنار آن یک کد کوتاه نیز میبینید. شما این کد را در گام بعدی نیاز دارید.
کام 2: ایجاد پاپ آپ با استفاده از OptinMonster
اولین کاری که باید انجام دهیم ایجاد یک پنجره ی معین با استفاده از OptinMonster است. نیاز به ایجاد یک گزینه جدید دارید که با کلیک روی OptinMonster در منوی مدیریت وردپرس ایجاد میشود و پس از آن روی گزینه Create New Optin کلیک کنید.
این کار شما را به وب سایت OptinMonster میبرد جاییکه میخواهید پنجره جدید ایجاد کنید. باید یک نام برای کمپین خود در نظر بگیرید و میتوانید به دلخواه خود نام انتخاب کنید بعنوان مثال :”فرم تماس با ما”
پس از آن باید وب سایت خود را از منوی پایین انتخاب کنید و روی گزینه Select Your Design کلیک کنید. OptinMonster به شما قالب های در دسترس را نشان میدهد که در حال حاضر تنها قالب تخته سفید در دسترس است،برای ادامه روی قالب کلیک کنید. با این کار به صفحه Optin Customizer خواهید آمد و متوجه میشوید که بوم نقاشی خالی است. پس میتوانید هر چیزی را که میخواهید مانند فرم ثبت نام،جعبه ای مانند فیسبوک،نظرسنجی را به آن اضافه کنید.
در زیر تب طراحی میتوانید عرض و ارتفاع بوم را تعیین کنید. در زیر جعبه Custom HTML شما کد فرم تماس خود را همراه با هرگونه HTML سفارشی که میخواهید وارد میکنید. در اینجا یک نمونه HTML برای آموزش قرار داده ایم.
HTML
<h3>سوالی دارید؟</h3>
<p class="tagline">از ما بپرسید تا به شما پاسخ دهیم!</p>
[wpforms id="119"]توجه کنید که کد کوتاه WP FORM در آن بخوبی جاساز شده است. اگر از فرم تماس دیگری استفاده میکنید براحتی کد فرم خود را جایگزین این کد کنید. پس از HTML سفارشی گزینه ای که باید وارد کنید custom CSS میباشد. در زیر جعبه custom CSS یک رشته از متن مانند html div#om-mw7pzo63ch6wpfzi را خواهید دید. این یک پیشوند CSS میباشد که در custom CSS استفاده خواهید کرد. در این قسمت CSS مورد استفاده برای ایجاد پنجره را میبینید:
CSS
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 را بعدا اضافه کنید. میتوانید از ابزار عنصر مرورگر خود برای پیدا کردن کلاسهای CSS و انتخابگرهایی که میخواهید برای هدف استفاده کنید و افزودن CSS سفارشی با ویرایش گزینه خود استفاده کنید. حال که بخش طراحی را انجام دادیم باید به تب پیکربندی برویم. Optin Cookie Duration و Optin Success Cookie Duration را به 0 تغییر دهید. با این کار OptinMonster از تنظیمات در طول کوکی متوقف میشود.
همچنین نیاز دارید Optin Success Message را تغییر دهید. بطور پیش فرض از کاربران برای ثبت نام تشکر میکند اما از آن در فرم تماس استفاده میکنیم. میتوانید پیام تشکر از کاربر را تغییر دهید. از آنجا که پنجره فقط زمانیکه کاربر روی لینک کلیک میکند ظاهر میشود باید گیره دستی را فعال کنیم. گزینه Load on Manual Trigger را چک کنید.
برای ذخیره تنظیمات روی گزینه Save کلیک کنید.
گام 3: افزودن پنجره در سایت وردپرس
به بخش مدیریت وردپرس خود برگشته و روی OptinMonster کلیک کنید. لیستی از گزینه های خود را خواهید دید. اگر گزینه ها را نمیبینید روی گزینه refresh optins کلیک کنید.
روی گزینه Edit output settings کلیک کنید با این کار به تنظیمات خروجی خواهید آمد.
ابتدا نیاز دارید گزینه Enable optin on site و Load optin globally را تیک بزنید اگر این کار را انجام ندهید پنجره برای سایت شما ظاهر نمیشود. در پایین صفحه گزینه Parse content for shortcodes را میبینید اطمینان حاصل کنید که این گزینه تیک خورده در غیر اینصورت OptinMonster شرت کد درون پنجره را تجزیه نخواهد کرد.
سپس نیاز دارید شرت کد را وارد کنید. این کد فرم تماس شماست. برای ذخیره تنظیمات روی گزینه save کلیک کنید.
افزودن لینک یا دکمه به گیره پنجره فرم تماس
ابتدا گزینه OptinMonster را انتخاب کرده و روی منوی OptinMonster در نوار کناری کلیک کنید در کنار گزینه خود یک optin مشاهده خواهید کرد.
یک صفحه جدید در وردپرس یا پست یا صفحه ای که میخواهید لینک پنجره فرم تماس را به آن اضافه کنید را ایجاد کنید. در ویرایشگر پست به ویرایشگر متن سوئیچ شوید و لینک پنجره را مانند زیر اضافه کنید:
<a href="#" class="manual-optin-trigger" data-optin-slug="mw7pzo63ch6wpfzi">contact us</a>
فراموش نکنید که data-optin-slug را با optin slug جایگزین کنید. تغییرات را ذخیره کنید و صفحه ی خود را ببینید. برای دیدن پنجره فرم تماس در عمل روی لینک کلیک کنید.
میتوانید از این لینک در هر قسمت سایت وردپرس خود استفاده کنید. همچنین میتوانید آنرا به پست یا صفحه ی خود،ویدجت متن و حتی در قالب وردپرس خود اضافه کنید.
