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

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

مرحله 1. توضیحات کلیو نحوه عملکرد فرم بازخورد:

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

• images - پوشه ای که تمام تصاویر فرم ما در آن ذخیره می شود.
• index.html - فایل اصلی "شاخص" که حاوی دکمه فراخوانی فرم بازخورد است.
• contact.html - فایلی که حاوی خود فرم است. این فایل است که به پنجره modal متصل می شود.
• send.php - فایل کنترل کننده که پیامی را ارسال می کند.
• jquery.js - چارچوب اصلی jQuery.
• style.css فایل شیوه نامه آبشاری فرم ما است.

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

مرحله 2. دکمه برای فراخوانی فرم.

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

یک پیام برای مدیر بنویسید

مرحله 3. خود فرم + تنظیمات مربوط به آن

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

ارسال پیام به مدیریت:

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

مرحله 4. کنترل کننده مسئول ارسال ایمیل

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

مرحله 5: تنظیمات Core jQuery Framework

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

مرحله 6 استایل دادن به فرم

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

مرحله 7. بهبودهای جی کوئری

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

$(function() ($("a").overlay(function() ( var wrap = this.getContent().find("div.wrap"); if (wrap.is(":empty")) ( wrap.load(this.getTrigger().attr("href")); ) )); ));

نتیجه.

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

با احترام، jQuery Explorer شما - M.K.

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

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

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

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

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

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

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

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

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

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

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

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

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

پس بزن بریم.

ابتدا در منوی سمت چپ پنل مدیریت، تب تماس فرم 7 را پیدا می کنیم. منویی با دو مورد در زیر آن ظاهر می شود - "Forms" و "Add New".

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

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

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

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

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

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

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

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

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

اولین چک باکس نشان می دهد که آیا این فیلد ضروری است یا اختیاری (یک ستاره اضافه می کند).

پس از تنظیم فیلد، 2 کد کوتاه خواهید داشت:

• "این کد را کپی کنید و آن را در قالب فرم در سمت چپ بچسبانید" - این کد به همان روشی که سایر کدها در کد فرم درج می شود.
• "و کد زیر را در قالب حرف زیر قرار دهید" - برای طراحی حرف در بلوک بعدی به این کد نیاز داریم.

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

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

وظیفه ما درج تمام اطلاعات در نامه است.

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

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

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

فیلد هدر اضافی حاوی تگ Reply-To: است تا هنگام پاسخ به نامه دریافتی از وبلاگ خود، پیامی را نه به وبلاگ، بلکه به آدرسی که فرستنده نامه در قسمت فرم مشخص کرده است ارسال کنید. شما نیازی به تغییر این فیلد ندارید.

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

در انتها سایتی که نامه از آن ارسال شده مشخص شده است.

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

هر اطلاعات متنیاین بلوک (به جز برچسب ها) را می توان به دلخواه تغییر داد. همچنین می‌توانید توضیحات و برچسب‌های مبادله را اضافه کنید و آنها را به ترتیبی که برای شما مناسب است قرار دهید.

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

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

می توانید ارسال یک کپی را تنظیم کنید، به عنوان مثال، برای مدیر یا حسابدار خود.

در این بلوک می توانید پیام هایی را که کاربر پس از کلیک روی دکمه ارسال پیام مشاهده می کند، پیکربندی کنید. اگر می خواهید چیزی را تغییر دهید - لطفا، من همه چیز را همانطور که هست رها کردم.

پس از پر کردن تمام فیلدها، به بلوک "نام فرم" به ابتدا بازگردید و روی دکمه "ذخیره" واقع در سمت راست کلیک کنید.

این افزونه فرمی را که ایجاد کرده‌اید در لیست فرم‌های معتبر قرار می‌دهد و یک کد خاص مانند زیر به آن اختصاص می‌دهد:

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

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

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

دو راه برای خلاص شدن از شر هرزنامه ها وجود دارد:

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

استفاده از افزونه Akismet راحت تر است زیرا به طور مستقل داده های ورودی (نام ها، آدرس ایمیلالف، پیوندها) و بر اساس پایگاه انباشته شده، در مورد هرزنامه یا غیر هرزنامه بودن پیام نتیجه گیری می کند.

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

1. نصب کنید پلاگین Akismetبه سایت خود بروید و آن را فعال کنید - .

2. داده های اضافی را به برچسب های فرم تماس اضافه کنید:

• در فیلد با نام نویسنده، akismet:author را اضافه کنید
• در قسمت ایمیل فرستنده akismet:author_email
• در فیلد آدرس سایت akismet:author_url

باید به این شکل باشد:

پس از ذخیره، فرم تماس باید تمام پیام های ارسال شده توسط هرزنامه ها را مسدود کند. شما می توانید با استفاده از نام تست ویژه “viagra-test-123?” عملکرد فیلتر را بررسی کنید. - وقتی آن را وارد می کنید، یک پیغام خطا ظاهر می شود.

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

اگر متوجه شدید که Akismet برای شما مناسب نیست (بسیاری از هرزنامه ها را حذف می کند یا پیام های ضروری را مسدود می کند)، می توانید کپچا را فعال کنید. برای این کار افزونه Really Simple CAPTCHA را نصب کنید.

فرم تماس مورد نیاز را برای ویرایش باز کنید

از لیست برچسب ها، Captcha را انتخاب کنید. در تنظیمات تگ می توانید اندازه تصویر را با علامت انتخاب کنید وگرنه نباید چیزی را تغییر دهید. 2 تگ در پایین پنجره تنظیمات ظاهر می شود، یکی وظیفه نمایش تصویر را بر عهده دارد، دومی فیلد وارد کردن داده از این تصویر را نمایش می دهد.

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

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

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

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

این کار با استفاده از یک افزونه دیگر - Easy FancyBox انجام می شود.

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

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

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

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

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

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

اگر می‌خواهید دکمه‌ای را در نوار کناری تنظیم کنید، این مورد ضروری است. همیشه نوار کناری در وردپرس به شما اجازه نمی دهد کدهای کوتاه را اجرا کنید.

برای فعال کردن این تابع، باید فایل function.php را برای ویرایش باز کنید (مستقیماً از پنل مدیریت وردپرس) و کد زیر را قبل از بسته شدن براکت "?>" وارد کنید:

add_filter("متن_ویجت"، "do_shortcode");

اجرای تمام کدهای کوتاه در نوار کناری امکان پذیر خواهد بود.

من این فرم پاپ آپ زیبا را دریافت کردم:

گاهی اوقات نیاز به قرار دادن چندین فرم در سایت با تنظیمات مختلفو زمینه ها

به عنوان مثال، یک دکمه به فرمی با نام و شماره تلفن منتهی می‌شود و برای سفارش تماس مجدد از سایت استفاده می‌کند، و دکمه دوم باید فرم دیگری را باز کند که در آن درخواست سفارش دقیق می‌رود (با یک آدرس، یک قسمت توضیحات، قابلیت پیوست کردن فایل و غیره). در خود افزونه Contact Form 7، می توانید بی نهایت گزینه فرم ایجاد کنید، اما چگونه آنها را در دکمه های مختلف در یک صفحه قرار دهید؟

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

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

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

این در مورد ایجاد فرم های پاپ آپ است که مورد بحث قرار خواهد گرفت. من به شما خواهم گفت که چگونه این کار را در سایت هایی که فرم به صورت html یا با استفاده از افزونه Contact Form 7 در وردپرس ساخته شده است انجام دهید.

یک فرم پاپ آپ در html ایجاد می کنیم.

بیایید یک فرم برگشت به تماس را به عنوان مثال در نظر بگیریم. در زیر نمونه ای از فرمی است که با کلیک بر روی دکمه "درخواست تماس" یا "آیا می خواهید تماس بگیرید؟" باز می شود.

تماس بگیرید

برای باز کردن فرم ابتدا باید مخفی شود، این کار را با تعیین در div که شامل فرم است، style = "display: none;" انجام می دهیم. ، بنابراین فرم پنهان می شود. همچنین لازم است به این div یک شناسه معنی دار داده شود، زیرا در مورد ما از یک فرم برگشتی استفاده می کنیم، آن را callback می نامیم.

ایجاد یک فرم پاپ آپ در وردپرس (فرم تماس 7)

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

بنابراین، ما به 2 افزونه نیاز داریم: Contact Form 7 و Easy FancyBox، اولی برای ایجاد فرم است، دومی برای باز کردن فرم است، آنها را نصب کنید. اگر فرم مورد نیاز شما هنوز ایجاد نشده است، آن را ایجاد کنید.
ما فقط به کد کوتاه آن نیاز داریم که چیزی شبیه به این است:

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

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

[کوتاه شما]

کد کوتاه خود را نیز تنظیم کنید.

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

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

برای ما بنویسید

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

و این همه است. اگر مقاله را دوست داشتید، سپس به دوستان و همکاران خود در مورد آن بگویید، انگشت خود را "بالا" قرار دهید و در گروه (در نوار کناری سمت چپ) مشترک شوید، و من برای این کار، مقالات جالب تری برای شما خواهم نوشت.

با سلام به خوانندگانم، من تجربه کسب کرده ام و در مورد اصول فرم بازخورد به شما خواهم گفت. اتصالات php. من با مثال های گویا به شما نشان خواهم داد تا متوجه شوید همه چیز چگونه کار می کند و چگونه تعامل بین خود فرم ورودی (فیلدهای ورودی آن) و فایل handler نوشته شده با php وجود دارد. علاوه بر این، می توانید کد منبع را به همراه .

البته، اگر حداقل درک کمی از HTML / CSS داشته باشید، عالی خواهد بود. شما باید کد را بر اساس قیاس به صفحه خود بکشید. زبان PHPما تأثیر نخواهیم گذاشت، من تمام ویرایش های لازم را که باید برای خودم انجام شود نشان خواهم داد.

به روز رسانی: بر اساس بازخورد خوانندگان، متوجه شدم که چیزی زیباتر و کاربردی تر مورد نیاز است، ملاقات کنید، آن را بررسی کنید و نگاه کنید. کدام را بیشتر دوست دارید انتخاب کنید)

به روز رسانی 2: نسخه 3.0 فرود پاسخگو+ فرم آژاکس با عبور تگ های UTM، آن را بررسی کنید و ببینید. دوستش خواهی داشت

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

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

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

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

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

نگاهی به نحوه تعامل همه عناصر (صفحه، فرم، کنترل کننده) بیندازید

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

درخواست پاسخ به تماس درخواست پاسخ به تماس

در زیر کد منبع کامل کنترل کننده index1.php آمده است، به منظور تنظیم ارسال به صندوق پستی خود، تغییر " [ایمیل محافظت شده]» به تنهایی، بقیه، در اصل، می توانند بدون تغییر باقی بمانند

با شما تماس گرفته می شود ( پس زمینه: #22BFF7 url(img/zakaz.jpg) top -70% center no-repeat; ) setTimeout("location.replace("/index.html")", 3000); /*آدرس صفحه فعلی را بعد از 3 ثانیه (3000 میلی ثانیه) تغییر دهید*/

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

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

برای من همین است، سعی کردم معنا و کار فیلمنامه را منتقل کنم بهترین راه. اگر سؤالی دارید، در نظرات با من تماس بگیرید یا در VK با من تماس بگیرید (به جزئیات تماس مراجعه کنید). برایت راحت آرزو می کنم و کار مولدبرای تو.