فرم تماس 7 سبک آماده وردپرس.

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

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

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

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

"تنظیمات عمومی" - می توانید رنگ پس زمینه، عرض فرم (تنظیم شده در px،٪ آن را امتحان نکردید)، ضخامت حاشیه، شکل (خط نقطه چین، توپر و غیره)، رنگ، گرد کردن را تعریف کنید. .

"تنظیمات ورودی‌ها و برچسب‌ها" - پس‌زمینه فیلدهای ورودی، رنگ فونت ورودی، فونت (لیست بزرگ نیست و تقریباً چیزی با سیریلیک وجود ندارد) و اندازه آن. رنگ حاشیه فیلد، سبک (توپر چین دار، و غیره)، ضخامت، گرد. فونت و اندازه ورودی پارامترهای حاشیه در px - ارتفاع/عرض، بالشتک. فونت برچسب، سبک، اندازه، رنگ.

"تنظیمات دکمه ارسال" - تنظیمات دکمه ارسال فرم. تنظیمات موجود عبارتند از اندازه دکمه، گرد کردن، رنگ، نوع حاشیه و رنگ.

مشکلات در استفاده

پس از بررسی تنظیمات، می توانید به این نتیجه برسید که همه چیز بسیار خوب است - تمرین خلاف آن را نشان داده است. تنظیمات واقعاً زیاد است، اما کافی نیستند - هیچ تنظیمات تورفتگی در داخل فرم وجود ندارد، بنابراین همه بلوک ها در حاشیه سمت چپ نزدیک به لبه فرم جمع آوری می شوند. تنظیمات عجیب و غریب "پیش فرض" - که در آن فیلد ورودی 100 * 100 پیکسل است. اگر اندازه فیلدها را به درستی تنظیم کنید، لیست کشویی تحت تأثیر قرار نمی گیرد و سبک موضوع اصلی را می کشد. بازنشانی به تنظیمات اصلی تا زمانی که افزونه حذف نشود کار نمی کند ...

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

یادداشت مهم!این افزونه اخیراً به روز شده است و چیزی در تنظیمات به طور قابل توجهی تغییر کرده است، بنابراین باید بررسی و تست کنید.

فرم تماس 7 می‌تواند فرم‌های تماس متعددی را مدیریت کند که در آن‌ها می‌توانید محتوای فرم‌ها و نامه‌ها را با نشانه‌گذاری نسبتاً ساده به صورت انعطاف‌پذیر سفارشی کنید. فرم ها دارای پشتیبانی داخلی برای ارسال Ajax، CAPTCHA، فیلتر هرزنامه Akismet و موارد دیگر هستند.

مستندات و پشتیبانی

اسکرین شات ها

نصب و راه اندازی

1. کل پوشه contact-form-7 را در پوشه /wp-content/plugins/ آپلود کنید.
2. افزونه را از صفحه افزونه ها در داشبورد وردپرس خود فعال کنید.

در منوی داشبورد وردپرس، تب "بازخورد" را خواهید دید.

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

اعضا و توسعه دهندگان

"فرم تماس 7" یک پروژه متن باز است. مشارکت کنندگان زیر در توسعه این افزونه مشارکت داشتند:

اعضا

تغییرات

برای اطلاعات بیشتر به انتشارات مراجعه کنید.

5.1.3

• رفع اشکالی که عدم انتخاب گزینه ای را در تب Mail غیرممکن می کرد.

5.1.2

• مخاطب دائمی: انتخابگر لیست مخاطبین معرفی شد.
• Constant Contact: یک تنظیم اضافی ثابت_contact معرفی شده است.
• reCAPTCHA: wpcf7_recaptcha_actions و قلاب فیلتر wpcf7_recaptcha_threshold را معرفی کرد.

5.1.1

• reCAPTCHA: پاسخ را به نشانه های پاسخ خالی تغییر می دهد.

5.1

• ماژول ادغام تماس دائمی معرفی شده است.
• ماژول reCAPTCHA برای پشتیبانی از reCAPTCHA نسخه 3 به روز شد.
• قوانین سبک حالت تاریک را اضافه می کند.

5.0.5

• مشکل عدم تطابق بین get_data_option() و get_default_option() در کلاس WPCF7_FormTag رفع شد.
• خطاهای PHP را که در فراخوانی های unlink() رخ می دهد خاموش می کند.
• wpcf7_is_file_path_in_content_dir() را برای پشتیبانی از ثابت UPLOADS معرفی کرد.

5.0.4

• به طور صریح آرگومان power_type را در فراخوانی register_post_type() تنظیم می کند تا مشکل افزایش امتیاز غیرمجاز را برطرف کند.
• پیوست کردن یک فایل محلی - تعیین مسیرهای مطلق برای فایل هایی که خارج از فهرست wp-content قرار دارند ممنوع است.
• Configuration Validator - یک عنصر آزمایشی را برای تشخیص تنظیمات فایل پیوست نادرست اضافه می کند.
• رفع یک اشکال در ویژگی سازگاری به عقب جاوا اسکریپت برای مرورگرهای قدیمی که از ویژگی متغیر HTML5 پشتیبانی نمی کنند.
• کادر تأیید رضایت - عملکرد ذخیره نکنید تگ فرم را غیرفعال می کند.

5.0.3

• CSS: سبک مکان‌نمای «مجاز» را برای ارسال دکمه‌ها در حالت «غیرفعال» اعمال می‌کند.
• چک باکس پذیرش: رابط کاربری تگ مولد را برای تشویق به استفاده از گزینه های بهتر از نظر حفاظت از داده های شخصی بازبینی می کند.
• تابع wpcf7_anonymize_ip_addr() را معرفی می کند.
• گزینه consent_for:storage برای همه انواع تگ فرم معرفی شد.

5.0.2

• بخش Privacy Notices را به فایل readme.txt اضافه کرد.
• محتوای متا جعبه اطلاعات را به روز کرد.
• در جایی که مناسب تر است، به جای get_locale() از get_user_locale استفاده کنید.
• چک باکس پذیرش: پس از ارسال موفقیت آمیز، وضعیت غیرفعال بودن دکمه های ارسال را بازنشانی کنید.

5.0.1

• رفع استفاده نادرست از _n().
• اعتبار سنجی پیکربندی: تعداد نادرست هشدارها را در پانل تب تنظیمات اضافی برطرف کرد.
• اعتبار سنجی پیکربندی: رفتار نامناسب برای برچسب ایمیل ویژه [_site_admin_email] در فیلد هدر از نامه رفع شد.
• چک باکس پذیرش: ویژگی‌های کلاس و شناسه مشخص‌شده روی عنصر HTML اشتباه اعمال شد.
• اعتبار سنجی پیکربندی: هنگامی که یک هدر ایمیل اضافی برای صندوق‌های پستی مانند Cc یا Reply-To وجود دارد، اما مقدار خالی احتمالی آن وجود دارد، خطای «Syntax صندوق پستی نامعتبر استفاده می‌شود» برگردانده می‌شود.
• به صراحت چهارمین پارامتر add_action() را برای جلوگیری از ارسال مقادیر پارامتر ناخواسته مشخص کنید.
• قبل از حذف دایرکتوری خالی بودن دایرکتوری مورد نظر را بررسی کنید.

5.0

• تنظیمات اضافی: on_sent_ok و on_submit حذف شده اند.
• تنظیمات اضافی جدید: skip_mail
• فلامینگو: عنوان کانال ورودی همراه با تغییر عنوان فرم تماس مربوطه تغییر می کند.
• رویدادهای DOM: یک شیء پاسخ API را از طریق ویژگی event.detail.apiResponse قابل دسترسی کنید.
• HTML mail: ویژگی های مرتبط با زبان را به هدر HTML اضافه می کند.
• آپلود فایل: ویژگی پذیرش را روی یک فیلد آپلود تنظیم می کند.
• کلاس WPCF7_MailTag را معرفی می کند.
• به شما امکان می دهد تلاش برای ارسال نامه با استفاده از قلاب اقدام wpcf7_before_send_mail را لغو کنید. همچنین، می توانید وضعیت سفارشی و پیام را از طریق رهگیر عمل تنظیم کنید.
• چک باکس پذیرش: اجازه می دهد تا یک بیانیه شرایط را در قسمت محتوای تگ فرم مشخص کنید.
• چک باکس پذیرش: از گزینه اختیاری پشتیبانی می کند.
• برچسب‌های ایمیل ویژه جدید: [_site_title]، [_site_description]، [_site_url]، [_site_admin_email]، [_invalid_fields]، [_user_login]، [_user_email]، [_user_url]، [_user_first_name]، [__,user] [_user_display_name]
• قلاب‌های فیلتر جدید: wpcf7_upload_file_name، wpcf7_autop_or_not، wpcf7_posted_data_($type) و wpcf7_mail_tag_replaced_($type)
• ویژگی‌های جدید تگ فرم: صفر-کنترل-کانتینر و غیرقابل پست

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

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

در این آموزش، می‌خواهم به شما نشان دهم که چگونه با استفاده از افزونه دیگری، کاربردی‌تر و کمی پیچیده‌تر از آنچه در پست گذشته بحث شد، یک فرم بازخورد ایجاد کنید. شروع کنیم؟

توضیحات پلاگین

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

علاوه بر این، می توانید افزونه ضد هرزنامه Akismet را به آن متصل کنید، آن را پیاده سازی کنید و همچنین از چند زبانه بودن استفاده کنید. این به نظر من جالب است! :-)

نصب افزونه فرم تماس 7

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

سفارشی کردن فرم تماس 7

پس از فعال‌سازی افزونه، آیتم جدیدی با عنوان «مخاطبین (CF7)» در منوی اصلی وردپرس ظاهر می‌شود، این مکان اصلی برای تنظیم فرم‌های بازخورد شما است. تعداد فرم ها نامحدود است.

لیست فرم های موجود در بخش "فرم های تماس" موجود است:

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

افزودن فرم بازخورد جدید

همانطور که می بینید، هیچ آیتم اضافی خاصی در منو وجود ندارد، بنابراین بیایید به ایجاد خود فرم بازخورد بپردازیم. برای انجام این کار، آیتم "افزودن جدید" را در منوی اصلی انتخاب کنید.

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

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

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

نام فرم را تغییر دهید

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

پس از آن، یک فیلد متنی ظاهر می شود که در آن نامی با توضیحات وارد می کنیم:

به محض رفرش صفحه، پیام زیر را مشاهده خواهید کرد:

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

تغییر قالب فرم

یک قالب یک کد HTML ساده است که ظاهر و احساس فرم شما را مشخص می کند. به طور پیش فرض، شامل 4 فیلد (نام، ایمیل، موضوع و پیام) و یک دکمه ارسال فرم است. به نظر می رسد این است:

می‌توانید بلوک‌ها را به سادگی با برش و چسباندن کد آن‌ها در هر جایی عوض کنید.
برای مثال، می‌توانیم فیلد آدرس ایمیل و نام مشتری را عوض کنیم:

یا می توانیم فیلد "موضوع" را حذف کنیم تا در فرم ما ظاهر نشود. برای انجام این کار، فقط بلوک متن مربوطه را در قالب خود حذف کنید:

ستاره در کنار کد عنصر به این معنی است که این فیلد مورد نیاز است و تا زمانی که مشتری مقداری را وارد کند، فرم ارسال نمی شود:

نحوه اضافه کردن فیلد جدید به فرم

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

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

فقط باید نوع فیلد مورد نظر را انتخاب کنید و چند مرحله ساده را انجام دهید.

نترس تنظیمات، اگرچه ترسناک به نظر می رسند، در واقع بسیار ساده هستند :-)

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

علاوه بر این، بسیاری از فیلدهای فرم ما دارای تنظیمات نام، شناسه عنصر و تنظیمات کلاس CSS هستند که از طریق آنها می توانید ظاهر این فیلدها را تغییر دهید. آنها تقریباً در همه زمینه ها حضور دارند:

فیلد "نام" مهم ترین است، هم در قالب فرم و هم در قالب ایمیل استفاده می شود.

اما در حین استفاده از این افزونه، هرگز مجبور به تغییر یا تنظیم مقادیر این ویژگی ها نشدم. به احتمال زیاد شما هم به آن نیاز نخواهید داشت. ولی باید بگم و معرفی کنم :-)

همه فیلدهای متنی در سازنده فرم ما دارای فیلدهای اضافی با اندازه خود فیلد و حداکثر طول مقدار هستند، در اینجا آنها عبارتند از:

همچنین، فیلدهای خاص، مانند URL یا برخی دیگر، متفاوت از فیلدهای متنی معمولی، تنظیمات خاص خود را دارند. به عنوان مثال، فیلد URL ما یک تنظیم اضافی دارد:

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

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

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

خوب، برای اینکه مقدار این فیلد به آدرس ایمیل ما بیاید، این مقدار باید کپی شود:

و در قسمت متن زیر در "الگوی ایمیل" قرار دهید:

بر اساس قیاس، فیلدهای دیگری اضافه می شود. همه چیز ساده و واضح است :-)

الگوی گیرنده و نامه

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

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

فکر می‌کنم قبلاً متوجه شده‌اید که این فرم‌ها از کدهای مبهم مانند، استفاده می‌کنند. بنابراین، این همان فیلد "Name" از تولید کننده میدان است که در بالا در نظر گرفتم:

خوب، پس فقط باید الگوی خود نامه را مرتب کنید:

می‌توانید از تمام فیلدهایی که به‌طور خودکار از طریق دکمه «ایجاد برچسب» ایجاد شده‌اند استفاده کنید یا اگر چیزی را در تنظیمات تغییر ندادید، می‌توانید از فرم استاندارد خارج شوید.

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

تنظیمات پیام

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

مشکلات شناخته شده

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

ندیدی؟ و من به شما نزدیکتر نشان خواهم داد:

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

در اینجا دو راه حل وجود دارد. اولین مورد این است که سبک های مناسب را به فایل style.css تم خود اضافه کنید یا نوع URL را به متن در قالب فرم تغییر دهید، سپس همه چیز درست می شود:

نتیجه

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

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

اگر می خواهید از من برای مطالب تشکر کنید - می توانید این کار را اینجا انجام دهید :-)

اگر خطایی پیدا کردید، لطفاً قسمتی از متن را برجسته کرده و کلیک کنید Ctrl+Enter.