نامه ای به فرم تماس با ویرایشگر شناسه b 1147. افزونه های فرم بازخورد برای وردپرس. اعتبار سنجی فیلد اجباری

فرم تماس یکی از ویژگی های ضروری اکثر سایت ها است. به همین دلیل است که تعداد زیادی افزونه فرم تماس در دایرکتوری وردپرس وجود دارد. یکی از محبوب ترین آنها است فرم تماس 7. این افزونه به شما اجازه می دهد تا فرم هایی از هر نوع ایجاد کنید. بسیار انعطاف پذیر و آسان برای راه اندازی؛ سال ها در حال توسعه بوده و شامل پیشرفت های زیادی است.

ایجاد و نمایش فرم های تماس

ایجاد فرم ها در ادمین

پس از نصب افزونه، آیتم منوی “Contact Form 7” ظاهر می شود که از طریق آن می توانید فرم ها را ایجاد و حذف کنید.

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

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

جلوی سایت

حالا بیایید مقاله را ذخیره کنیم و ببینیم فرم ما چگونه است (با استفاده از موضوع بیست و شانزده):

تصویر فرم را بعد از نامه ارسالی نشان می دهد (این مورد با اطلاعیه پایین فرم مشخص شده است).

سفارشی سازی فرم (ایجاد فرم های پیچیده)

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

در قسمت بالا - نام فرم (فقط در پنل مدیریت قابل مشاهده است)، نامی را مشخص کنید که برای شما واضح است، به عنوان مثال: "بازخورد درباره سایت"، "فرم درخواست کار"، "فرم" بازخورد"و غیره.

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

و در زیر چهار تب وجود دارد:

1. قالب فرم
2. حرف
3. تنظیمات اضافی

بیایید هر برگه را جداگانه در نظر بگیریم.

قالب فرم

در این تب می توانید فیلدها و ظاهرتشکیل می دهد. فضای کار است ویرایشگر HTML WP. فقط به جای دکمه های معمولی، دکمه هایی برای درج فیلدهای فرم مختلف می بینیم.

طرح بندی فرم

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

نام شما (الزامی) ایمیل شما (الزامی) موضوع پیام

و هنگامی که در یک پست نمایش داده می شود، به این HTML تبدیل می شود:

نحو کد کوتاه

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

تگ بعداً به یک فیلد متنی با کد html تبدیل می شود:

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

اما سازنده به شما اجازه تغییر کد کوتاه را نمی دهد (شما فقط می توانید یک کد کوتاه در آنجا ایجاد کنید). دو راه برای تغییر کد کوتاه وجود دارد:

1. حذف کنید و با استفاده از سازنده یک مورد جدید ایجاد کنید.
2. سینتکس را مطالعه کنید و کد کوتاه فیلد را به صورت دستی اصلاح کنید.

با طراح، خودتان متوجه خواهید شد.

و در اینجا نحو کد کوتاه را تجزیه و تحلیل خواهیم کرد.

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

متن (ضروری)نوع فیلد: متن، انتخاب، رمز عبور، شماره و غیره (در این مورد، یک فیلد متنی). تعیین می کند که برچسب ما به کدام عنصر فرم تبدیل شود، به این معنی که چه نوع داده ای را می پذیرد. * علامت ستاره فیلد را اجباری می کند (فرم ارسال نمی شود و اطلاعیه ای مبنی بر تکمیل فیلد نمایش داده می شود). نام مشتری (ضروری)نام فیلد به عنوان ویژگی نام در ورودی استفاده می شود و همچنین هنگام تشکیل الگوی نامه ارسالی استفاده می شود. id:my-id ویژگی id در ورودی با مقدار my-id. برای تزئین استفاده می شود. class:my-class ویژگی class در ورودی با مقدار my-class. برای تزئین استفاده می شود. مکان نگهدار " نامی را وارد کنید" Использовать текст "Введите имя" как placeholder. !}

ترتیب ویژگی های برچسب را دنبال کنید: ابتدا نوع فیلد، سپس نام آن، و تنها پس از آن گزینه های اضافی می آید.

انواع میدان

• فیلدهای متنی: متن، ایمیل، تلفن، آدرس اینترنتی، ناحیه متنی
• فیلدهای عددی: عدد، محدوده
• فیلدهای تاریخ: تاریخ
• چک باکس ها، رادیوها، لیست ها: چک باکس، رادیو، را انتخاب کنید
• فیلد آپلود فایل: فایل
• CAPTCHA: کپچاک و کپچار
• نظرسنجی: مسابقه
• فیلد «قبول»: پذیرش
• دکمه ارسال: ارسال
• نوع فیلد سفارشی

الگوی نامه

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

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

سرصفحه های ایمیل:

به چه کسی - جعبه ایمیلجایی که ایمیل ارسال خواهد شد. شما می توانید هر تعداد کادر را که با کاما از هم جدا شده اند مشخص کنید.

از - نام و ایمیل، که نامه از طرف آنها آمده است. معمولاً ایمیل سرور در اینجا نشان داده می شود (به عنوان مثال [ایمیل محافظت شده]).

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

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

• سرصفحه های اضافی - Reply-To: به طور پیش فرض در اینجا نوشته شده است. هدر Reply-To به ما می گوید که این ایمیل را می توان با کلیک کردن روی دکمه "پاسخ" در برنامه پستیو تگ فرم نام فیلد قالب است. کاربر مشخص شده استایمیل به جای این تگ درج خواهد شد. چیزی شبیه به Reply-to دریافت می کنید: [ایمیل محافظت شده].

بدن نامه

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

بیایید حرف پیش فرض را تجزیه و تحلیل کنیم:

از جانب:<>موضوع: پیام: -- ارسال شده از سایت Exploring the Contact Form 7 Plugin (http://test-wp.ru)

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

از: دیمیتری موضوع: سوال در مورد فرم تماس 7 پیام: سلام! من یک سوال در مورد افزونه فرم تماس ۷ دارم چگونه آن را تنظیم کنم؟ -- ارسال شده از سایت Exploring Contact Form 7 Plugin (http://test-wp.ru)

فیلدهای اختیاری در متن ایمیل

اگر کاربر فیلد را پر نکند، اما در متن حرف استفاده شود، بدنه حرف ناقص خواهد بود. به عنوان مثال بدن می گوید Man from the city اما کاربر فیلد را پر نکرده است یعنی در نامه Man from the city دریافت می کنیم ... چنین خطی در نامه اضافی است. برای حذف این خط از ایمیل، کادر «Exclude output of lines with messages tags» را علامت بزنید. توجه داشته باشید که این فقط زمانی کار می کند که متن فیلد و کد کوتاه در یک خط باشند.

گزینه "استفاده از فرمت HTML حرف". به شما امکان می دهد از تگ های HTML در متن ایمیل استفاده کنید. امکان استفاده محدود وجود دارد لیست HTMLبرچسب ها، زیرا نه همه مشتریان پست الکترونیکییا خدمات می توانند نشانه گذاری پیچیده HTML را به درستی مدیریت کنند. می‌توانید از جدول‌ها، فهرست‌های گلوله‌دار، جسارت، پاراگراف‌ها و غیره استفاده کنید. برای جزئیات بیشتر در وب جستجو کنید.

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

اطلاعیه های ارسال فرم

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

تگ های قالب نامه در این زمینه ها کار نمی کنند.

تنظیمات اضافی

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

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

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

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

به طور کلی دو افزونه نصب می شود: فرم تماس 7و FancyBox آسان، فرم تماس ایجاد شده است، باقی مانده است که کد را به قالب اضافه کنید.

کد در قالب سایت در فایل های php درج می شود!

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

درخواست تماس

اگر کد تماس فرم را مستقیماً در ویرایشگر متن ویژوال در حالت TEXT جای‌گذاری کنید، کد به شکل زیر خواهد بود:

کد با فرم تماس پاپ آپ نصب شده در ویرایشگر پست تصویری (در حالت متن) در پنل مدیریت سایت:

درخواست تماس

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

بیایید این کد را در نظر بگیریم.

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

درخواست تماس

این کد خود پاپ آپ است، می توان آن را زیر دکمه فراخوانی پنجره گذاشت، یا می توان آن را در فوتر حذف کرد تا کد محتوا تمیزتر شود:

در این کد خود فرم با تابع زیر فراخوانی می شود:

در جایی که نوشته شده است - یک کد کوتاه برای فرم تماس نمایش دهید، کد کوتاه در هنگام ایجاد آن در خود فرم تماس مشخص می شود:

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

نمونه ای از فراخوانی دو فرم بازخورد در یک پنجره بازشو:

ما فرم 1 را صدا می زنیم

در این حالت برای فراخوانی چند فرم به این قسمت های کد توجه کنید:

... و برای شکل دوم: ... و غیره.

به جای نمایش کد کوتاه فرم بازخورد، می توانید هر محتوایی را نمایش دهید، مثلاً بلوک هایی با متن یا تصویر، یا فرم اشتراک Feedburner، به عنوان مثال، فرم اشتراک Feedburner در یکی از سایت ها به این صورت نمایش داده می شود.

اشتراک در

صفحه ای با سیاست حفظ حریم خصوصی به سایت اضافه می کند. همچنین، تحت فرم تماس 7 رضایت خود را به پردازش داده های شخصی اضافه می کند. این افزونه فقط برای سایت های روسی زبان در نظر گرفته شده است. پس از ورود به سیستم، به کاربران یک اعلان در مورد استفاده از کوکی ها توسط سایت نشان داده می شود. مناسب برای 152FZ.
برای سؤال در مورد افزونه، به این ایمیل بنویسید: [ایمیل محافظت شده]. ما از طریق یک مشاور آنلاین در وب سایت خود مشاوره نمی دهیم.

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

1. افزونه را نصب کنید.
2. مشخصات شرکت مورد نیاز را پر کنید.

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

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

تغییرات

1.28 بررسی سازگاری با WP 5.0. عنوان پنهان از متن خط مشی اضافه شد
1.27 بررسی وجود کوکی ها برای صفحه ای که هنگام ورود به سایت ترجمه شده به js از پایین ظاهر می شود
1.26 rel=nofollow به پیوندهای افزونه اضافه شد
1.25 متن توافقنامه را تحت فرم نظر استاندارد اضافه کرد
1.24 اشکال جاوا اسکریپت رفع شد
1.22 رفع اشکالات جزئی در پنل مدیریت و نمایش متن نام دکمه در فرم تماس 7 در صفحه
1.21 کلاس Container که متن خط مشی را می پیچد با container-ppcf7 جایگزین شده است.
1.2 یک کلاس به برچسب اضافه شد

p> در زیر فرم ها
1.1 گزینه ای برای نمایش/پنهان کردن پیوند به سیاست حفظ حریم خصوصی در فوتر اضافه شده است
1.01 تگ p اضافی در پیام کوکی حذف شد
1.0 اولین نسخه در مخزن

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

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

1. یک فرم بازخورد با فیلدهایی که نیاز داریم ایجاد کنیم.برای چیدمان فرم، از HTML + CSS معمولی استفاده می کنیم، تگ های ویژه در براکت مربع قرار می گیرند. همه این کارها در تب Form Template در صفحه تنظیمات افزونه Contact Form 7 انجام می شود.

در این مورد، فرم سفارش به این شکل است (با سبک کلاس سفارش داده شده):

اکنون باید اطمینان حاصل کنیم که TITLE و URL صفحه در ایمیل ارسال شده است. مورد 2 را ببینید.

2. به قسمت "نامه" بروید و یک الگوی نامه تشکیل دهید.برای انتقال اطلاعات سرویس، می توانید از برچسب های سرویس زیر استفاده کنید:

• [_remote_ip]آدرس IP فرستنده
• [_عامل کاربر]عامل کاربر فرستنده.
• [_url]آدرس فرم تماس.
• [_تاریخ]تاریخ حرکت.
• [_زمان]زمان خروج.
• [_post_id]شناسه پست (سوابق) فرم تماس.
• [_post_name]نام پست (در طرح پروتکل HTTP).
• [_post_title]عنوان پست با فرم تماس.
• [_post_url]پیوند به صفحه ارسال
• [_post_author]نام نویسنده نشریه.
• [_post_author_email]ارسال آدرس ایمیل نویسنده

اگر تگ های [_post_tltle] و [_post_url] را در قالب ایمیل وارد کنید، نام صفحه و آدرس آن را در بر خواهد داشت. اگر نام صفحه با نام محصول مطابقت داشته باشد، مشکل انتقال نام محصول به مدیر سایت حل می شود!

در اینجا نمونه‌ای از یک الگوی ایمیل است که نام و URL صفحه‌ای را که سفارش از آن انجام شده است، ارسال می‌کند:

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

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

ترفند کوچک

برای درج کد فرم در هر مکانی از قالب، می توانید خط زیر را به کد PHP اضافه کنید:

"); ?>

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