Здравейте момчета. Към звездата Серьога. Знам, че не съм писал отдавна - вижте го, вижте го ... Този, в момента, честно казано, нямам време да говоря. Формирам robitimeme не от моя урок, а от уроците на моя познат - Кротова Романа.

Създайте формуляр zvorotny zv'azkuза сайтаще бъдем последователни. Тази статия за qiu ще бъде разделена на 3 урока.

Просто стартираме її в HTML и създаваме PHP-проба за укрепване на листата. Всичко ще бъде последователно, от нула до резултата. Така че, за да разберете всичко и бихте могли самостоятелно да изградите нуждите на областта.

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

Е, в третия (урокът се подготвя - тук ще има повече мощност), ще проверяваме повторно за проверка на Chi не от браузъра, а чрез допълнителни специални скриптове.

Видео 1. Създайте връзка към сайта.

Отдавам уважение! Заявка на формуляра - необходимо е вашият хостинг да поддържа PHP.

Ако обвинявате храната за някои неразумни моменти в изписването на общата форма за укрепване на листата - не злословете, слагайте ги в коментарите.

Код от урока как да създадете джакузи

Оста на резултатите от файла index.php

Познайте за какво да отмъстя в новото непретенциозна форма на zv'azku. Без регистрация и други звънци. Shchob не navantazhuvat ви zayvoyu іinformatsієyu.

Във файла submit.php:

Тук се изисква основна повторна проверка на формуляра за попълване, за да не се надмине празната информация. Yakscho всичко "бръмчи" - чаршафът е пренапрегнат. Ide пренасочване към страничната информация за успеха на здравината на листа.

Ако (!empty($_POST["name"]) И !empty($_POST["email"]) И !empty($_POST["message"])) ( $headers = "От: Роман Кротов " . Отговор -да се: [защитен с имейл]" . "X-Mailer: PHP/" . phpversion(); $theme = "Сигнал за нов сайт"; $letter = "Подробности за сигнала:"; $letter .=" "; $letter .="Име: ". $ _POST["name"]; $letter .=" Email: ".$_POST["email"]; $letter .=" Телефон: ".$_POST["phone"]; $letter .=" : " .$ _POST["съобщение"];if (mail(" [защитен с имейл]", $theme, $letter, $headers))( header("Местоположение: /testform/thankyou.php"); ) else ( header("Location: /testform"); ) ) else ( header("Местоположение: / тестова форма");)

Е, не искам да имам смисъл тук. там основна структура HTML документ и само един ред текст.

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

Днес, , є в структурата на целевата страница. Въпреки това е даден един от начините да приемете поканата или да редактирате каталога на вашите продукти, след дълго време, след като сте получили имейла си.

Създаване на формата на zvorotny zv'yazku - html маркиране

Обърнете ме с три поливки и в по-голямата част от водопадите имам викарна розетка за сгъване форма за контакти:

Отримати цена

Опитайте да отворите браузъра. датски коди се чудете на това, което сте видели, в зависимост от вида на интернет браузъра, който спечелите, може да изглежда нещо като това:

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


Създаване на формата на zvorotny zv'yazku - css

Нека стилизираме нашия формуляр и да го преместим в четим вид:

/* Стилове на формуляри */ #application (ширина: 475px; поле: 0 auto; ) /* Стилове на поле за въвеждане */ #applicationName, #applicationEmail, #applicationTelephone (ширина: 100%; височина: 73px; фон: няма; поле - отгоре: 25px;border:1px solid #fff;border-radius:40px;text-align:center;color:#fff;font-size:24px; , #applicationEmail:focus, #applicationTelephone:focus ( граница: 1px плътно # 30ad64; ) /*Стилизиране на текста, който да се показва в заместващия елемент*/ ::-webkit-input-placeholder ( цвят: #efefef; font-family: "PT Sans ", sans-serif; text-shadow: 0 1px 1px rgba (0, 0, 0, .3); ) ::-moz-placeholder ( цвят: #fff; семейство шрифтове: "PT Sans", sans-serif ; текстова сянка: 0 1px 1px rgba(0, 0 , 0, .3); ) /* Firefox 19+ */ :-moz-placeholder ( цвят: #fff; семейство шрифтове: "PT Sans", sans-serif; текстова сянка: 0 1px 1px rgba(0, 0 , 0, .3); ) /* Firefox 18- */ :-ms-input-placeholder ( цвят: #fff; семейство шрифтове: "PT Sans" , sans-serif;text-shadow: 0 1px 1px rgba ( 0, 0, 0, .3); ) :: заместител ( цвят: #fff; текстова сянка: 0 1p x 1px rgba(0, 0, 0, .3); ) /*Стилове на бутони*/ .applicationButton ( margin-top: 25px; фон: #30ad64 граница: няма ширина: 100%; височина: 73px; border-radius: 40px; цвят: #fff; размер на шрифта: 24px; текст -transform: главни букви; курсор: указател; ) .applicationButton:hover ( фон: #d68c18; )

Ако искате цветът на бутона да се променя плавно, добавете следния ред към .applicationButton и.applicationButton:hover:

Трансмисия: .6s;

De.6s - час анимация в милисекунди.
Сега нашата форма на набула Гледка от Гарни, наведнъж тя изглежда така:

Създаване на формата zvorotnoy zv'azku - php

Сега трябва да създадем файла application.php. Vіn otrimuvatim vіd vіdnі parametrі z formita nadsilatime их до нас по пощата.

Структурата на новото, като тази на великото html файл, ако е възможно, но от друга страна, напишете на вашето име „Dakuyu, молбата ви е приета. След като попълните заявлението, нашите мениджъри ще се свържат с вас"

Tobto ако koristuvach натиснете бутона, yogo обръщате към страната на application.php. Tse povnotsіnna storіnka i vy vinniі издават її vіdpovіdny ранг.

"; $msg .="

Съобщение от сайта

\r\n"; $msg .= "

Тип на кого:".$потребителско име."

\r\n"; $msg .= "

Публикация:".$usermail."

\r\n"; $msg .= "

уебсайт:".$usertel."

\r\n"; $msg .= ""; // засилване на сигнала if(@mail($sendto, $subject, $msg, $headers)) ( echo " ";) иначе (ехо") "; } ?>

Нека обясним накратко кода:

$send=" [защитен с имейл]" // поща, където се намира листът $username = $_POST["name"]; // събрани в промяната данни, взети от полетата с имена $usertel = $_POST["telephone"]; // събрани в промяна на данните, пропуснати от полето с телефонния номер $usermail = $_POST["email"];// пропуснати в променените данни, пропуснати от полето с имейл адреса

Тук, предполагам, имаше смисъл.

Сега нека оформим заглавието на листа.

$subject = "Нова актуализация"; $headers = "От: " . strip_tags($usermail) . "\r\n"; $headers .= "Отговор до: ". strip_tags($usermail) . "\r\n"; $headers .= "MIME-версия: 1.0\r\n"; $headers .= "Тип на съдържанието: text/html;charset=utf-8 \r\n";

Ред $subject = "Нова актуализация";— отговорете за темата на листа, можете да напишете там: „Заявление от сайта“ или тези, които ви подхождат повече.

Ще се опитам да се уверя, че листът е намерен, под формата на адреса, въведен в полето input type="email". Tobto, от един вид coristuvach vvіv с попълнения формуляр. За което пишем следващите редове:

$headers = "От: " . strip_tags($usermail) . "\r\n";

Следователно ние представяме данните на променения $usermail, като премахваме избора на информацията от полето, която е валидна за въведения имейл адрес.

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

$msg = " "; $msg .="

Съобщение от сайта

\r\n"; $msg .= "

Тип на кого:".$потребителско име."

\r\n"; $msg .= "

Публикация:".$usermail."

\r\n"; $msg .= "

Телефон:".$usertel."

\r\n"; $msg .= "";

Първият ред задава шрифта на листа. Другото изглежда като напомняне, например: "Приложение от формата на линк за връщане на първия екран." Третият, четвъртият и петият ред са дадени във формуляра. Кожа от нов ред.

Сега е необходимо да изпратите лист с помощта на функцията за поща и да определите какво да правите с успешно или неуспешно зареждане на лист:

If(@mail($sendto, $subject, $msg, $headers)) ( echo "

";) иначе (ехо") "; } ?>

Направих го така, че по някакъв начин да се показва картина с ясен текст. Можете да промените снимката, за да въведете правилната страна. Просто напишете кода, за да замените снимката.

След няколко секунди, след като видя изображението, ще пренасоча (автоматично пренасочвам) към страна на главата. Можете да го направите по-добре, като въведете следващия ред между етикетите head;

Tobto след 4 секунди и koristuvach автоматично се обръща към главата страна!

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

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

Възможно е за някой, който не разполага с най-разумния материал, но ако повторите стъпките ми точно, тогава ще имате подходяща форма за контакт. Обвинете храната - пишете в коментарите, ще се опитам да отговоря! За да zustrіchі на blozі!

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

• Тествайте формуляра не на сървъра.
• Тествайте формуляра на безплатен хостинг.
• Тествайте формуляра на платен хостинг, но не и на безплатен тестов период.

В тези vipadkah листа не идват при вас по пощата.

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

23/07/2014 12/07/2018

dimadv7

Нека да разгледаме основата на лесна и бърза форма на добра връзка за сайта, написана на html и php.

Защо формата е в html и php?

За CRM, като Wordpress, Joomla и други, можете да намерите различни плъгини за вмъкване на формуляр за уеб връзка към сайта. Но това, което не ми харесва в такива плъгини, тогава ниска производителностче upovіlnennya сайт. Тъй като всички плъгини изглеждат еднакво в резултат на един и същ html код, тогава правилният трик е прост, но аз ще променя функционалната форма, така че можете да промените връзката от самия сайт.

Формулярът за връзка към html просто се вмъква в администраторите на Joomla, OpenCart и ако вашият сайт е самонаписан или ако имате рамка, тогава е трудно да се хакнат репрезентациите на кода, не е трудно и мръсно, сайтът ще бъде самонаписан преди вмъкването на кода.

Структура, как да организирам обратна връзка за сайта

Какво ще се направи всичко, ще донеса структурата, какво е необходимо, каква би била формата на връзката или връзката?

1. HTML код за вграждане отстрани + CSS стилове.
2. PHP файл, който служи като заявка за лист.

AT html кодовеинформация, трябва да се показват такива полета за въвеждане и подписи пред тях. css стилове vіdpovidaє за визуален дизайн на самоформирането и визуализацията на данните. Когато щракнете върху бутона за редактиране, се щраква върху php файл, който добавя листа към посочената поща. Отчетът на изходния код на формуляра е ясно видим.

Кодът за формата на zvorotny връзка в html

На задната част на главата нов кодформират обратна връзка за сайта в HTML.

аз съм *

Телефонен номер (с код) *

Съвет

Самата форма е известна на html тагове

. Оформете самия етикет

даден css class class="form-call", който се използва за персонализиране на изобразяването на формуляр чрез css стилове.

Атрибути на формуляра autocomplete="off" - автоматичното довършване на формуляра е деактивирано. Атрибутът на формата е action="http://site.com/email.php" , адресът на файла се въвежда в новия, който се извиква и към който се предават данните от формуляра след натискане на бутона "изпрати ".

Атрибутът method="post" , по който данните се наслагват и не се показват в адресния ред, другият метод Get коригира данните от формуляра през адресния ред. Необходимостта от SEO оптимизация на сайта, за да се формира обратна връзка към сайта, е по-добра от използването на метода Post, така че в случай на метода Get, сайтът всъщност ще има достъп до списък с от същия тип страници, които ще бъдат заменени с незначителни параметри.

Използвайте средната дива і , и в самия край - бутонът, когато се натисне върху него, силата на тези форми се принуждава.

Укрепване на лист с php скрипт

Навигирайте по прост скрипт за укрепване на листа

За да изпратите листа до необходимия имейл, променете стойността на променения $to [защитен с имейл]до желания адрес. Промяна на $subject - темата на актуализацията, какво се показва пощенски програмиЩе прегледам списъците със списъци за един час. $message - тялото на самия лист, самото съобщение. $headers - заглавие на листа, той определя типа на листа, например html, както и кодирането на листа, от кого е доставен листът и върху какъв вид емайл е добавен.

Дизайнът на формуляра за връзка към портала за сайта css

Код за задържане на курсора css стилза формиране на обратна връзка към сайта.

Obratnuj-zvonok( width: 100%; max-width: 350px; ) .form-zvonok( width: 100%; display: flex; flex-direction: column; padding: 0 20px; box-sizing: border-box; ) .form-zvonok div( padding: 15px 0; ) .bot-send-mail( box-sizing: border-box; width: 100%; ) .form-zvonok label,.form-zvonok input( display: block; width : 100%; box-sizing: border-box; .form-zvonok label span( цвят: червен; ) .form-zvonok .bot-send-mail( padding: 15px; margin-top: 10px; background: none; граница: няма; преобразуване на текст: главни букви; цвят: # fff; тегло на шрифта: удебелен; цвят на фона: #009b97; курсор: указател; граница: 3px #009b97 плътен; радиус на граница: 5px; ; цвят на фона: #Ф ф ф;

Робимо ширината на div, която е равна на ширината на блока Batkiv, а между максималната ширина от 350px, дори по-широка, тогава html формата изглежда разтегната:

Obratnuj-zvonok( ширина: 100%; максимална ширина: 350px; )

За да се подредят полетата, този бутон се редактира, необходимо е да се обвие в div, показва се във flex и директно се показва в колоната на колоната. За да рисувате, добавете 20px към горната и долната част:

Form-zvonok( ширина: 100%; дисплей: flex; flex-direction: колона; padding: 0 20px; box-sizing: border-box; )

Полето за надпис и въвеждане е обвито в div:

аз съм *

За когото на момичето са възложени следните стъпки:

Form-zvonok div( padding: 15px 0; )

Бутоните променят ширината, за да съответстват на ширината на блока Batkiv и размера на кутията, за да добавят border-box, така че да не излиза извън границата на блока Batkiv:

Bot-send-mail( box-size: border-box; width: 100%; )

По същия начин за подписите и полетата за въвеждане:

Етикет Form-zvonok,.form-zvonok input( дисплей: блок; ширина: 100%; размер на кутията: border-box; )

Nalashtovuєmo красива zvnіshnіy vyglyad pіdpisіv polіv uvedennia:

Етикет за формуляр ( margin-bottom: 5px; font-weight: bold; ) .form-zvonok input( padding: 10px 15px; margin-top: 10px; )

Zirochka robimo червено:

Обхват на етикета на формуляра (цвят: червен; )

Правим бутон за добавяне:

Form-zvonok .bot-send-mail( padding: 15px; margin-top: 10px; background: none; border: none; text-transform: uppercase; color: #fff; font-weight: bold; background-color: # 009b97;курсор: указател;border:3px #009b97 solid;border-radius:5px;

Когато задържите курсора на мишката върху бутона, можете да промените цвета:

Form-zvonok .bot-send-mail:hover( цвят: #009b97; цвят на фона: #fff; )

Знаете ли, че до 80% от кореспондентите блокират сайта ви, без да подадат молба до някой, който е далеч от идеалния? Сигурни ли сте, че вашият формуляр за кандидатстване е идеален и може да постигне максимално преобразуване?

По-често новите ни клиенти, когато идват при нас в студиото, в часа на обсъждане на създаването и представянето на сайта, задават въпроси относно преобразуването. Абсолютно правилно хранене е, ако говорите за интернет маркетинг, ако сайтът не носи клиенти, тогава трябва да инвестирате в новия час и стотинките не си струват. В днешния блоз сме наясно с един от факторите, който силно влияе върху броя на клиентите от сайта на компанията. Този фактор - образуват здрав възел, в противен случай, както се наричат ​​- "образуват zakhoplennya." Yaka спечели - идеалната форма на zvorotny zv'yazku.

Особено важно е, че в застоялия бизнес сегмент тази форма може да бъде променена, тъй като скин бизнесът има свой собствен бизнес, формати за взаимодействие с клиенти. Самата форма „разговаря“ с клиента, докато вашият мениджър се обажда на други контакти и проверява за нови приложения.

Важна е формата на връзката за връщане в сайта. Вие ръководите покупката, докато покупката бъде направена, или услугата е отвратително отвратителна и внимателна. Спечелете всичко, което можете, започнете с удобен интерфейс и завършете продажбата с най-добрите си умове. И ако клиентът се размине с формата на zamovlennya - vin ide. Цялата работа е свършена. Със сигурност chi vin, ако се обърна отново към теб. Което може да бъде отменено просто чрез промяна на формата на връзката на портата.

За какво е формата на джакузита?

Не само за закупуване/закупуване. С помощта на формата на здравословна връзка научавате от користувачите какво е подходящо / неподходящо за тях, като „косяки“ от роботизирана компания, и трябва да отнемете готовността в името на подобрението. Розмова с ползавачи - це:

а) насърчаване на лоялността към вашата компания;

б) способност за бърз отговор на заявката, намаляване на негатива и спасяване на клиента;

в) способност за подобряване на услугата чи продукт;

г) начин за увеличаване на продажбите.

Глава, извинете, за да избягвам липсата на информация за сайта - формата на zvorotny zv'yazku е отменена. Koristuvachіv vіdlyakuє страхотен комплектполиване, е необходимо да се попълни, за да можете да поискате във вашата компания. Те не искат да дават информация за себе си, така че вие ​​им декларирате конфиденциалност. Избрахме за вас копие от правилата за дизайн на идеалната форма.

Правило номер 1 Попитайте формуляра колкото е възможно повече

Yaku z tsikh форми vy zapovite охотно?

Або таку

Оставете най-важните полета. Виждайки повече сайтове, не обичате да попълвате голям брой полета

Като правило за опростяване на формата на виконала е възможно да се оцени увеличението на конверсията с 30-60%.

Порада.Вземете всички заявки, попълнете 2-3 полета или въведете 1. Обадете се на "Имя", "телефонен номер или e-mail". Ако имате онлайн магазин и попълните формуляра за резервация, тогава етажът ще бъде три пъти по-голям: “Ім’я”, “Телефонен номер или имейл”, “Опция за доставка”, “Kіlkіst продукт”, “ Адреси”. Изненада, за някои цели трябва да създадете формуляр за връзка за връщане и да поискате колкото е възможно повече її.

Правило номер 2. Формулярът може да бъде възпоменателен

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

Правило номер 3. Минимум "obov'yazykovyh полета"

Едно езиково поле - телефон

Често на уебсайтовете на компаниите можете да публикувате не само препълването на дадените полета на формуляра, но и obov'yazkov_st на попълването на тези полета. Формулата "обовъязково поле" присъства в 99% от сайтовете. Искате ли да увеличите конверсията? Вземете obov'yazkove zapovnennya всички полета, krіm телефон. Ако човек иска, той сама ще попълни тези полета, ако имате нужда от тях, а ако основното поле е телефонен номер, можете да позволите на клиента да се обади обратно и да изясни цялата информация. Головне, не забравяйте да поставите правилните скриптове за мениджъри.

В някои случаи преобразуването на формуляри пада:

• 3% спад в реализациите, така че искате да попълните полето от зададеното име
• Падащо преобразуване в 10%, така че е необходимо да въведете PIB
• Падащо преобразуване в 2% местностна живо vіdvіduvach
• Падащо преобразуване в 4%, ако трябва да запомните адреса на вашето местожителство

Дори ако полетата за доставка, адрес и PIB присъстват в онлайн магазина, тогава користувачът определено ще ги запомни и няма да допринесе за преобразуването. Но ако искате да попълните данните, да ви изпратите заявление, тогава конверсията е безумно ниска.

Правило номер 4. Посилване във формата (внимавайте животното)

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

Пример за тази форма:

Опитайте се да сведете до минимум количеството текст и умове във формуляра, така че Користувачевът да прелива всичко и да препрочита всичко и просто да затваря формуляра, без да ви дава вашите данни. Така че помилванията в тази форма са твърде голям брой obov'yazkovyh полета.

Правило номер 5. Предоставяне на събиране на данни

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

Правило номер 6. Падащите списъци не са виновни buti

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

Правило номер 7. Съберете captcha от формуляра

Въвеждането на captchas може да намали процента на конверсия с до 40%. Това се обяснява с факта, че често captchas не се четат в началото, в противен случай, когато въвеждате данни, ви се напомня за неправилността на въведените знаци. Докато преди captcha беше коригиран, тъй като без него можеше да дойде много спам, сега има технологии, които защитават формата след въвеждане на данни от спам ботове и без въвеждане на captcha.

Студио Artcell използва тази технология. Как можете да маркирате captchas в нашите формуляри? Не, и СПАМ не е разрешен.

Правило № 8 Автоматично уведомяване за подалите формуляра

След като формулярът бъде попълнен и изпратен, може да бъде съобщено, че мениджърът ще се обади обратно на следващия час. Ако нямаше такава информация, тогава ползувачите не разбиха данните и varto изчистиха обаждането от компанията. Позволете ми да ви напомня да ви позволя да дублирате приложения от един и същ потребител.

Правило номер 9. Известия чрез SMS

Изпратете автоматично известие до телефонния номер, тъй като във вашия формуляр имаше поле за въвеждане на телефонен номер. Това позволява персонализиране на вашата фирма, а користувачеви познават името на вашата фирма.

Идентичен як спечели - іdealna форма zvorotnogo zv'yazku?

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

Минимално поливане за пълнене

Едно или две обвързващи полета

Vіdsutnіst vіlіv s списъци scho vypadayut

Покажете квадратчето за отметка за приемане на събиране на данни

Наличието на силен ум и добавка на умовете веднага във формата без zayvih преходи към другата страна на сайта

Видимост на captcha

Имате ли идеален формуляр за кандидатстване, но клиентите са малко? Прочетете блога си в нашия дневник и ще разберете отговора на въпроса си. Сякаш сайтът ти е гнил пробиващи системи, тогава ще получите информацията.

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

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

HTML

Otzhe, pochnemo, като правило, от страхотната подготовка - html. За кочана се нуждаем от формуляр с kіlkom полета. Приемаме за точност стандарта на всички формуляри 3 полета. Тобто. tse bude Im'ya, Имейл и телефон.

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

css

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

Form( max-width: 400px; ширина: 100%; margin: 0 auto; ) input( box-sizing: border-box; display: block; border: none; box-shadow: inset 0px 0px 4px 1px rgba(0, 0, 0, 0.11); допълване: 10px 20px; ширина: 100%; поле: 10px 0; контур: няма; радиус: 5px; цвят: бял; преобразуване на текст: главни букви; тегло на шрифта: 600; ширина: 200px; курсор: показалец; преход: 0,3s; черно;)

Клиентска част

Тук опциите се обсъждат по-подробно, по-точно изберете подходящата опция за себе си. За да увеличим силата на пощата, ще трябва да спечелим mov php, тогава. създайте okremy файл, където прехвърляме всички данни. Ale mi Датски начинняма да гледаме тук, парчетата са по-богато красиви, ако имаме всичко без повторно придвижване на страната. Следователно можем да разгледаме администрирането на данни чрез ajax.

Ако искате да правите нещата по стария начин, тогава трябва да редактирате малко горния html и да зададете формата на стойността на атрибута на метода (публикуване или получаване). Запазете всичко, докато искате да подадете данните от формуляра. И също така не забравяйте да напишете action , по кой начин php файл.

И ние ще натиснем демонстрацията повече по метода и zrobimo корекция на данните, без повторно напредване отстрани, и otrimuyuchi vidpovіd в сървъра, ще видим koristuvachevі известия за успеха на операцията или помилване. Трябват ни обаче и 2 файла, да речем contact.phpі custom.js.

Не забравяме да свържем библиотеката Jquery, с її, за да ни помогне в kіlka razív бързо код и можем лесно да работим, независимо дали имаме победоносни готови решения.

$(.form").submit(function() ( var str = $(this).serialize(); $.ajax(( тип: "POST", url: "contact.php", данни: str, успех ) : function(msg) ( if(msg == "ok") ( alert("Sheet corrected"); ) else ( alert("Прощаване! Може да сте въвели полетата неправилно."); ) ) )); return невярно;));

Сега нека да разгледаме схемата и сега се нуждаем от всички библиотеки и файлове. Ако кореспондентът натисне бутона за изпращане, ще имаме призовка за изпращане, която ще напишем в custom.js и на базата на която всички данни се вземат от формуляра и се прехвърлят във файла contact.php. Тук още веднъж проверяваме дали полетата ни не са празни (за да може спамът да бъде изтрит), работим за редактиране на известието по имейл и информираме за резултатите от coristuvach, тъй като те се прехвърлят в custom.js.

If (trim($_POST["mfbPhone"]) == "") ( echo "false"; ) else ( $txtname = trim($_POST["mfbName"]); $txtemail = trim($_POST["mfbMail" "]); $txtphone = trim($_POST["mfbPhone"]); // вижте кого $fromMail = " [защитен с имейл]// Въведете своя имейл тук $emailTo = " [защитен с имейл]$subject = "Обратно повикване"; $subject = "=?utf-8?b?". base64_encode($subject) ."?=";<$fromMail>\n"; $headers .= "Тип съдържание: текст/обикновен; charset="utf-8"\r\n"; $headers .= "MIME-версия: 1.0\r\n"; $headers .= "Дата: ". date("D, d МОЯТА h:i:s O") ."\r\n"; // sheet body $body = "Премахване на лист от сайта ".$site." \n\nИме: ".$txtname."\nТелефон: ".$txtphone."\ne-mail: ".$txtemail."\nУведомление: ".$txtmessage; mail($emailTo, $subject, $ body, $headers); ехо "ок";)

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

демонстрация

файлове

Готови плъгини

Така че, тъй като сте запознати с WordPress, тогава, sing-song, вие сте готови и прагматични да спечелите всички плъгини, особено когато сте в програмирането и оформлението на най-новия lamer. И не ви викам на никого и мога да посоча един от тях, за да изразя вашето уважение към точността. Мета абзацът не е препоръка, а само пример, защото избрах приставката Формуляр за контакт 7в редица проекти.

Vіn more zruchny в nalashtuvannyah и практически zavzhd pratsyuє bezdoganno. Ако трябва да създадете свой собствен уникален дизайн, можете да го направите. Достатъчно е да добавите необходимите полета в конструктора, да прехвърлите и промените известието за помилване и успешно редактиране по свой собствен начин и всичко е готово. Дайте копие на краткия код и го поставете във формата, където имате нужда.

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

вируси