Проста форма за контакт с помощта на Ajax. Ajax формуляр за обратна връзка в модален прозорец Модален прозорец с формуляр за абонамент име имейл

Посветих се на това как можете да създадете изскачащ прозорец, който се показва на сайта веднъж и след определен интервал от време. Така че като опция можете да вмъкнете формуляр в този прозорец. Това може да бъде форма за абонамент или форма за контакт, като цяло, всичко. По-добре е да показвате Ajax формуляри в изскачащи прозорци, така че данните да се изпращат без презареждане на страницата.

Структура на статията

Ако правите уебсайт на двигател, например Joomla или WordPress, тогава можете, разбира се, да използвате различни готови решения за формуляри, включително дизайнери. Но какво ще стане, ако просто проектирате в чист HTML и клиентът поиска да „съживи“ формулярите, така че да работят. Тук тази форма идва на помощ.

UPD. 02.08.2018 г
Статията е пренаписана, като се има предвид, че формулярът е публикуван в GitHub

И така, да започваме. Първо, изтеглете източниците на формуляра от моето хранилище на GitHub.

Сглобих тази сборка с помощта на диспечера на задачите Gulp. Писах за това как да работя с него, не забравяйте да прочетете.

Свързване на формата със сайта

Разопаковайте архива с формуляра. След това копирайте цялото съдържание от папката dist в папката с формуляри (например ajax-form) във вашия шаблон на сайт. След това свързваме ресурси - стилове и скриптове. В папките css и js има две версии - компресирана и обикновена. Ако планирате да правите промени в кода в бъдеще, по-добре е да свържете некомпресирани версии.

Ако вашият сайт вече има активирана библиотека jQuery, не е необходимо да я свързвате. Обръщам внимание на .

Инициализиране на формата

Нека незабавно да отбележа, че валидирането на полето е организирано с помощта на HTML5.

Формулярът се извиква чрез метода .simpleSendForm(), например:

$("#idForm").simpleSendForm();

Вместо #idForm посочваме идентификатора на формуляра. Като цяло можете да намерите кода за инициализация на формуляра във файла scripts.js. Кодът за извикване на плъгина може да бъде изрязан от там и написан точно преди . Не забравяйте за jQuery.(document).ready().

Формата може да приеме някои опции.

Настроики

• successTitle (низ) — Заглавие на благодарственото съобщение, когато формулярът е изпратен. По подразбиране е „Благодарим ви, че избрахте нас!“
• successText (низ) – Текстът под заглавието на благодарственото съобщение. По подразбиране е „Ще се свържем с вас скоро“.
• errorTitle (низ) — заглавие на съобщението за грешка при подаване на формуляр. По подразбиране е „Съобщението не е изпратено!“.
• errorSubmit (низ) — текст на съобщението за грешка при подаване на формуляр. По подразбиране е „Грешка при изпращане на формуляр!“.
• errorNocaptcha (низ) — текст за грешка, ако captcha не е попълнена.
• errorCaptcha (низ) — текст за грешка, ако проверката е неуспешна.
• mailUrl (низ) — път до манипулиращия файл. По подразбиране е "../form-submit/submit.php". Трябва да промените и да посочите пълния път, ако вашата папка „form-submit“ не е в корена на сайта.
• autoClose (boolean) - Автоматично затваря прозореца след успешно изпращане на формуляр (за формуляри в модален прозорец). Прозорецът на формуляра се затваря, показвайки благодарствено съобщение след 5 секунди. Този пътможе да бъде отменен.
• autoCloseDelay (число) - продължителност (в милисекунди) на показване на благодарственото съобщение, след което то ще се затвори. По подразбиране е 5000 (5 секунди).
• отстраняване на грешки (булев) - невярно по подразбиране. Активирайте отстраняването на грешки, ако има проблеми с формуляра. Вижте съобщенията за грешка в конзолата.
• captcha (булев) - невярно по подразбиране. Активирайте или деактивирайте Recaptcha 2.0.
• captchaPublicKey (низ) — публичен ключ на recaptcha.

Формуляр в модален прозорец

Нашата форма може да бъде показана и в модален прозорец. Модалът ще бъде показан от библиотеката.

HTML код

Код на бутона

Поискайте обаждане

Код на формуляра

Инициализирайте модалния прозорец и формата. Нека накараме прозореца да се затвори автоматично след 3 секунди. след успешно подаване на формуляра. Можете също да намерите кода за повикване на Magnific Popup във файла scripts.js.

Извикване на формуляр с модален прозорец // ======= Init Magnific Popup ======= $(".modal-popup").magnificPopup(( type: "inline", fixedContentPos: false, fixedBgPos : true , overflowY: "auto", closeBtnInside: true, preloader: false, midClick: true, RemoveDelay: 300, mainClass: "mfp-top-up" )); // ===== Init modal form ==== $("#idForm").simpleSendForm (( successTitle: "Вашата кандидатура е приета!", successText: "Наш служител ще се свърже с вас възможно най-скоро." , autoClose : true, autoCloseDelay: 3000 )); Как да активирам Recaptcha?

Ако искате да активирате recaptcha във формуляр, тогава трябва да добавите празен блок с класа recaptcha в html кода на формуляра на мястото, където искате да го показвате. След това в кода за извикване на приставката за формуляри предаваме опцията captcha със стойността true и предаваме вашия публичен ключ recaptcha към опцията captchaPublicKey. Можете да получите публични и частни ключове.

// ===== Init captcha във формуляра ==== $("#idForm").simpleSendForm(( successTitle: "Вашата кандидатура е приета!", successText: "Наш служител ще се свърже с вас възможно най-скоро ." , autoClose: true, autoCloseDelay: 3000, captcha: true, captchaPublicKey: "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" ));

След това отворете файла за обработка на формуляри submit.php от директорията form-submit. Търсим променливата recaptchaOn (около 7-ия ред) и я настройваме на true. След това потърсете променливата $secret (приблизително ред 89) и променете частния ключ на свой собствен.

Общо взето всичко. След тези манипулации трябва да видите captcha.

Моля, обърнете внимание, че на демонстрационния сайт captcha работи в тестов режим, тъй като са посочени тестови ключове от Google.

Сега нека да разгледаме файла за обработка на формуляри (submit.php) и да преминем през основните части от кода. Манипулаторът работи на PHP, така че ако искате да тествате формата, ще трябва да използвате .

Възможни грешки Съобщението от формуляра не се изпраща, предварителното зареждане просто работи и това е. Какъв е проблемът?

Вижте дали пътят до файла на манипулатора е указан правилно в инициализацията на формуляра:

mailUrl: — път към манипулиращия файл

Също така проверете дали recaptcha е активирана правилно. Тоест, ако е деактивирано, тогава опциите за recaptcha в кода за инициализация и $recptchaOn във файла на манипулатора трябва да бъдат зададени на false или true, ако recaptcha е активиран.

Не е показано Google Recaptchaвъв формата на

Проверете дали стойностите на recaptcha (извикване на recaptcha) и $recaptchaOn (файл на манипулатора) са предадени - вярно. Проверете и дали сте посочили правилно ключовете - public и private.

Направих всичко според инструкциите, но формата не работи, къде мога да търся грешката?

Преди всичко ви съветвам да погледнете в конзолата на браузъра и да проверите за грешки. Също така проверете дали сте активирали библиотеката jQuery. Проверете дали файлът scripts.js е включен правилно. Ако всичко е наред, опитайте да активирате отстраняването на грешки с опцията debug: true. След като включите, вижте конзолата за грешки.

Това е формата. Използвайте го на вашия уебсайт, надявам се да ви бъде полезен. Какво друго да кажа? Нека поговорим сега - в коментарите. Питайте ако има нещо неясно. Освен това, ако откриете грешка, моля, уведомете ме незабавно и ние ще я коригираме...

Това е всичко. Благодаря за вниманието. Ще се видим в следващите публикации!

Поздрави на моите читатели, натрупах опит и ще ви разкажа за принципите на работа на формата обратна връзка php. Ще ви покажа илюстративни примери, така че да разберете как работи всичко и как се осъществява взаимодействието между самата форма за въвеждане (неговите полета за въвеждане) и манипулиращия файл, написан на PHP. Освен това можете да изтеглите източниците безплатно заедно с .

Разбира се, ще бъде чудесно, ако имате поне малко разбиране от HTML / CSS, защото... Ще трябва да плъзнете кода на вашата страница по аналогия. Няма да засягаме езика PHP; ще ви покажа всички необходими промени, които трябва да направите за себе си.

АКТУАЛИЗАЦИЯ: Въз основа на отговорите на читателите разбрах, че имам нужда от нещо по-красиво и функционално, моля, срещнете се с мен, проверете го и разгледайте. Изберете кой ви харесва повече)

АКТУАЛИЗАЦИЯ 2: Версия 3.0 Adaptive Landing + ajax формуляр с предаване на UTM тагове, прочетете и вижте. Ще ти хареса

Спомних си себе си, когато за първи път се опитах сам да създам формуляр за обратна връзка в PHP и, честно казано, беше трудоемко, защото... Не разбрах какво и как се случва. Търпение и постоянство, приятели, и ще успеете.

PHP форма за обратна връзка – структура

Ще проучим анализа на самата форма за обратна връзка, използвайки пример целева страница (Целева страница), между другото, има отделна статия за. Можете да видите как работи това в действие, като използвате бутоните по-долу, прикачвам изходния код на тази страница от една страница и главния файл за обработка на php (този файл ще обработи и изпрати имейла)

След като изтеглите източниците и разопаковате архива, ще видите следната файлова структура:

• изображение – всички изображения, които се използват за самата целева страница, бутони и др.
• js - javascript скриптове, които предоставят, например, изскачащ модален прозорец на страница и други визуални ефекти
• index.html - индекс файл на нашата страница от една страница
• index1.php е файл манипулатор, в който се прехвърлят стойности от формата, след което се генерира писмо от получените променливи и се изпраща на посочения имейл адрес. Index1.php ще действа и като междинна страница за уведомяване за успешното изпращане на данни с автоматично пренасочване обратно към index.html (т.е. нашата страница от една страница)

Важно е вашият хостинг, където се намират файловете на сайта, да поддържа PHP обработка, в противен случай файлът index1.php няма да бъде изпълнен и няма да работи. За да изясните този нюанс, свържете се с кампанията, в която е регистриран вашият хостинг, или просто го тествайте - работи, това означава, че има поддръжка. Ако не, активирайте опцията за поддръжка на php език

Разгледайте диаграмата как си взаимодействат всички елементи (страница, формуляр, манипулатор)

Изходен код за извикване на формуляра и манипулатора

Нека да разгледаме как работи един от бутоните, който извежда модален изскачащ прозорец, съдържащ формуляр за обратна връзка. Това дадено източник- не е само един, два вмъкнати на страницата и ще работи, ще трябва да го персонализирате сами, за да отговаря на вашия дизайн и нужди.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

Поискайте обратно повикване Поискайте обратно повикване

Поискайте обратно повикване Поискайте обратно повикване

По-долу е пълният изходен код на манипулатора index1.php, за да настроите изпращане до вашата пощенска кутия, променете „ [имейл защитен]„за себе си, останалото по принцип може да остане непроменено

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

Ще се свържем с вас

Ще се свържем с вас body ( background: #22BFF7 url(img/zakaz.jpg) top -70% center no-repeat; ) setTimeout("location.replace("/index.html")", 3000); /*Промяна на адреса на текущата страница след 3 секунди (3000 милисекунди)*/

Проверка на функционалността на формата

Извикайте прозореца и въведете данни за тестова проверка на нашата форма

Нека ви напомня още веднъж, вашият хостинг трябва да поддържа обработка php файлове, в противен случай нашият манипулатор просто няма да бъде изпълнен и няма да бъде изпратено писмо до посочения имейл адрес. Резултат от успешно попълнен формуляр за обратна връзка

Това е всичко за мен, опитах се да предам смисъла и действието на сценария по възможно най-добрия начин. Ако имате въпроси, не се колебайте да се свържете с мен в коментарите или във VK (вижте данните за контакт). Желая ви лека и ползотворна работа.

Здравейте всички. Бяхме бомбардирани с въпроси за това как да внедрим формуляр, който се появява в модален прозорец след щракване върху бутон и след изпращане ще се покаже съобщение за успех или неуспех.

Мисля, че има много подобни неща в интернет, но тъй като хората питат, реших да го направя. Освен това такава функционалност трябва да присъства на почти всяка целева страница, за да се приложи бутон за обратно повикване. И наистина, сега има все повече и повече резултати от AB тестове, които показват, че отворените форми работят по-зле от тези, скрити в модален прозорец и отворени след натискане на бутон.

Някои твърдят, че това се дължи на факта, че хората бавно „развиват имунитет“ и отворената форма е агресивна продажба. Твърди се, че сега е моментът, когато потребителят, като види отворен формуляр, вярва, че се опитват да му „продадат“ нещо. Не съм напълно съгласен с тази теория, но има зрънце истина. Това може да е вярно в някои видове бизнес. Е, сега нека се заемем с прилагането на формуляра.

Забележка! Няма да описвам подробно всяко действие, но ви предлагам готова версия в изходния код. Ако имате въпроси, пишете в коментарите. ще се разберем :)

Днес ще започнем не с jQuery, а с оформлението на бутона и формата. Ще включим всички скриптове в края на страницата.

Бутон, който при натискане отваря модален прозорец:

Изпратете вашата кандидатура

Можете да зададете произволен клас, но в href напишете #modal - това ще бъде id на контейнера със засенчване и форма за контакт.

Сега ще дам кода за формуляра и блока, на който ще се намира формуляра:

Оставете вашите данни за контакт и наш консултант ще се свърже с вас Искам тази форма за моя уебсайт

След добавяне на стилове изглеждаше така:

За създаване на модален прозорец е използвана библиотеката Remodal. Това е набор от css и js файлове, само за създаване на анимирани модални прозорци. Можете да го изтеглите от връзката или с моите редакции в края на статията.

Добавяме стилове между таговете head:

И преди затварящия етикет body добавете скриптове:

Script.js е скрипт за обработка на формата. Същият Ajax, който ни позволява да извършим цялата процедура без презареждане на страницата:

$(document).ready(function () ( $("form").submit(function () ( // Получаване на ID на формуляра var formID = $(this).attr("id"); // Добавяне на хеш към името ID var formNm = $("#" + formID); $.ajax(( тип: "POST", url: "mail.php", данни: formNm.serialize(), успех: функция (данни) ( // Извежда текст на резултата от изпращането $(formNm).html(данни); ), грешка: функция (jqXHR, текст, грешка) ( // Извежда текст на грешката при изпращане $(formNm).html(грешка); ) )); върне невярно; ) ); ));

Оригинала няма да го дам css коди js от файловете, отговорни за модалния прозорец и формата, тъй като те са доста големи. Ако е така, вижте източника. Но манипулаторът на PHP е до голяма степен стандартен (ако мога така да се изразя):

Моля, не забравяйте да промените адресите си електронна пощасам.

Това е Ajax формата, която получихме. Съжалявам, че не се опитах да обясня подробно как е направен всеки елемент. Просто исках да дам завършен резултат, но няма смисъл да описвам всички анимации и изяви. Изтеглете източника и го внедрите на вашия уебсайт. И това е всичко за днес. Успех на всички!

Момчета, призовавам ви да тествате формата на реално или виртуален сървър(хостинг). Моля, уверете се, че вашият сървър поддържа PHP, имате платен план, а не пробен период. В противен случай в 90% от случаите формата няма да работи.

Не чакайте писмо у вас пощенска кутия, ако просто отворите индексния файл в браузъра и щракнете върху бутона „Изпращане“. Php е сървърен език!

Ако сте твърде мързеливи, за да го разберете и да направите формуляра сами, тогава препоръчвам да обърнете внимание.

Актуализираната версия на статията се намира