Ние правим нашата форма за контакт на WordPress от земята, всичко за WordPress

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

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

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

Защо не просто използвайте плъгините?

Plugins са не най-подходящото решение за простите форми за контакт за по следните причини:

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

Този списък може да бъде продължен, ако желаете.

Мразя тромава потребителския интерфейс. Мразя лошия опит на сътрудничество, и по-специално мразя да бюст функционалност. "I Hate" - каза твърде много, но да погледнем за себе си: днес плъгини, предлага създаването на контактни форми, като че ли се конкурират помежду си за титлата пълнофункционален решения. И като резултат имаме следните резултати:

Ние правим нашата форма за контакт на WordPress от земята, всичко за WordPress

Ние правим нашата форма за контакт на WordPress от земята, всичко за WordPress

Но имам нужда от всички тези настройки!

Наистина ли? Това не е Web 2.0. Сложни форми отблъскват клиентите.

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

Какво е най-важно?

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

За да създадете всичко от нулата - това е толкова трудно!

Не, разбира се. Ако сте пациент, а след това прочетете цялата ръководството (и учебни материали) ще ви отнеме не повече от половин час. Ние трябва да създадем:

  1. Произволно модел.
  2. PHP-битов код.

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

първи стъпки

Както винаги, ще започна с WP свеж монтаж. В съответствие с добрата практика, аз ще създаде дъщерно дружество подлежи TwentyTwelve, съдържащ само стилове и всеки шаблон страница. Можете да получите потребителски шаблон страница, я поставете в нито една от съществуващите теми, и тя ще работи добре (с изключение на някои CSS модификации).

На WP-съдържание / теми ще създадат нов контакт форма на папка. Той ще създаде два файла - style.css и страница контакт-us.php.

Файлът style.css, поставете следния текст:

Сега трябва да активирате палитрата на сайта на тест.

Ние правим нашата форма за контакт на WordPress от земята, всичко за WordPress

Следващата стъпка - да се създаде страница, наречена "Свържете се с нас». Тази страница е пряко свързано с шаблон страница контакт-us.php, която сме създали по-рано. Такова решение е взето не от главата - тя се основава на структура на шаблон WP на. Файл страница за-us.php автоматично ще се използва за показване на страница За нас, екран. Много удобно!

Ние правим нашата форма за контакт на WordPress от земята, всичко за WordPress

Ако сте създали шаблон страница контакт-us.php и го остави празен, когато посетите новата си страница ... Свържете се с нас, няма да виждате нищо! Ще покаже празна страница.

Добре! Направете следния код шаблон за контакт с нас изглеждаше като нормален страница:

Ние правим нашата форма за контакт на WordPress от земята, всичко за WordPress

Сега имаме база страница. Това е време, за да го сложи на обикновен формуляр.

Сменете параграф ФОРМА КОДА ТУК със следния код:

Извинете ме за инлайн стилове! Те се използват само за оттеглянето на погрешно / успех съобщение, а за улеснение сме ги поставя в един файл. Поставете стиловете във вашия style.css файл.

Какво правим в тази програмка? Първо, ние се извлече променлива $ реагират, ние ще разгледаме по-късно.

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

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

Добавих звездичка, до всяко поле, за да се покаже, че тези полета са задължителни.

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

Ние правим нашата форма за контакт на WordPress от земята, всичко за WordPress

Логиката в основата на формата за изпращане на данни е доста проста. Има няколко действия, които трябва да бъдат изпълнени:

  1. Генериране на реакция и комуникация (на базата на проверка).
  2. Валидиране.
  3. Изпращането на електронна поща.

генериране на отговор

За да се запази чистотата и яснотата на PHP-код, ние ще поставим променливата $ отговор във форма. По този начин, ние се опитваме да се разделят логиката от презентацията.

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

В горната част на файла страница контакт-us.php преди get_header (), поставете следния текст:

Отличен. Досега тази функция е доста ограничено по отношение на техните действия. Ако имате известни познания по PHP област, ще откриете, че тя: а) създава празен променлива отговор $, б), който беше приет през променлива съобщението за $ изпълва, в зависимост от състоянието $ от типа, който е или е грешка или успех.

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

Някои от променливите, които трябва

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

  • Променливи за съобщения за потвърждаване
  • Променливите за елементите на формата вход
  • Променливите за PHP поща () функция

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

Под функция generate_response (), въведете следните 12 променливи:

Цел на тези групи е ясно. Група Response Съобщението се съхранява в променлива всички наши послания за обратна връзка.

Потребителски Публикувано Променливи Променливите съхраняват данни от полетата на формата. променлива $ _POST съдържа цялата информация, предавана чрез формата.

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

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

Проверете, за да:

Нека погледнем по-отблизо в този момент.

човешкото проверка

Това е доста проста стъпка. Ако потребителят може да въведете правилния резултат от математическа операция, а след това той е човек, а не робот. Ако се вгледате в нашия формуляр, ще видите на полето с уравнението. + 3 = 5. Очевидно е, че ако стойността не е равно на 2, потребителят трябва да получи грешка. Ако е 2, след което продължете напред. След групи променливи, поставете следния текст:

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

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

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

Ние правим нашата форма за контакт на WordPress от земята, всичко за WordPress

Добре! Ако изпишете нещо различно от 2, в тестовата линия в спама, ще получите съобщение за грешка.

За опростено прилагане на тази стъпка, ние ще използваме PHP функция filter_var на (), която има няколко модела за валидиране. Ние ще използваме FILTER_VALIDATE_EMAIL модел.

Ние правим нашата форма за контакт на WordPress от земята, всичко за WordPress

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

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

Ние правим нашата форма за контакт на WordPress от земята, всичко за WordPress