نحوه افزودن پنجره فرم تماس با ما در وردپرس

اگر به دستورالعمل های دقیق تری نیاز دارید ، راهنمای گام به گام ما را در نحوه ایجاد فرم تماس در وردپرس .

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

مرحله 2: ایجاد یک پنجره وردپرس با استفاده از OptinMonster

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

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

با این کار به وب سایت OptinMonster خواهید رفت و در آنجا پنجره بازشو را ایجاد می کنید. ابتدا باید عنوانی برای کمپین خود ارائه دهید. می توانید نام آن را هر چیزی که می خواهید بگذارید ، به عنوان مثال «پنجره فرم تماس با ما».

در مرحله بعدی باید وب سایت خود را از فهرست کشویی انتخاب کنید. بر روی گزینه Canvas در گزینه ‘Select Your Design’ کلیک کنید.

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

با این کار می توانید به صفحه Optin Customizer بروید. خواهید دید که Canvas از نظر طراحی خالی است. این روش به همین صورت انجام شده است ، بنابراین می توانید در هنگام استفاده از قدرت OptinMonster ، تقریباً هر آنچه را که می خواهید اضافه کنید. می توانید فرم ثبت نام را اضافه کنید ، عنوان = “نحوه افزودن Facebook Like Box / Fan Box در وردپرس”> فیس بوک مانند جعبه ، نظرسنجی ها ، کدهای کوپن یا مانند این که در این مثال فرم تماس را انجام می دهیم.

در زیر برگه طراحی می توانید عرض بوم را انتخاب کنید. به طور پیش فرض ، روی 700 350 350 پیکسل تنظیم شده است. بیایید حداقل ارتفاع را روی 520 تنظیم کنیم.

در زیر جعبه “HTML سفارشی” شما کد کوتاه فرم تماس خود را به همراه هر HTML سفارشی دیگری که می خواهید اضافه کنید وارد خواهید کرد.

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

 آیا س Quesالی دارید؟  h3>
 آیا می خواهید درباره خدمات ما بیشتر از ما بپرسید؟ به سادگی این فرم را پر کنید و ما در اسرع وقت به شما پاسخ خواهیم داد. 
[wpforms id = "119"]

توجه داشته باشید که ما کد کوتاه WPForms را نیز در آنجا جاسازی کرده ایم. اگر از فرم تماس دیگری استفاده می کنید ، کافیست کد کوتاه فرم تماس خود را جایگزین کنید.

بعد از HTML سفارشی ، گزینه بعدی این است که CSS سفارشی . در زیر کادر CSS سفارشی ، یک رشته متن تصادفی را مشاهده خواهید کرد که به نظر می رسد به این شکل html div # om-mw7pzo63ch6wpfzi . این پیشوند CSS است که در CSS سفارشی خود استفاده خواهید کرد.

در اینجا CSS مورد استفاده ما برای ایجاد پنجره بازشو مودال برای این آموزش وجود دارد.

html div # om-mw7pzo63ch6wpfzi div # om-canvas-whiteboard-optin {
background-color: # f8f8f8؛
}
html div # om-mw7pzo63ch6wpfzi h3 {
text-align: مرکز؛
}
html div # om-mw7pzo63ch6wpfzi .tagline {
نوع قلم: مورب؛
}
html div # om-mw7pzo63ch6wpfzi .wpforms-container-full .wpforms-form .wpforms-field {کامل
    بالشتک: 10px 0؛
    روشن: هر دو؛
}
html div # om-mw7pzo63ch6wpfzi .wpforms-container-full .wpforms-form .wpforms-field-label {پر)
    نمایش: بلوک؛
    وزن قلم: 700؛
    اندازه قلم: 16px؛
    شناور: هیچ؛
    ارتفاع خط: 1.3؛
    حاشیه: 0 0 4px 0؛
    بالشتک: 0؛
    }

html div # om-mw7pzo63ch6wpfzi .wpforms-container-full .wpforms-form .wpforms-field-hp {
    نمایش: هیچکدام! مهم؛
    موقعیت: مطلق! مهم؛
    سمت چپ: -9000 پیکسل! مهم؛
}
    

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

اکنون که قسمت طراحی به پایان رسید. بیایید به برگه پیکربندی در سفارشی ساز برویم.

هر دو “مدت زمان کوکی Optin” و “مدت زمان کوکی موفقیت Optin” را به 0 تغییر دهید. این امر از تنظیم کوکی مدت زمان OptinMonster جلوگیری می کند.

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

از آنجا که پنجره بازشو فقط با کلیک کاربر بر روی پیوند یا دکمه ظاهر می شود ، این بدان معناست که ما باید فعال کننده دستی را فعال کنیم. کادر زیر گزینه “بارگیری در راه اندازی دستی؟” را علامت بزنید.

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

مرحله 3: افزودن پنجره بازشو در سایت وردپرس خود h4>

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

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

 با ما تماس بگیرید