خوش آمدید به انجمن ای فری

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

درخواست راهنمایی

اگر نیاز به راهنمایی دارید درخواست خود را ثبت کنید

فروشگاه

قالب و افزونه و محصولات خود را میتوانید اینجا خرید و فروش کنید

دانلود منابع

قالب و افزونه های جدید و بروز را میتوایند از اینجا دانلود کنید

WALKER

مدیر کل انجمن
عضویت
11/13/18
ارسال ها
6,100
امتیاز واکنش
5,500
محل سکونت
tehran
آنتی ویروس
2730

افزودن فرم تماس بصورت پاپ آپ در وردپرس

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

گام 0: شروع
برای این آموزش نیاز به نصب دو افزونه دارید:

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

گام 1: ایجاد فرم تماس با استفاده از WPForms

ابتدا نیاز به ایجاد یک فرم تماس جدید با WPForms دارید.اگر یک فرم تماس ایجاد کردید پس میتوانید از این مرحله بگذرید. روی منوی WPForms در نوار بخش مدیریت کلیک کرده و سپس روی گزینه Add New کلیک کنید.

2731

با این کار فرم راه اندازی میشود. برای فرم خود یک نام در بخش Contact Us انتخاب کرده و برای ادامه دادن روی قالب Simple Contact Form کلیک کنید.

2732

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

2733

هنگامیکه انجام دادید نیاز دارید روی دکمه save برای ذخیره تغییرات کلیک کنید. هم اکنون فرم تماس شما آماده است. باید به صفحه WPForms » All Forms بروید،در آنجا لیست فرم تماس خود را خواهید یافت در کنار آن یک کد کوتاه نیز میبینید. شما این کد را در گام بعدی نیاز دارید.

2734

کام 2: ایجاد پاپ آپ با استفاده از OptinMonster

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

2735

این کار شما را به وب سایت OptinMonster میبرد جاییکه میخواهید پنجره جدید ایجاد کنید. باید یک نام برای کمپین خود در نظر بگیرید و میتوانید به دلخواه خود نام انتخاب کنید بعنوان مثال :”فرم تماس با ما”

2736

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

2737

در زیر تب طراحی میتوانید عرض و ارتفاع بوم را تعیین کنید. در زیر جعبه 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 از تنظیمات در طول کوکی متوقف میشود.


2738

همچنین نیاز دارید Optin Success Message را تغییر دهید. بطور پیش فرض از کاربران برای ثبت نام تشکر میکند اما از آن در فرم تماس استفاده میکنیم. میتوانید پیام تشکر از کاربر را تغییر دهید. از آنجا که پنجره فقط زمانیکه کاربر روی لینک کلیک میکند ظاهر میشود باید گیره دستی را فعال کنیم. گزینه Load on Manual Trigger را چک کنید.

2739

برای ذخیره تنظیمات روی گزینه Save کلیک کنید.

گام 3: افزودن پنجره در سایت وردپرس
به بخش مدیریت وردپرس خود برگشته و روی OptinMonster کلیک کنید. لیستی از گزینه های خود را خواهید دید. اگر گزینه ها را نمیبینید روی گزینه refresh optins کلیک کنید.

2740

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

2741

ابتدا نیاز دارید گزینه Enable optin on site و Load optin globally را تیک بزنید اگر این کار را انجام ندهید پنجره برای سایت شما ظاهر نمیشود. در پایین صفحه گزینه Parse content for shortcodes را میبینید اطمینان حاصل کنید که این گزینه تیک خورده در غیر اینصورت OptinMonster شرت کد درون پنجره را تجزیه نخواهد کرد.

2742

سپس نیاز دارید شرت کد را وارد کنید. این کد فرم تماس شماست. برای ذخیره تنظیمات روی گزینه save کلیک کنید.

افزودن لینک یا دکمه به گیره پنجره فرم تماس
ابتدا گزینه OptinMonster را انتخاب کرده و روی منوی OptinMonster در نوار کناری کلیک کنید در کنار گزینه خود یک optin مشاهده خواهید کرد.

2743

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

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

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

2744

میتوانید از این لینک در هر قسمت سایت وردپرس خود استفاده کنید. همچنین میتوانید آنرا به پست یا صفحه ی خود،ویدجت متن و حتی در قالب وردپرس خود اضافه کنید.
 
ارسال کننده موضوعات مشابه انجمن پاسخ ها تاریخ
maede مباحث و مشکلات افزودن ویجت به صفحه اصلی پشتیبانی زنفورو 0
maede آموزش افزودن ابزارک (تولبار) به ادیتور متن در چتروم پشتیبانی زنفورو 2
I مباحث و مشکلات افزودن فونت به ادیتور زنفورو پشتیبانی زنفورو 5
sslri آموزش افزودن ابزارک تب بندی jQuery به وردپرس آموزشهای وردپرس 0
WALKER آموزش افزودن ssl و https به سایت وردپرسی آموزشهای وردپرس 0
WALKER آموزش افزودن آیکون دلخواه به پست تایپ های سفارشی آموزشهای وردپرس 0
WALKER آموزش افزودن لینک سفارشی به نوار ابزار وردپرس آموزشهای وردپرس 0
WALKER آموزش افزودن اسکرول به بالا با استفاده از jQuery آموزشهای وردپرس 0
WALKER آموزش افزودن جستجوی باز شونده به قالب وردپرس آموزشهای وردپرس 0
WALKER آموزش افزودن شماره تلفن قابل کلیک به سایت آموزشهای وردپرس 0
WALKER دانلود JetGuten - Blocks Set Addon for Gutenberg Editor v1.1.2 افزونه افزودن قابلیت های جدید به گوتنبرگ افزونه های وردپرس 0
WALKER آموزش افزودن فرمت مجاز برای آپلود در رسانه وردپرس آموزشهای وردپرس 0
WALKER آموزش افزودن تگ Hreflang به وردپرس برای افزایش سئو آموزشهای وردپرس 0
WALKER آموزش افزودن شماره صفحات به وردپرس بدون افزونه آموزشهای وردپرس 0
WALKER آموزش غیر فعال شدن دکمه افزودن پرونده چند رسانه‌ای در وردپرس آموزشهای وردپرس 0
WALKER آموزش افزودن شبکه‌های اجتماعی به منو سایت وردپرس آموزشهای وردپرس 0
WALKER آموزش افزودن آیکون به منوهای وردپرس آموزشهای وردپرس 0
WALKER دانلود افزودن مطلب توسط کاربر در وردپرس WP User Frontend Pro Business - Ultimate Frontend Solution For WordPress v3.4.1 افزونه های وردپرس 16
WALKER آموزش افزودن نمودار تغییرات قیمت محصولات به ووکامرس آموزشهای وردپرس 0
WALKER آموزش کد افزودن تصویر شاخص مطالب در پنل مدیریت وردپرس آموزشهای وردپرس 0
WALKER دانلود افزونه افزودن فیلد دلخواه در ووکامرس WooCommerce Checkout Fields & Fees v7.7 افزونه های وردپرس 10
Magical اندروید دانلود Add Music to Voice Premium 1.7 - نرم افزار افزودن موزیک به صدای ضبط شده برای اندروید نرم افزارهای اندروید 0
Magical اندروید دانلود Add Audio to Video: Music Video Editor Pro 1.7 - نرم افزار افزودن موزیک به ویدیو برای اندروید نرم افزارهای اندروید 0
Magical اندروید دانلود PixelLab - Text on pictures 1.9.2 - نرم افزار افزودن متن روی تصاویر برای اندروید نرم افزارهای اندروید 0
Magical اندروید دانلود Phonto Pro - Text on Photos 1.7.19 - نرم افزار افزودن متن به تصاویر برای اندروید نرم افزارهای اندروید 0
sslri دانلود پلاگین فرم ساز حرفه ای با المنتور MetForm Pro v1.2.0 افزونه های وردپرس 0
maede شخصی سازی فرم ارتباط با ما زنفور پشتیبانی زنفورو 0
sslri دانلود اسکریپت فرم ورود و عضویت کاربران 321 Membership اسکریپت 0
م گرویتی فرم افزونه های وردپرس 3
WALKER دانلود Gravity Forms - WordPress Forms Plugin v2.4.21.6 | افزونه فرم ساز حرفه ای وردپرس افزونه های وردپرس 74
WALKER دانلود eForm - WordPress Form Builder v4.14.2 افزونه فرم ساز پیشرفته وردپرس افزونه های وردپرس 8
WALKER دانلود GravityView v2.9.3 - plugin for displaying forms Gravity Forms WordPress افزونه نمایش اطلاعات ورودی گراویتی فرم افزونه های وردپرس 23
WALKER دانلود ProjectHuddle v3.8.11 - Collaborative Projects and WordPress Feedback افزونه فرم ارسال نظرات وردپرس افزونه های وردپرس 15
M ساخت فرم در افزونه گراویتی فرم افزونه های وردپرس 4
WALKER دانلود CommentPress - Ajax Comments, Insert, Edit and Delete Comments for WP v2.7.0 افزونه وردپرس فرم نظرات حرفه ای افزونه های وردپرس 2
WALKER دانلود Modal Form - WordPress Plugin v1.0.2 افزونه ایجاد فرم تماس و خبرنامه برای وردپرس افزونه های وردپرس 0
WALKER دانلود Rocket Genius Gravity Forms WordPress Plugin v2.4.10.12 افزونه مکمل گراویتی فرم ثبت نام سریع افزونه های وردپرس 9
WALKER دانلود FormCraft - Premium WordPress Form Builder v3.8.24 | افزونه ساخت فرم های حرفه ای وردپرس افزونه های وردپرس 15
WALKER آموزش ساخت فرم حرفه ای در 60 ثانیه در وردپرس با Formidable Forms آموزشهای وردپرس 0
WALKER دانلود Formidable Forms Pro v4.07.01 + All Add-Ons | افزونه فرم ساز پیشرفته وردپرس افزونه های وردپرس 14
WALKER دانلود Modal Login Register Forgotten Wordpress Plugin v2.0.5 افزونه ایجاد فرم ورود و عضویت در وردپرس افزونه های وردپرس 2
WALKER دانلود ARForms - Wordpress Form Builder Plugin v4.2.1 فرم ساز حرفه ای وردپرس افزونه های وردپرس 8
WALKER دانلود Super Forms - Drag & Drop Form Builder v4.9.522 افزونه فرم ساز پیشرفته وردپرس افزونه های وردپرس 34
WALKER دانلود افزونه فرم ساز حرفه ای و پیشرفته وردپرس | NEX-Forms - The Ultimate WordPress Form Builder v7.6.1 افزونه های وردپرس 19
WALKER دانلود افزونه سفارش گیری و فرم ثبت سفارش وردپرس | WP Cost Estimation & Payment Forms Builder v9.713 افزونه های وردپرس 27
WALKER دانلود Quform - WordPress Form Builder v2.9.3 | فرم ساز پیشرفته وردپرس افزونه های وردپرس 4
B بهترین برنامه های تماس تصویری برای اندروید نرم افزارهای اندروید 0
sslri نرم افزار استخراج اطلاعات تماس از لینکدین Linkedin Lead Extractor v4.0.2101 Crack درخواست و دانلود نرم افزار 0
WALKER دانلود افزونه دکمه های تماس با ما All in One Support Button + Callback Request. WhatsApp, Messenger, Telegram, LiveChats v1.9.7 افزونه های وردپرس 20

موضوعات مشابه

shape1
shape2
shape3
shape4
shape7
shape8
بالا