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

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

می توانید افزونه Really Simple CAPTCHA را در وب سایت رسمی وردپرس دانلود کنید

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

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

ماوس خود را روی نام فرم قرار دهید و "Edit" را انتخاب کنید.

پنجره ای برای تغییر پارامترهای فرم باز می شود.

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

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

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

  • فیلد متنی
  • پست الکترونیک
  • شماره تلفن
  • شماره (باکس چرخشی)
  • شماره (لغزنده)
  • فیلد متنی
  • منوی کشویی
  • چک باکس ها
  • دکمه های رادیویی
  • پذیرش - پذیرفته شدن
  • سوال
  • CAPTCHA
  • ارسال فایل
  • دکمه ارسال

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

. کل بلوک با توضیحات و عناصر باید در یک خط باشد و داخل تگ باشد

فیلد متنی

از لیست کشویی، عنصر "فیلد متن" را انتخاب کنید

اگر ویژگی‌ای که اضافه می‌کنید لازم است، کادر 1 را علامت بزنید و فراموش نکنید که آن را در توضیحات بنویسید.

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

حتما کد را در قالب نامه وارد کنید، در غیر این صورت داده های این فیلد به ایمیل ارسال نمی شود! این نه تنها برای فیلدهای متنی بلکه برای هر عنصر دیگر نیز صدق می کند.

پست الکترونیک

برای ارسال آدرس صندوق پستی فرستنده به فرم استفاده می شود

URL

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

شماره تلفن

فقط اعداد را می توان در این قسمت وارد کرد.

شماره (باکس چرخشی)

زمینه ای که در آن می توانید مقدار چیزی مانند یک محصول را تعیین کنید. مقدار با فلش های بالا/پایین تنظیم می شود.

تاریخ

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

فیلد متنی

بله تعجب نکنید 🙂 یک فیلد متنی دیگر. این بار این فیلد بزرگ است و به شما اجازه می دهد متن زیادی در آن بنویسید. به عنوان مثال نظرات، نظرات.

منوی کشویی

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

لیست باید در قسمت انتخاب قرار گیرد، هر مورد در یک خط جدید.

چک باکس ها

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

دکمه های رادیویی

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

پذیرش - پذیرفته شدن

تایید چیزی توافقی را برای پذیرش شرایط شرح داده شده در بالا فرض کنید.

سوال

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

حفاظت از هرزنامه را به فرم اضافه می کند.

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

شما نمی توانید تنظیمات را تغییر دهید، 2 خط را قبل از دکمه ارسال کپی و جایگذاری کنید.

ارسال فایل

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

دکمه ارسال

در حال ارسال فرم. در تنظیمات در بخش "میانبر" - می توانید نام دکمه را بدهید (ارسال، پاسخ، ارسال 🙂)

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

از آنجایی که افزونه ها دارای ویژگی های به روز رسانی هستند، تغییر می کند ظاهرفرم ها در فایل style.css به سبک تم سایت تولید خواهند شد

کد وظیفه نمایش فرم، فیلدهای آن و سایر عناصر را بر عهده دارد:

Wpcf7 ( پس‌زمینه رنگ:#ddd; ) /*رنگ پس‌زمینه فرم */ ورودی wpcf7، .wpcf7 textarea( padding:5px; color:#1D1D1D; font-family:Arial، Helvetica، sans-serif؛ اندازه قلم: 16 پیکسل؛ ارتفاع خط: 20 پیکسل؛ حاشیه: 1 پیکسل جامد #C7C7C7؛ جعبه-سایه: درونی 2 پیکسل 2 پیکسل 8 پیکسل #F9F9F9؛ -webkit-transition: همه آسانی 0.2 ثانیه؛ -moz-transition: همه 0.2 ثانیه سهولت؛ -o-transition : همه 0.2s ease؛ انتقال: همه 0.2s آسان؛ ) .wpcf7 .wpcf7-list-item( padding-left: 0; margin-left: 0; margin-right: 25px; ) .wpcf7 .wpcf7-list-item ورودی (حاشیه: هیچ؛ padding-left: 0; margin-left: 0; ) .wpcf7 select( طرح کلی: هیچ؛ اندازه قلم: 16 پیکسل؛ خانواده فونت: Arial، Helvetica، sans-serif؛ ) .wpcf7 ورودی: hover, .wpcf7 input:focus, .wpcf7 input:active, .wpcf7 textarea:hover, .wpcf7 textarea:focus, .wpcf7 textarea:active ( پس زمینه: #FDFDFD؛ طرح کلی: هیچکدام؛ .)

اینجا چیه چیه

ورودی wpcf7 .wpcf7 textarea - سبک فیلد ورودی ( فیلد متنی)

  1. لایه گذاری- تورفتگی را از محتوا به مرز عنصر تنظیم می کند. در اینجا - تورفتگی از متن وارد شده در فیلد تا مرز فیلد. مقدار بر حسب پیکسل بر روی Xpx تنظیم می شود که X تعداد پیکسل ها است. مثال: padding: 5px 3px 6px 8px;
  2. رنگ- رنگ متن
  3. فونت-خانواده- فونت فیلدهای ورودی
  4. اندازه فونت- اندازه فونت
  5. ارتفاع خط- ارتفاع خط
  6. مرز- فریم در اطراف فیلد ورودی
  7. سایه جعبهمسدود کردن سایه درونینشان می دهد که سایه داخلی است. اگر سایه بیرونی می خواهید، این مقدار را حذف کنید. مقدار دوم و سوم 2px 2px به ترتیب نشان دهنده ترکیب افقی و عمودی سایه است. مقدار چهارم، 8px، شعاع تاری سایه را مشخص می کند. پنجم - #F9F9F9 - رنگ سایه.

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

.buttons_form ( بالشتک: 0px؛ ارتفاع: 30px؛ عرض: 150px !important؛ حاشیه: هیچ !important؛ مکان نما: اشاره گر؛ رنگ: #fff؛ -webkit-border-radius: 0.5em؛ -moz-border-radius: . 5em؛ حاشیه-شعاع: 0.5em؛ رنگ: #faddde؛ حاشیه: جامد 1px #980c10؛ پس‌زمینه: #d81b21؛ پس‌زمینه: -webkit-gradient(خطی، بالا سمت چپ، پایین سمت چپ، از(#ed1c24)، به(# aa1317)؛ پس زمینه: -moz-linear-gradient(top, #ed1c24, #aa1317)؛ فیلتر: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ed1c24", endColorstr="#aa1317"); )

فرم تماس 7 سبک اطلاع رسانی

مسئول گزارش خطاها یا ارسال های موفق است.

Wpcf7 .wpcf7-validation-errors( border:none; background-color:#246416; color:#fff; margin:0; padding:20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; ) .wpcf7 .wpcf7-mail-sent-ok( -radius: 10px; border-radius: 10px; ) .wpcf7 .wpcf7-mail-sent-ng( border:none; background-color:# 349622؛ حاشیه: 0؛ بالشتک: 20 پیکسل؛ ؛ -moz-border-radius: 10px؛ حاشیه-شعاع: 10px؛ رنگ: سفید؛ ) .wpcf7 span.wpcf7-not-valid-tip( border: none; background-color :#349622؛ padding: 5px؛ padding- چپ: 5px؛ padding-right: 5px; border-radius:10px; عرض: 290px; color: white; /* Drop shadow */ -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3)؛ -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3)؛ box-shadow: 3px 3px 3px rgba(0,0,0,0.3); )

و اکنون، برای راحتی، کل کد با نظرات:

Wpcf7 ( پس‌زمینه رنگ:#ddd; ) /*رنگ پس‌زمینه فرم */ .wpcf7 ورودی، .wpcf7 textarea( /* این بخش از کد مسئول سبک فیلدهای ورودی، نواحی متن است */ padding:5px; /* padding را از عنصر فیلدها قبل از محتوای آن تنظیم می کند، می توانید هر مقداری را قرار دهید، به عنوان مثال 10px */ color:#1D1D1D؛ /* رنگ متن در فیلدهای ورودی */ font-family:Arial، Helvetica، sans-serif؛ /* فونت متن در فیلدهای ورودی */ font -size:16px؛ /* اندازه متن در فیلدهای ورودی */ ارتفاع خط: 20 پیکسل؛ /* ارتفاع خط در فیلدهای ورودی */ حاشیه: 1 پیکسل توپر #C7C7C7؛ /* حاشیه اطراف فیلدها. اولین مقدار عرض بر حسب پیکسل، دوم - سبک کادر، سوم - رنگ آن */ box-shadow: inset 2px 2px 8px #F9F9F9؛ /* Box shadow 2px - x offset, 2px - y offset, 8px - shadow blur شعاع، #F9F9F9 - رنگ سایه */ -webkit-transition: all 0.2s ease؛ -moz-transition: all 0.2s ease؛ -o-transition: all 0.2s ease؛ transition: all 0.2s ease؛ .wpcf7. wpcf7-list- item( padding-left: 0; margin-left: 0; margin-right: 25px; ) .w pcf7 .wpcf7-list-item input( border: none; padding-left: 0; حاشیه-چپ: 0; ) .wpcf7 select( طرح کلی: هیچ؛ اندازه قلم: 16 پیکسل؛ قلم خانواده: Arial، Helvetica، sans-serif؛ ) .wpcf7 input:hover، .wpcf7 ورودی:focus، .wpcf7 ورودی:فعال، .waap hover, .wpcf7 textarea:focus, .wpcf7 textarea:active ( /* این قسمت مسئول استایل فیلدهای ورودی است که با نشانگر ماوس روی آنها قرار می گیرد */ پس زمینه: #FDFDFD؛ /* پس زمینه فیلد ورودی هنگامی که ماوس را روی آن با نشانگر ماوس */ طرح کلی: هیچ، /* حاشیه بیرونی فیلد ورودی متن */) o-transition: 0؛ انتقال: 0؛ مرز: هیچ؛ /* حاشیه اطراف دکمه */ موقعیت: نسبی؛ رنگ: #fff؛ /* رنگ متن */ تبدیل متن: بزرگ؛ /* تبدیل متن (حرف بزرگ به این معنی است که متن روی دکمه نمایش داده می شود حروف بزرگ) */ /* گوشه های دکمه را گرد کنید. مقادیر سه ویژگی زیر باید یکسان باشند، زیرا آنها یکسان هستند، فقط برای مرورگرهای مختلف*/ -webkit-border-radius: 6px; /* گوشه های گرد برای کروم */ -moz-border-radius: 6px; /* گوشه های گرد برای Mozilla FireFox */ border-radius: 6px; /* گوشه های گرد برای همه مرورگرهای دیگر، از جمله موبایل */ اندازه قلم: 14 پیکسل. /* اندازه متن دکمه */ font-weight: bold; /* سبک متن (بولد به معنای پررنگ است) */ padding-top: 11px; /* padding بالا از لبه عنصر تا محتوای آن */ padding-bottom: 10px; /* padding از پایین عنصر به محتوای آن */ padding-left: 35px; /* padding سمت چپ لبه عنصر به محتوای آن */ padding-right: 35px; /* padding به سمت راست از لبه عنصر تا محتوای آن */ /* پس زمینه گرادیان - پس زمینه دکمه گرادیان */ پس زمینه-رنگ: #000000; /* رنگ پس‌زمینه دکمه در صورتی که گرادینت توسط مرورگر پشتیبانی نمی‌شود */ /* در ویژگی‌های زیر، رنگ‌ها باید به همان صورت مشخص شوند، زیرا فقط برای مرورگرهای مختلف یکسان هستند. بیایید نگاهی به ملک اول بیندازیم. قسمت from(#676767)، به (#3B3B3B) به این معنی است که ما باید یک گرادیان نمایش دهیم، جایی که از رنگ #676767) انتقالی به رنگ #3B3B3B */ پس زمینه وجود دارد: -webkit-gradient(خطی، بالا سمت چپ، پایین سمت چپ، از(#676767)، به (#3B3B3B)); پس زمینه: -moz-linear-gradient(top, #349622, #246416); فیلتر: progid:DXImageTransform.Microsoft.gradient(startColorstr="#349622", endColorstr="#246416"); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#349622, endColorstr=#246416)"; /* Drop Shadow - سایه دکمه. رنگ سایه مشخص شده در RGBA */ -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.3); -moz-box-shadow: 0 2px 5px rgba(0,0,0,0.3)؛ box-shadow: 0 2px 5px rgba(0,0,0,0.3); ) /* در حالت شناور - هنگام نگه داشتن نشانگر ماوس، دکمه را استایل کنید. همه چیز تقریباً مانند بلوک قبلی است */ .wpcf7 input.wpcf7-submit:hover( مکان نما: اشاره گر؛ متن-تزیین: هیچکدام؛ پس زمینه-رنگ: #000000؛ پس زمینه: -webkit-gradient(خطی، بالا سمت چپ ، پایین سمت چپ، از(#246416)، به(#349622)؛ پس زمینه: -moz-linear-gradient(top, #246416, #349622); فیلتر: progid:DXImageTransform.Microsoft.gradient(startColorstr="# 246416 ", endColorstr="#349622"); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#246416, endColorstr=#349622)"; ) /* سبک دکمه کلیک - هنگام کلیک کردن روی آن تقریباً مانند بلوک قبلی */ .wpcf7 input.wpcf7-submit:active( top: 1px; color: #d8c6e2; /* رنگ متن دکمه با کلیک */ background-color: #000000; background : -webkit-gradient( خطی، بالا سمت چپ، پایین سمت چپ، از (#FF0000)، به (#246416)؛ پس‌زمینه: -moz-linear-gradient (بالا، #FF0000، #246416)؛ فیلتر: progid:DXImageTransform.Microsoft.gradient(startColorstr. ="#FF0000", endColorstr="#246416"); -ms-filter: "progid:DXImag eTransform.Microsoft.gradient(startColorstr=#FF0000, endColorstr=#246416)"; -webkit-box-shadow: هیچ. -moz-box-shadow: هیچ. box-shadow: هیچ ) /* پیام های CF7 - سبک پیام ها در مورد ارسال موفقیت آمیز، خطاها و غیره. ** رنگ متن */ حاشیه: 0؛ /* لایه بیرونی */ پد: 20 پیکسل؛ /* لایه داخلی */ /* گرد کردن گوشه بین مرورگر - 3 ویژگی زیر */ -webkit-border-radius: 10px; -moz- border -radius: 10px; border-radius: 10px; ) .wpcf7 .wpcf7-mail-sent-ok( /* سبک پیام موفقیت آمیز */ border:none; /* حاشیه بلوک پیام */ background-color:#7ad33f; / * پس‌زمینه */ حاشیه: 0؛ /* لایه بیرونی */ لایه‌بندی: 20 پیکسل؛ /* لایه‌بندی داخلی */ /* گرد کردن گوشه بین مرورگر - 3 ویژگی زیر */ -webkit-border-radius: 10px؛ -moz- border-radius: 10px; border-radius: 10px; .wpcf7 .wpcf7-mail-sent-ng( border:none; background-color:#349622; margin:0; padding:20px; -webkit-border-radius: 10px؛ -moz-border-radius: 10px; border-radius: 10px; color: white; ) .wpcf7 span.wpcf7-not-valid-tip( border:none; backgrou nd-color:#349622; padding: 5px; padding-left: 5px padding-right: 5px; border-radius: 10px; عرض: 290 پیکسل رنگ سفید؛ /* Drop shadow */ -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0. 3)؛ -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.3)؛ box-shadow: 3px 3px 3px rgba(0,0,0,0.3); ) .wpcf7-form .fleft( float: چپ؛ ) .wpcf7-form .mright20( margin-right: 20px; ) .wpcf7-form .mright40( margin-right: 40px; ) .wpcf7-form: .clear هر دو؛ )

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

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

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

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

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

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

جلوی سایت

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

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

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

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

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

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

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

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

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

قالب فرم

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

طرح بندی فرم

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

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

نحو کد کوتاه

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

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

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

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

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

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

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


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

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

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

انواع میدان

  • فیلدهای متنی: متن، ایمیل، تلفن، آدرس اینترنتی، textarea
  • فیلدهای عددی: عدد، محدوده
  • فیلدهای تاریخ: تاریخ
  • چک باکس ها، رادیوها، لیست ها: چک باکس، رادیو، را انتخاب کنید
  • فیلد آپلود فایل: فایل
  • 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 ایمیل ارسال نمی کند. مقاله من درست را شرح می دهد پیکربندی افزونه فرم تماس 7برای اینکه همه چیز به درستی کار کند

پلاگین فرم تماس 7 چگونه کار می کند

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

به این معنا که، شما باید 2 صندوق پستی را ثبت کنید - فرستنده و گیرنده. بهتر است فرستنده را در نامه Yandex ایجاد کنید و گیرنده صندوق پست رسمی سایت شما باشد.

مدتی است که افزونه فرم تماس 7 از کار افتاده است - نامه ای ارسال نمی کند، بلکه به سادگی بارگیری را به هم می زند. من یک راه حل پیدا کردم - من یک افزونه رایگان WPForms Lite را نصب کردم. تنظیم آن بسیار آسان است، نیازی به نصب افزونه های اضافی برای پیکربندی ارسال پیام ندارد، اما متوجه شدم که با هر ایمیلی کار نمی کند. در یکی از آنها نامه دریافت نکردم، اما در دیگری نامه ارسال می شود.

راه اندازی افزونه فرم تماس 7. دستورالعمل

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

2) راه اندازی فرم تماس افزونه فرم تماس ۷ کلیک کنید "تغییر دادن"و فراتر "الگوی فرم". در اینجا مثالی از شکل ظاهری آن با فیلدهای مورد نیاز آورده شده است: نام کاربری، ایمیل، پیام و دکمه ارسال:

نام شما (الزامی)

ایمیل شما (الزامی)

پیام

3) Tab "حرف"مسئول ظاهر نامه هایی است که دریافت می کنید.

به چه کسی- آدرس صندوق پستی گیرنده

از چه کسی – <адрес ящика отправитель>

موضوع

بدن نامه

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

توجه! برای اینکه افزونه فرم تماس ۷ بتواند ایمیل ارسال کند، باید افزونه WP-Mail-SMTP دیگری را نصب کنید. این اوست که دو آدرس پست الکترونیکی فرستنده و گیرنده را به هم مرتبط می کند و عملکردهای سیستمی را برای ارسال نامه انجام می دهد.

راه اندازی افزونه WP-Mail-SMTP. دستورالعمل

از ایمیل- آدرس صندوق پستی فرستنده

از نام– برای مثال، نام سازمان یا نام شما

پست کننده- عملکرد ارسال نامه. "ارسال تمام ایمیل های وردپرس از طریق SMTP" را انتخاب کنید.

میزبان SMTP- برای ایمیل Yandex smtp.yandex.ru

پورت SMTP- برای Yandex mail 465

رمزگذاری– از رمزگذاری SSL استفاده کنید

احراز هویت– بله: از احراز هویت SMTP استفاده کنید

نام کاربری- در فرستنده ایمیل خود وارد شوید

کلمه عبور- رمز عبور در فرستنده ایمیل شما

راه اندازی تکمیل شد. تغییرات خود را ذخیره کنید

نحوه قرار دادن فرم تماس 7 در یک صفحه

در تنظیمات فرم تماس، به خط بالا توجه کنید:

باید در هر صفحه ای کپی و پیست شود. همه آماده است.

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

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

پیمایش صفحه:

توضیحات فرم تماس وردپرس 7

۲) افزونه فرم تماس ۷ را در ادمین وردپرس فعال کنید.

3) مطابق تصویر به تب جدید ایجاد شده بروید:

4) روی برگه «افزودن جدید» کلیک کنید و زبان فرم پیش فرض را مشخص کنید یا زبان مورد نظر را انتخاب کنید

5) نام فرم تماس را مشخص کرده و روی save کلیک کنید.

6) اکنون ما یک کد کوتاه داریم که می توان آن را کپی و در یک پست یا نوار کناری قرار داد تا فرم را نمایش دهد - contact-form-7 id="1252" title="(!LANG:Form number 1" (надо взять в квадратные скобки как на рисунке).!}

7) شکل ما به این صورت است:

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

نحوه نمایش فرم تماس 7 در یک مکان دلخواه در قالب

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

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

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

با تشکر از او، شما همچنین جعبه هایی مانند زیر خواهید داشت:

پیکربندی پاسخ به پاسخ برای فرم تماس 7

AT نسخه جدیدپلاگین CF7 4.4 و بالاتر، توسعه دهنده توصیه می کند وارد قسمت from (در اینجا در پوسته زیر است)

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

چگونه می توان از پست کننده به کاربر پاسخ داد؟

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

راه حل این مشکل و مثل همیشه ساده است. شما در این زمینه نیاز دارید سرصفحه های اضافیاضافه کردن کد:

پاسخ دادن به:

البته، your-email-sh باید با کد کوتاه ایمیل شما جایگزین شود. پوست زیر را ببینید:


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

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

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

این مطالب پیکربندی فرم تماس 7 را به تفصیل شرح می دهد - افزونه ای برای چنین پلت فرم محبوبی برای ایجاد و تبلیغ سایت هایی در وب جهانی مانند وردپرس. این ابزار نرم افزاری به شما امکان ایجاد و پیکربندی فرم های تماس را می دهد.

کمی در مورد وردپرس

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

نقاط قوت و ضعف این پلتفرم برای ایجاد و تبلیغ وب سایت

مزایای این پلت فرم نرم افزاریچنین:

    سادگی و باز بودن کدهای منبع

    مقدار قابل توجهی از اطلاعات پس زمینه.

    امکان توسعه هر منبع موضوعی در اینترنت در کمترین زمان ممکن.

    عملکرد بالا بدون افزودنی های نرم افزاری اضافی (افزونه ها).

اما معایب در این مورد عبارتند از:

    سایت های ایجاد شده بر اساس "وردپرس" با بار سنگین مقابله نمی کنند.

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

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

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

تخصص "فرم های تماس 7"

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

سفارش نصب افزونه

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

    با دانلود یک آرشیو ZIP از وب جهانی و "آپلود" آن در دایرکتوری مربوطه منبع اینترنتی.

    استفاده از انواع کلاینت های FTP

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

    به پنل مدیریت وردپرس بروید.

    سپس باید به بخش "افزونه ها" بروید.

    در پنجره باز شده گزینه «Add New» را انتخاب کنید.

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

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

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

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

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

    الگوریتم تنظیم "فرم های تماس 7"

    راه اندازی فرم تماس 7 شامل موارد زیر است:

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

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

      سپس در صورت لزوم قالب آن را مجددا پیکربندی کنید.

      تغییرات ایجاد شده را ذخیره می کنیم.

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

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

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

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

      به منوی این افزونه رفته و مورد «Forms» را انتخاب کنید.

      در پنجره ای که بعد از آن باز می شود، باید کادر کنار آیتم «Contact form1» را علامت بزنید.

      سپس، در بالای آن، در لیست کشویی «اقدامات»، مورد «حذف» را انتخاب کنید.

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

      در قسمت بعدی، آیتم منو را انتخاب کنید: "Create New" در پنل مدیریتی "Wordpress" "Contact Form7".

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

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

    نام فرم را تنظیم کنید

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

    ویرایش قالب "فرم های تماس 7"

    در همان پنجره با نام فرم ایجاد شده، 4 تب وجود دارد. اولین مورد قالب است. به طور پیش فرض، فقط 5 عنصر در اینجا تشکیل می شود:

      مکانی که نام بازدید کننده منبع اینترنتی تایپ می شود.

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

      فیلد دیگری به شما امکان می دهد موضوع سوال را تایپ کنید.

      آخرین عنصر فرم پیش فرض دکمه ای با برچسب Submit است.

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

    تنظیم طول میدان و موارد دیگر

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

      به عنوان مثال، باید تعداد کاراکترهای نام بازدیدکننده منبع اینترنتی را به 55 کاراکتر افزایش دهید. به طور پیش فرض 40 عدد وجود دارد.

      برای این کار در انتهای کد اعداد 60/55 را اضافه کنید. نتیجه یک کد خواهد بود. پس از ذخیره تغییرات، طول این فیلد برابر با 60 خواهد بود و بیشترین مقدارکاراکترهایی که می توان در آن تایپ کرد - 55.

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

      سایر برگه های فرم

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

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

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

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

        پست الکترونیکی - مکانی برای وارد کردن نام صندوق پست الکترونیکی.

        URL - فیلدی برای تایپ آدرس یک صفحه وب.

        شماره تلفن - به شما امکان می دهد شماره تلفن را در قالب بین المللی وارد کنید.

        عنصر "Number (spinbox)" به شما امکان می دهد یک فیلد ورودی با هر مقدار صحیح (به عنوان مثال، سن بازدید کننده) ایجاد کنید.

        عنصر "Number (Slider)" یک نوار لغزنده به فرم اضافه می کند که با آن می توانید یک مقدار عددی را از یک محدوده مشخص انتخاب کنید.

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

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

        مورد بعدی - "منوی کشویی" - به شما امکان می دهد پارامتر مورد نیاز را از یک لیست ثابت انتخاب کنید.

        اما "CheckBoxs" برای انتخاب یک یا چند مقدار از یک لیست مشخص طراحی شده است.

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

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

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

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

        مورد بعدی «ارسال فایل» است. به شما امکان می دهد فایلی با توضیحات و نظرات مختلف برای مدیر منبع به متن نامه اضافه کنید.

        آخرین مورد - "دکمه ارسال" - به شما امکان می دهد عنصر رابط مربوطه را اضافه کنید.

      تغییرات را ذخیره کنید

      پس از تنظیم مقادیر لازم و پیکربندی صحیح فرم، باید همه اینها را ذخیره کنید. برای این کار در پنجره ویرایش افزونه به قسمت بالای آن بالا می رویم. در اینجا باید دکمه ذخیره وجود داشته باشد. نشانگر مانیپولاتور را روی آن ببرید و یک کلیک روی آن بزنید. در پاسخ کد فرم ظاهر می شود که با استفاده از همان نشانگر ماوس آن را انتخاب کرده و کپی می کنیم. سپس به پنل مدیریتی سیستم مدیریت محتوا در آیتم «صفحات» بروید. سپس یک صفحه جدید با نام لازم ایجاد می کنیم (به عنوان مثال، "بازخورد"، "مخاطبین" یا "پرسش از مدیر منبع"). سپس مکان نما شماره گیری را در قسمت ورودی کد آن ترجمه می کنیم. در این حالت، لازم است حالت شماره گیری کد را در پنل گزینه ها به «Text» تغییر دهید. پس از آن، کد فرم را که قبلاً به دست آورده اید، قرار دهید. سپس، در سمت راست رابط، دکمه «انتشار» را پیدا کرده و با ماوس روی آن حرکت می کنیم. در مرحله بعد، یک کلیک دکمه سمت چپ ماوس را روی این عنصر از رابط سیستم مدیریت محتوا انجام می دهیم.

      بررسی نتیجه

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

      مزایا و معایب افزونه جایگزین، گزینه ها

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

      نتایج

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