فرم بازخورد آژاکس در یک پنجره معین. پنجره پاپ آپ برای وردپرس

اخیراً، برای یک سایت، از من خواسته شد که یک فرم بازخورد برای وردپرس در یک پنجره مودال ایجاد کنم. یعنی هنگام کلیک بر روی پیوند "نوشتن برای ما" به جای رفتن به صفحه مربوطه، کاربر باید یک پنجره پاپ آپ جدید باز کند که عملکرد ارسال پیام در آن قرار دارد. این یک راه حل تعاملی تر است، اگرچه همه آن را دوست ندارند. من شخصاً اجرای کلاسیک را با صفحه تماس ترجیح می دهم ، اما فرم های موجود در سایت ها متفاوت است - بنابراین در نظر گرفتن راه حل برای این مشکل مفید خواهد بود. در کارم از 2 افزونه استفاده کردم: فرم تماس معروف 7 و ماژول Easy Modal برای ایجاد یک پنجره مودال در وردپرس.

به روز رسانی 2017/05/18: با قضاوت بر اساس آخرین بررسی های موجود در مخزن، در برخی موارد ممکن است مشکلاتی در عملکرد آن وجود داشته باشد. اگر شما نیز تحت تأثیر این موضوع هستید، راه حل جدیدی از توسعه دهندگان به نام Popup Maker را امتحان کنید. می توان جایگزین دیگری را در نظر گرفت.

من به جزئیات در مورد نصب و پیکربندی فرم تماس 7 نمی پردازم؛ تمام اطلاعات مربوط به آن در اینجا است. این وبلاگ همچنین مقاله ای در مورد آنچه ممکن است مفید باشد داشت.

بیایید مستقیماً به ماژول Easy Modal برویم. او را خواهید یافت. توسعه دهندگان ادعا می کنند که این بهترین راه حل برای ایجاد پنجره های مدال در یک وب سایت با گزینه های مختلف جالب برای ارائه محتوا است.

بیش از 10 هزار بارگیری، امتیاز 4.6. نسخه های معتبر 3.4 4.0.8 هستند، اگرچه من آن را با موفقیت در WP 4.3.1 اجرا کردم. علیرغم این واقعیت که افزونه اکنون به یک راه حل جدید Popup Maker تبدیل شده است، در وب سایت wordpress.org و هنگام جستجوی افزونه ها در داخل پنل مدیریت، همچنان می توانید نسخه معمولی Easy Modal 2.0.17 را پیدا کنید. با استفاده از مثال او، در مورد ایجاد یک پنجره بازخورد مودال در وردپرس به شما خواهم گفت.

پس از نصب، بخشی به همین نام ظاهر می شود که در آن چندین مورد وجود دارد. ما به اولین آنها نیاز خواهیم داشت - Modals. در آنجا روی دکمه افزودن جدید کلیک کنید.

این عمل یک پنجره مودال جدید برای سایت وردپرس شما ایجاد می کند. تنظیمات عنصر دارای 4 تب خواهد بود:

• پارامترهای عمومی - عمومی
• گزینه های نمایش - گزینه های نمایش.
• بستن گزینه ها - تنظیمات برای بستن پنجره (با استفاده از یک کلیک یا دکمه Esc).
• مثال ها - نمونه هایی از کد برای استفاده.

تنظیمات عمومی شامل نام پنجره (در سایت نمایش داده نمی شود)، عنوان، محتوا و نوع دانلود آن است. در بلوک محتوا، با تغییر به حالت HTML، کد کوتاه فرم بازخورد خود را در پنجره مودال اضافه کنید.

نوع بار 2 گزینه دارد:

• بارگذاری Sitewide (برای کل سایت).
• در هر صفحه/پست (برای پست ها و صفحات خاص).

یک گزینه بسیار جالب. اگر به یک پنجره پاپ آپ نیاز دارید که در تمام صفحات سایت نمایش داده شود (مثلاً لینک در نوار کناری قرار دارد)، گزینه اول را انتخاب کنید. در حالت دوم، بلوک تنظیمات مربوطه هنگام ویرایش در صفحات/پست های سایت ظاهر می شود:

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

تب دوم پارامترهای ماژول گزینه های نمایش است.

در اینجا شما نشان می دهید:

• اندازه پنجره - اتوماتیک، متوسط، تطبیقی، کوچک، بزرگ و غیره؛
• پس زمینه - می توانید از پس زمینه برای فرم استفاده کنید یا آن را بدون آن نمایش دهید.
• انیمیشن پنجره پاپ آپ؛
• موقعیت (موقعیت) - مرکز بالا، پایین سمت راست و غیره؛ ثابت یا خیر؛
• تورفتگی در بالای صفحه نمایش

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

شما باید این کد را از طریق یک ویجت در نوار کناری یا در یک ویرایشگر متن وارد کنید. این هیچ تفاوتی با کدهای HTML دیگر ندارد، تنها چیزی که وجود دارد این است که کلاس یک پنجره معین خاص (eModal-1) در اینجا نشان داده شده است. برای عنصر دومی که ایجاد کردید، کلاس eModal-2 و غیره خواهد بود. برای جلوگیری از اشتباه در درج کد، ساده ترین راه این است که آن را از این صفحه کپی کنید.

ویرایش تم یک پنجره مودال

در افزونه Easy Modal علاوه بر تنظیمات یک عنصر خاص، می توانید تم هایی را برای پنجره های پاپ آپ (Theme) تعریف کنید. نسخه رایگان اصلی ماژول فقط یک الگو دارد، اما این بیش از حد کافی است.

این ابزار دارای 6 تب است:

• عمومی - نام موضوع را مشخص کنید.
• پوشش - پس زمینه (در اینجا می توانید رنگ و شفافیت پس زمینه فرم را انتخاب کنید).
• کانتینر - تنظیمات مختلف خود پنجره مودال (بالشتک، قاب، سایه)؛
• عنوان - پارامترهای عنوان پنجره بازشو (فونت، سایه).
• محتوا - فونت و رنگ متون در بلوک.
• Close - عنصر بسته شدن فرم (متن و طرح).

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

پس از تنظیم تمام تنظیمات، فراموش نکنید که آنها را ذخیره کنید (دکمه ذخیره را کلیک کنید).

ویدئوی افزودن فرم تماس 7 در پاپ آپ Easy Modal

به هر حال، من یک ویدیو در مورد کار با افزونه Easy Modal پیدا کردم که روند ایجاد یک پنجره بازخورد مودال در وردپرس را نشان می دهد. در آنجا، رابط ماژول کمی قدیمی است (بعضی از تنظیمات متفاوت به نظر می رسند)، اما می توانید ماهیت کلی را دریافت کنید. شاید درک این موضوع با کمک یک ویدیو برای کسی آسانتر باشد.

مجموع در مورد ویندوزهای مودال برای وردپرس

همانطور که در بالا ذکر شد، اکنون افزونه Easy Modal (با قضاوت در صفحه رسمی) به Popup Maker تبدیل شده است. من موفق شدم ماژولی به همین نام را در مخزن پیدا کنم، اما آن را آزمایش نکردم. من در این مورد به شما می گویم تا بدانید اگر Easy Modal در وردپرس در نسخه های بعدی به طور ناگهانی از کار افتاد به دنبال چه چیزی باشید.

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

در مورد وظیفه باز کردن فرم بازخورد فرم تماس ۷ در یک پنجره پاپ آپ، قابلیت های اساسی Easy Modal کافی است. علاوه بر این، این راه حل همچنین می تواند برای نمایش سایر پنجره های مودال در وردپرس - نکات مفید، اطلاعات اضافی و غیره استفاده شود. با توجه به وجود ویرایشگر برای درج کد HTML، می توانید فیلم ها، فرم ها و غیره را در پنجره پاپ آپ نمایش دهید. به طور کلی، یک افزونه مفید. اگر سوالی در مورد آن دارید، در نظرات بنویسید.

افزونه های وردپرس زیادی برای ایجاد فرم های تماس در وبلاگ یا وب سایت شما وجود دارد. مهم‌تر از همه، این امکان را به شما می‌دهد که یک فرم تماس را مستقیماً در پست‌ها و صفحات وردپرس جاسازی کنید (در حالی که بسیاری از افزونه‌ها شما را مجبور می‌کنند یک قالب سفارشی را روی صفحه اعمال کنید و در نتیجه ویرایش آن را محدود کنید).

جاسازی فرم در صفحه معمولاً کافی است، اما اگر بخواهید زمانی که کاربر روی پیوند تماس با ما کلیک می‌کند، فرم در یک پنجره ظاهر شود چه؟ برای تحقق این خواسته، باید از دو افزونه وردپرس به طور همزمان استفاده کنید: Easy FancyBox

1. اول از همه افزونه ها و Easy FancyBox را نصب کنید.

2. برای سادگی، ما از فرم تماس 7 که قبلاً توسط خود افزونه در حین نصب ایجاد شده است، برای مثال استفاده خواهیم کرد. در صفحه تنظیمات فرم تماس، کد فرم را بگیرید که باید آن را کپی کرده و در ویرایشگر وردپرس برای ایجاد فرم جایگذاری کنید.

3. یک صفحه جدید در وردپرس ایجاد کنید. برای افزودن یک فرم تماس، باید کد را در پرانتز مربع از صفحه تنظیمات فرم تماس 7 در صفحه خود جایگذاری کنید. اطمینان حاصل کنید که کد را به درستی، دقیقاً همانطور که افزونه نمایش می دهد، قرار دهید.

4. اکنون وردپرس شما یک فرم تماس دارد. ما تصمیم گرفتیم پس از کلیک کاربر روی پیوند، آن را در یک پنجره مودال بالا بیاوریم. افزونه Easy FancyBox وارد عمل می شود. با کمک آن، می توانید هر عنصر صفحه را در یک پاپ آپ ظاهر کنید. ویرایش صفحه را باز کنید، روی تب TEXT کلیک کنید و کد HTML زیر را اضافه کنید:

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

5. همین، اکنون پیوندی داریم که فرم تماس را در یک پنجره بازشو "راه اندازی" می کند. تبریک می گویم! احتمالاً باید CSS فرم‌های ایمیل را تنظیم کنید تا عرض و ارتفاع صحیح و همچنین پیام‌هایی درباره خطاهای احتمالی هنگام پر کردن نمایش داده شود. این باید برای شروع کافی باشد.

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

من فکر می کنم موارد مشابه زیادی در اینترنت وجود دارد، اما از آنجایی که مردم می پرسند، تصمیم گرفتم این کار را انجام دهم. علاوه بر این، چنین عملکردی باید تقریباً در هر صفحه فرود وجود داشته باشد تا دکمه بازگشت تماس را اجرا کند. و در واقع، اکنون بیشتر و بیشتر نتایج آزمایش AB وجود دارد که نشان می‌دهد فرم‌های باز بدتر از آن‌هایی هستند که در یک پنجره مدال پنهان شده و پس از کلیک کردن روی یک دکمه باز می‌شوند.

برخی استدلال می کنند که این به دلیل این واقعیت است که مردم به آرامی در حال "توسعه مصونیت" هستند و شکل باز یک فروش تهاجمی است. ظاهراً اکنون زمانی است که کاربر با دیدن یک فرم باز فکر می کند که سعی دارد چیزی را به او "فروش" کند. من کاملاً با این نظریه موافق نیستم، اما ذره ای از حقیقت وجود دارد. این ممکن است در برخی از انواع کسب و کار صادق باشد. خب حالا بیایید به پیاده سازی فرم بپردازیم.

توجه داشته باشید! من هر عمل را با جزئیات شرح نمی دهم، اما یک نسخه آماده را در کد منبع به شما پیشنهاد می کنم. اگر سوالی دارید در نظرات بنویسید. متوجه میشیم :)

امروز نه با jQuery، بلکه با چیدمان دکمه و فرم شروع می کنیم. ما تمام اسکریپت ها را در انتهای صفحه قرار خواهیم داد.

دکمه ای که با کلیک روی آن، یک پنجره مودال باز می شود:

درخواست خود را ارسال کنید

شما می توانید هر کلاسی را تنظیم کنید، اما در href بنویسید #modal - این شناسه ظرف با سایه و یک فرم تماس خواهد بود.

حالا کد فرم و بلوکی که فرم روی آن قرار خواهد گرفت را می دهم:

مشخصات تماس خود را بگذارید و مشاور ما با شما تماس خواهد گرفت من این فرم را برای وب سایت خود می خواهم

بعد از اضافه کردن استایل ها به این شکل به نظر می رسید:

برای ایجاد یک پنجره مودال از کتابخانه Remodal استفاده شد. این مجموعه ای از فایل های css و js است که فقط برای ایجاد پنجره های مودال متحرک می باشد. می توانید آن را از لینک یا با ویرایش های من در انتهای مقاله دانلود کنید.

ما بین تگ های head استایل ها را اضافه می کنیم:

و قبل از بسته شدن تگ بدنه، اسکریپت ها را اضافه کنید:

Script.js یک اسکریپت برای پردازش فرم است. همان Ajax که به ما امکان می‌دهد کل فرآیند را بدون بارگیری مجدد صفحه انجام دهیم:

$(document).ready(function () ($("form").submit(function () ( // شناسه فرم را دریافت کنید var formID = $(this).attr("id"); // یک هش اضافه کنید به نام شناسه var formNm = $("#" + formID)؛ $.ajax((نوع: "POST"، آدرس: "mail.php"، داده: formNm.serialize()، موفقیت: تابع (داده) ( // خروجی متن نتیجه ارسال $(formNm).html(data); ), error: function (jqXHR, text, error) ( // خروجی متن خطای ارسال $(formNm).html(error); ))))؛ بازگشت نادرست؛ ) ) ))؛

من کد منبع css و js را از فایل های مسئول پنجره modal و فرم ارائه نمی کنم، زیرا آنها بسیار بزرگ هستند. اگر چنین است، به منبع نگاه کنید. اما کنترل کننده PHP تا حد زیادی استاندارد است (اگر بتوانم بگویم):

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

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

بچه ها خواهش میکنم فرم رو روی سرور واقعی یا مجازی (هاست) تست کنید. لطفا مطمئن شوید که سرور شما از PHP پشتیبانی می کند، شما یک برنامه پولی دارید و نه یک دوره آزمایشی. در غیر این صورت در 90 درصد موارد فرم کار نمی کند.

اگر فقط فایل فهرست را در مرورگر خود باز کرده اید و روی دکمه "ارسال" کلیک کرده اید، انتظار نامه ای در صندوق ورودی خود نداشته باشید. Php یک زبان سمت سرور است!

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

نسخه به روز شده مقاله قرار دارد

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

چرا به فرم تماس وردپرس نیاز دارید؟

شاید از خود بپرسید که چرا برای یک سایت وردپرسی به فرم بازخورد نیاز دارم؟ چرا فقط یک آدرس ایمیل به سایت اضافه نمی کنید تا مردم بتوانند فقط برای من بنویسند؟

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

در زیر 3 دلیل اصلی وجود دارد که چرا استفاده از فرم بهتر از افزودن آدرس ایمیل به سایت است.

• – ربات‌های هرزنامه با نظم رشک‌آمیز از تجزیه‌کننده‌های خود برای انتخاب آدرس‌های ایمیل که در آن نام دامنه ایمیل وجود دارد استفاده می‌کنند و آن را به پایگاه داده خود اضافه می‌کنند تا سپس مکاتبات ناخواسته را برای شما ارسال کنند. از طرف دیگر، هنگام استفاده از فرم بازخورد برای وردپرس، از مشکل ایمیل های اسپم که صندوق پستی شما را تحت تاثیر قرار می دهند خلاص می شوید.
• کامل بودن اطلاعات - هنگام ارسال نامه، مردم همیشه تمام اطلاعات مورد نیاز شما را ارسال نمی کنند. با یک فرم تماس، شما تصمیم می گیرید که به کدام فیلدها نیاز دارید تا ارسال ایمیل برای کاربران آسان تر شود (نام، ایمیل، شماره تلفن، نظر و موارد دیگر).
• صرفه جویی در زمان - فرم تماس وردپرس به شما در صرفه جویی در زمان کمک می کند. علاوه بر کامل بودن اطلاعاتی که از کاربر درخواست کرده‌اید و برای شما ارسال می‌کند، همچنین می‌توانید مواردی را که در مرحله بعد در انتظار شماست، به‌عنوان مثال «برنامه شما ظرف 24 ساعت بررسی می‌شود» یا تماشای ویدیو را مشخص کنید. و خیلی چیزهای مفید دیگر

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

شروع کنیم، آقایان.

مرحله 1: انتخاب بهترین افزونه فرم تماس برای وردپرس

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

در زیر دلایلی وجود دارد که WPForms بهترین افزونه بازخورد است:

اولاً، این افزونه مبتدی‌پسندترین افزونه است. به سادگی با کشیدن و رها کردن بلوک های مورد نیاز، می توانید یک فرم تماس با چند کلیک ایجاد کنید.

WPForms Lite کاملا رایگان است.

وقتی برای عملکرد قدرتمندتر آماده هستید و اگر واقعا برای شما مهم است، می توانید به نسخه Pro ارتقا دهید.

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

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

برای این آموزش ما از نسخه Lite استفاده می کنیم زیرا استفاده از آن رایگان و آسان است. با ورود به وبلاگ و رفتن به پلاگین - افزودن جدید می توانید آن را نصب کنید.

در نوار جستجو، نام افزونه ما را تایپ کنید و روی Install now کلیک کنید.

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

مرحله 3: یک فرم تماس در وردپرس ایجاد کنید

بنابراین، پس از انجام موفقیت آمیز فعال سازی افزونه، نوبت به ایجاد فرم بازخورد می رسد. برای این کار در پنل مدیریت وبلاگ، روی تب WPForms Menu کلیک کرده و به Add New بروید.

این به شما امکان می دهد طراح Wpforms را باز کنید، جایی که به سادگی با کشیدن و رها کردن بلوک های لازم می توانید یک فرم تماس با بازخورد وردپرس ایجاد کنید. نسخه Lite رایگان با دو قالب از پیش ساخته شده (فرم خالی و ساده) ارائه می شود. می توانید از آنها برای ایجاد موردی که نیاز دارید و برای شما راحت است استفاده کنید. در این مثال گزینه دوم یعنی فرم تماس ساده را برای شما انتخاب کرده ایم. یک نام، ایمیل و یک فیلد متنی به آن اضافه می کنیم.

برای ویرایش هر قسمت می توانید روی آن کلیک کنید. همچنین می‌توانید فیلدهای فرم را با استفاده از ماوس بکشید و مرتب کنید.

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

وقتی همه چیز تمام شد، فقط روی دکمه ذخیره کلیک کنید.

مرحله 4: اعلان ها و تأییدیه ها را تنظیم کنید

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

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

فرم های اعلان پیام هایی هستند که هنگام دریافت درخواست یا ایمیل جدید از سایت وردپرس خود دریافت می کنید.

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

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

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

اعلان ها به صورت پیش فرض به ایمیلی که در تنظیمات مشخص کرده اید ارسال می شود. اگر می خواهید گیرنده ارسال اعلان ها را تغییر دهید، می توانید به راحتی آن را نیز تغییر دهید. اگر می خواهید چندین آدرس ایمیل (که با ویرگول مشخص شده است) را نشان دهید، لطفاً همانطور که می گویند، کارت ها را در دست دارید :)

قسمت موضوع ایمیل به طور خودکار با نام فرم شما پر می شود. فیلد نام از نام کاربری (نام شما) گرفته می شود. هنگامی که به نامه ای پاسخ می دهید، نام کاربری که فرم تماس را پر کرده است به نامه ارسال می شود.

مرحله 5: افزودن فرم تماس وردپرس به صفحه

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

ما از یک کد کوتاه ساده برای جاسازی فرم در صفحه استفاده می کنیم. به سادگی بر روی دکمه "افزودن فرم" کلیک کنید و نام فرم خود را برای درج آن در صفحه انتخاب کنید.

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

فرم در یک صفحه ساده وردپرس چگونه به نظر می رسد:

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

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

افزونه WPForms دارای یک ویجت فرم تماس داخلی است که می توانید آن را به نوار کناری یا هر قسمت دیگری از سایت خود (مانند پاورقی) اضافه کنید.

برای انجام این کار، باید به بخش "ظاهر" -> ابزارک ها بروید. در آنجا ویجت افزونه فرم از پیش نصب شده را در سمت چپ مشاهده خواهید کرد. فقط آن را می گیریم و با کشیدن و رها کردن منظم، ترتیب نمایش را در ناحیه مورد نظر در نوار کناری تنظیم می کنیم.

مرحله بعدی تعیین نام ویجت و ذخیره آن است. به سایت بروید و نتیجه را ببینید.

این بررسی افزونه فرم بازخورد WPForms ما را کامل می کند. اما، مخصوصاً برای شما، من یک بررسی دیگر از یک افزونه رایگان آماده کرده ام که با آن می توانیم یک فرم بازخورد پاپ آپ و همه ویژگی های مشابه قبلی ایجاد کنیم. این فرم تماس 7 نام دارد. واقعاً بسیار قدرتمند است و برگ برنده اش این است که کاملاً رایگان است!

همچنین می توان آن را تطبیقی ​​کرد، یعنی فرم بازخورد با اندازه صفحه نمایش دستگاه شما سازگار می شود.

بنابراین، فقط در مورد، بنابراین شما می دانید که آنها آنجا هستند.

نحوه ایجاد فرم بازخورد تماس با استفاده از فرم تماس 7

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

قبلاً در وب سایت من نصب شده است، نه در این وبلاگ. روش استاندارد است. اکنون باید به قسمت مدیریت وبلاگ برویم و فرم جدیدی ایجاد کنیم که برنامه ها و سایر اطلاعات مفید را برای ما جمع آوری کند. به بخش "فرم تماس 7" -> افزودن جدید بروید.

عالی! حالا بیایید یک نام مناسب به آن بدهیم، در مورد من تعداد زیادی از این فرم های تماس وجود دارد. بیایید یکی را انتخاب کنیم، به عنوان مثال "فرم سفارش تبلیغات وب سایت"

من به طور خلاصه به شما می گویم که در اینجا به چه چیزی نیاز داریم. اول از همه، باید تصمیم بگیریم که چند فیلد فرم بسازیم. فوراً می گویم که نیازی به ایجاد 100500 فیلد نیست و بی معنی است، به این دلیل ساده که افراد سایت شما را می بندند و درخواستی نمی گذارند. آنها باید این مرحله را آسان تر کنند. یعنی اگر در مورد آن فکر کنید، آنچه ما از یک شخص نیاز داریم این است:

نام او برای خطاب به او (نشانی شخصی)

آدرس پست الکترونیکی (بازخورد، جایی که برای او پیشنهاد ارسال شود)

شماره تلفنی که باید فوراً تماس بگیرید (اگر این سریع اتفاق بیفتد، در هر صورت او مشتری شما خواهد شد)

دکمه واقعی "ارسال".

این داده های اساسی است، شما می توانید از قبل در طی مکاتبات یا مکالمه تلفنی دیگران را بیابید. منطقی؟ فکر می کنم بله. بیایید ادامه دهیم.

ایجاد فیلدهای فرم تماس در افزونه Contact Form 7

بنابراین، ما در مورد تعداد فیلدها تصمیم گرفته ایم، اکنون باید این فیلدها را ایجاد کنیم. برگه های زیر در دسترس ما هستند:

• متن (هر فیلد متنی مانند "نام"، "پرسش یک سوال" یا هر عنوان دیگری که از طریق این قسمت جمع آوری می کنید)
• ایمیل (هدف در اینجا ورود کاربر است)
• URL (آدرس سایت در این قسمت وارد می شود، مقادیر دیگر قابل قبول نیستند و خطا نمایش داده می شود)
• تلفن (فیلد شماره تلفن برای فرم بازخورد وردپرس ما، مقادیر عددی مجاز است، متن خطا می دهد)
• شماره (محدوده عددی مقادیر را می توان به عنوان مثال برای قیمت اعمال کرد: "چقدر می خواهید برای سایت بپردازید؟ از 23000 تا 120000 روبل")
• تاریخ (تاریخ را مشخص کنید، از چه تاریخی تا چه تاریخی. مثال: “رزرو خودرو از 1395/04/13 تا 1395/04/25”)
• ناحیه متن (ناحیه متن، در اینجا می توانید متن را به عنوان نظر وارد کنید)
• فهرست کشویی. در وبلاگ من پیاده سازی شده است، می توانید آن را ببینید. در پایان هر مقاله، به کاربران پیشنهاد می کنم که یا یک وب سایت ساده یا یک فروشگاه آنلاین ایجاد کنند. این دقیقاً همان عملکردی است که این گزینه ارائه می دهد.
• چک باکس ها (چند گزینه ای، به عنوان مثال: وب سایت + ایجاد لوگو + تبلیغات + تبلیغات متنی)
• دکمه های رادیویی (انتخاب یک مورد، به عنوان مثال: "شما تبلیغات متنی یا هدفمند را سفارش می دهید")
• پذیرش (شرایط قرارداد را بپذیرید، یعنی اطلاعات کاربر، مانند یک پیشنهاد عمومی)
• مسابقه (کوئیز مجموعه ای از سوالات کوتاه است که می تواند در فرم تماس نیز درج شود).
• reCaptcha (تأیید اینکه شما یک ربات نیستید و اسپم نمی‌کنید.) محافظت خوب در برابر هرزنامه. توجه: اگر افزونه Really Simple Captcha را متصل کرده باشید، این گزینه کار می کند.
• فایل (اگر می خواهید به کاربران اجازه دهید فایلی را برای شما آپلود کنند، به عنوان مثال: «پیوست مشخصات فنی برای توسعه وب سایت»).
• ارسال (ارسال داده ها از طریق ایمیل)

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

در مثال زیر از 2 فیلد استفاده کردم: نام، ایمیل. بر این اساس، به این برگه ها نیاز خواهید داشت:

با کلیک بر روی تب text (Text) به کادر محاوره ای می رسیم:

در اینجا باید بر روی کادر فیلد Type – Required کلیک کنیم. این کار به این دلیل انجام می شود که اگر کاربر نامی را در آن وارد نکند، نمی تواند برنامه ای را برای شما ارسال کند؛ خطای ارسال وجود دارد که نشان می دهد همه فیلدها به درستی پر نشده اند.

سپس یک کد کوتاه برای درج این فیلد و در کنار آن دکمه آبی رنگ "Insert Tag" را مشاهده خواهید کرد. با این کار یک فیلد فرم تماس جدید اضافه می شود.

برای اینکه گیج نشوید با استایل هایلایت کردم. کد زیر:

نام و نام خانوادگی

< div class = "col-md-4" > < label class = "sr-only" >نام و نام خانوادگی< / label >[ text* text - 658 class : form - control placeholder "نام شما" ] !}< / div >

و این هم صفحه نمایش:

ما عملیات مشابهی را برای قسمت "ایمیل" انجام می دهیم. روی تب مربوطه کلیک می کنیم و وارد این کادر محاوره ای می شویم.

مطلقاً هیچ تفاوتی با قبلی ندارد، ما فقط اعمال خود را تکرار می کنیم. فیلد ایمیل من هم یک سبک دارد. من کد زیر را ارائه می کنم:

ایمیل کامل

< div class = "col-md-4" > < label class = "sr-only" >ایمیل کامل< / label >[ email* email - 447 class : form - control placeholder "Your Email" ] !}< / div >

و این هم صفحه نمایش:

و در نهایت، دکمه "ارسال". او همه در سبک من است.

< div class = "col-md-4" >[ ارسال کلاس : btn - کلاس مسطح : col - xs - 12 "سفارش" ]< / div > < / div >

نکته مهم: دوستان عزیز، در این مثال من از سبک های واکنش گرا برای ایجاد فرم تماس در وردپرس استفاده می کنم، به این معنی که می تواند فرم هایی با هر اندازه صفحه داشته باشد.

دکمه را در گوشه بالا سمت راست خواهید دید. قطعا آن را از دست نخواهید داد. 🙂

ما بخشی از کار را انجام داده ایم، اکنون به مرحله بعدی می رویم.

تنظیم یک آدرس ایمیل برای دریافت برنامه ها

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

ما باید روی تب بزرگ "Writing" کلیک کنیم. بعد از Form Template دومین خواهد بود.

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

حالا برای زمینه ها:

• به (جایی که برنامه ارسال می شود، در مورد من، این آدرس ایمیل من است، می توانید چندین آدرس را برای ارسال برنامه ها مشخص کنید)
• از (فیلد From، یعنی مقداری که برنامه از وب سایت استودیو من آمده است جایگزین می شود)
• موضوع (برای تعیین اینکه برنامه از کدام فرم می آید، در مورد ما یک برنامه از فرم ارتقاء سایت است).
• سرصفحه های اضافی (سربرگ های اضافی، ما آنها را لمس نمی کنیم، برای ارسال صحیح فرم مورد نیاز است)
• متن پیام (بدنه پیام، در اینجا شما نشان می دهید که نامه از چه کسی و از چه آدرسی آمده است، به عنوان مثال: "از: ایوان" "آدرس ایمیل: vasya @ mail. ru")
• پیوست های فایل (ضمیمه های فایل، لمس نکنید)

اکنون باید اعلان های ارسال موفقیت آمیز یا ناموفق ایمیل را از فرم تماس وردپرس پیکربندی کنیم.

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

• هنگام ارسال موفقیت آمیز پیام: «پیام شما با موفقیت ارسال شد. متشکرم."
• اگر پیامی به اشتباه از فرم ارسال شود: «هنگام ارسال پیام خطایی رخ داده است. لطفاً بعداً دوباره امتحان کنید یا با مدیر سایت تماس بگیرید."
• خطای پر کردن: «خطاهای پر کردن. لطفاً همه فیلدها را بررسی کنید و دوباره ارسال کنید."
• داده های ارسال شده به عنوان هرزنامه شناسایی می شوند: «خطا در ارسال پیام. لطفاً بعداً دوباره امتحان کنید یا با مدیر سایت تماس بگیرید."
• برخی از شرایط را باید پذیرفت: "لطفا شرایط را برای ادامه بپذیرید."
• برخی از فیلدها باید پر شوند: "لطفا یک فیلد الزامی را پر کنید."
• طول نویسه‌های فیلد بیشتر شده است: «داده‌های زیادی مشخص شده است».
• طول نویسه‌ها در فیلد ناکافی است: «داده‌های خیلی کم مشخص شده است».
• قالب تاریخ نامعتبر است: "قالب تاریخ نادرست است."
• تاریخ اولیه در حداقل محدودیت: "تاریخ مشخص شده خیلی زود است."
• تاریخ تاخیر در حداکثر محدودیت: "تاریخ مشخص شده خیلی دیر است."
• دانلود فایل انجام نشد: "فایل دانلود نشد."
• نوع فایل غیر مجاز: "این نوع فایل مجاز نیست."
• بارگیری یک فایل خیلی بزرگ: "این فایل خیلی بزرگ است."
• آپلود فایل به دلیل خطای PHP انجام نشد: "آپلود فایل انجام نشد. خطایی رخ داده است."
• قالب شماره وارد شده توسط فرستنده نادرست است: "فرمت شماره نادرست است."
• تعداد کمتر از حد مجاز است: "این عدد خیلی کوچک است."
• عدد بزرگتر از حداکثر حد مجاز: "این عدد خیلی زیاد است."
• فرستنده پاسخ صحیحی برای این سوال وارد نکرده است: "شما پاسخ نادرستی وارد کرده اید."
• آدرس ایمیل وارد شده توسط فرستنده نادرست است: "ایمیل نامعتبر".
• URL وارد شده توسط فرستنده نادرست است: "URL نامعتبر".
• شماره تلفن وارد شده توسط فرستنده نادرست است: "شماره تلفن نامعتبر".

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

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

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

پس از اینکه ابتدا به یک ویرایشگر متن (نه تصویری) رفتیم، در صفحه خود کپی و جایگذاری می کنیم. در تصویر زیر نشان داده شده است:

بیایید صفحه خود را ذخیره کنیم و ببینیم در مرورگر به چه چیزی می رسیم:

فوق العاده! حالا بیایید سعی کنیم فرم را بدون پر کردن چیزی ارسال کنیم. و این چیزی است که خواهیم دید.

یک خطای ارسال فرم رخ داد زیرا کاربر داده های مورد نیاز را در فیلدها ارائه نکرد. حالا بیایید داده های صحیح را وارد کنیم و ببینیم در این مورد چه چیزی به دست می آوریم.

روی ارسال کلیک کنید و این چیزی است که فرم ما می گوید:

حالا بیایید ببینیم برنامه ما چگونه است. به ایمیل من می آیند. بیایید تحویل را بررسی کنیم:

بیایید به داخل برویم تا مطمئن شویم رمزگذاری و همه داده ها درست است.

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

بنابراین، ما به شما گفتیم که چگونه یک فرم تماس در وردپرس در صفحه وب سایت ایجاد کنید. اکنون به شما خواهم گفت که چگونه با استفاده از افزونه فرم تماس 7 ما یک فرم بازخورد تطبیقی ​​پاپ آپ ایجاد کنید.

ساخت یک فرم بازخورد تماس پاسخگوی پاپ آپ در وردپرس

برای اینکه فرم ما تطبیقی ​​شود، یعنی «سیال»، باید افزونه دیگری یا بهتر است بگوییم افزوده شدن آن به فرم تماس 7 را متصل کنیم - به آن Bootstrap Contact Form 7 می گویند. ما نصب می کنیم و به سادگی فعال می کنیم و تمام - کار می کند. نیازی نیست تنظیماتی با آن انجام دهید. تنظیمش کن و فراموشش کن.

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

فرم پاپ آپ ما در یک گفتگوی مودال مانند این ظاهر می شود:

برای رسیدن به این نتیجه به کد زیر نیاز دارید که آن را به طور کامل در یک قطعه ارائه می کنم:

سفارش ×بستن درخواست بدهید

< a href = "#" class = "btn btn-primary btn-flat" data - toggle = "modal" data - target = "#modal2" >سفارش< / a > < ! -- Modal -- > < div class = "modal contact-modal fade" tabindex = "-1" id = "modal2" role = "dialog" aria - labelledby = "myModalLabel" aria - hidden = "true" > < div class = "modal-dialog" > < div class = "modal-content" > < div class = "modal-header" > < button type = "button" class = "close" data - dismiss = "modal" > < span aria - hidden = "true" >&بار؛< / span > < span class = "sr-only" >بستن< / span > < / button > < h4 class = "modal-title black" id = "myModalLabel" >درخواست خود را ارسال کنید< / h4 > < / div >

سلام خواننده عزیزم! در این قسمت به شما می گویم که چگونه فرم بازگشت تماس پاپ آپ را در سایت وردپرس پیاده سازی کردم.

واقعیت این است که اغلب وب مسترها دقیقاً برای راحتی کاربران از فرم برگشت تماس استفاده می کنند تا در اسرع وقت اقدام مورد نظر را انجام دهند - یعنی درخواستی را در سایت بگذارند.

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

یا به صورت یک دکمه نیز در هدر سایت:

کسی می تواند از آنها در فوتر سایت استفاده کند، این نیز مجاز است. به نظر می رسد این است:

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

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

چیز لعنتی نیست - 24 میلیون بارگیری در حال حاضر چیزهای زیادی را می گوید. بر روی دکمه نصب کلیک کنید و در سمت چپ پنل مدیریت ظاهر می شود.

زبان روسی قبلاً به طور پیش فرض انتخاب شده است، بنابراین نیازی به نگرانی نیست. ما به روند خود ادامه می دهیم.

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

برای انجام این کار، باید بر روی دکمه "تولید برچسب" در سمت راست صفحه کلیک کرده و مورد مناسب را انتخاب کنید. مثل این:

بر روی مورد "شماره تلفن" کلیک کنید، قسمت مورد نیاز را بررسی کنید و سپس تگ به دست آمده را در فرم سمت چپ به همراه نام های دیگر و در قالب نامه کپی کنید.

در سمت چپ شما یک ورودی مانند زیر خواهید داشت:

فیلد شماره تلفن را در زیر قرار دهید.

در سمت چپ الگو برای نامه های دریافتی، ورودی زیر را خواهیم داشت:

فراموش نکنید که چک باکس "استفاده از فرمت ایمیل HTML" را نیز علامت بزنید.

در پایین باید خطی مانند این "لطفا فیلد مورد نیاز را پر کنید" به روسی ترجمه کنید، چیزی شبیه به این: "لطفا فیلد الزامی را پر کنید"

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

عالی! فرم تماس مجدد برای سایت تقریبا آماده است. حالا باید آن را با کلیک کردن بالا بیاوریم.

ایجاد یک فرم پاپ آپ

وظیفه ما این است که اطمینان حاصل کنیم که وقتی روی دکمه پیوند کلیک می‌کنید، یک فرم برگشت تماس پاپ‌آپ ظاهر می‌شود. برای ایجاد آن، به یک پلاگین ویژه بر اساس زبان Jquery نیاز داریم که Easy FancyBox نام دارد. همچنین برای نصب مستقیم از پنل مدیریت در دسترس است. حالا بیایید اضافه کنیم.

فقط روی "نصب" کلیک کنید و برای شما شروع به کار می کند. تنظیماتی برای فایل های رسانه ای دارد. می توانیم به طور خلاصه به آنها بپردازیم.

اندازه های تصویر - مقادیر خود را برای ریز عکسها، تصاویر متوسط ​​و بزرگ تنظیم کنید.

افکت FancyBox برای دسته‌های رسانه زیر:

• تصاویر
• اسناد PDF
• محتوای درون خطی
• گرافیک SWF
• یوتیوب
• Vimeo
• Dailymotion
• IFrames

آنچه را که می خواهید در آینده استفاده کنید را مشخص کنید. فقط برای عکس میذارم

همچنین می توانید شفافیت (Opacity) و رنگ را تنظیم کنید. من چیزی تنظیم نکردم، همه چیز را به طور پیش فرض گذاشتم.

پنجره

• نمایش نماد بستن پنجره
• رنگ هدر و رنگ حاشیه
• ابعاد (پیش‌فرض 560x340x10)
• رفتار (تأخیر در ثانیه هنگام نمایش فرم برگشت به تماس در سایت و سرعت بسته شدن).

سازگار با سایر مرورگرها و دستگاه ها

• فعال کردن قوانین برای مرورگر IE 6 و 7 نسخه (معنی سبک)
• قانون سبک را برای مرورگر IE 8 فعال کنید

من چیزی در آنها مشخص نکردم، اگرچه می توانید با عملکرد متقابل مرورگر فرم آزمایش کنید.

تصاویر

• تشخیص خودکار برای پسوندهای تصویر - jpeg، png، jpg. می توانید افزونه های خود را اضافه کنید
• برای همه تصاویر پیوند شده اعمال شود
• بعد، من به سادگی تنظیمات را تغییر ندادم، همه چیز را همانطور که هست گذاشتم. انجام کار مشابه.

عالی! حالا بیایید این انبوه گزینه ها را ذخیره کنیم.

حالا ما با دقت گوش می دهیم، تماشا می کنیم و بعد از من تکرار می کنیم. بهتر است فرم برگشت تماس را در قابل مشاهده ترین مکان، یعنی در بالای سربرگ سایت، زیر شماره تلفن ها و مخاطبین قرار دهید. این کاری است که ما انجام خواهیم داد. بریم سراغ قالب هدر. php و این کد را پیست کنید:

تماس برگشتی

< a id = "myButton" href = "#contact_form_pop" class = "fancybox" >تماس برگشتی< / a > < div style = "display:none" class = "fancybox-hidden" > < div id = "contact_form_pop" > < / div > < / div > < / div >

نگران نباشید که یک برچسب div اضافی در اینجا وجود دارد؛ در طرح سایت من باعث خراب شدن طراحی یا ایجاد خطا نشده است، اما در مورد دیگری خطایی وجود دارد. با الگوهای مختلف این طرف و آن طرف آزمایش کنید.

به عملکردی که فرم در آن نمایش داده می شود توجه کنید:

[ تماس - فرم - 7 id = "92" title = "فرم برگشت تماس" ] !}

ممکن است بپرسید از کجا می توانم آن را تهیه کنم؟ همه چیز ابتدایی است، واتسون! به قسمت Contact Form 7 -> Forms بروید و در آنجا یک کد کوتاه برای درج در هر نقطه از سایت خواهید دید.

حالا صفحه ای را که ویرایش کردم ذخیره می کنم و می بینم به چه نتیجه ای رسیدم.

اندازه فیلد، فونت و طراحی دکمه "ارسال". کمی صبور باش جی

طراحی برای فرم تماس

تصمیم گرفتم اندازه فیلدهای نام، ایمیل و تلفن را در طرح تغییر دهم. ورودی استاندارد کاملا مناسب نیست. چگونه کلاس صحیح آنها را بفهمیم؟ این کار با بررسی عناصر، کلیک راست و کلیک بر روی view element code انجام می شود و در زیر تمامی عناصر و کلاس ها را مشاهده خواهید کرد.

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