Най -добрите WordPress плъгини за създаване на формуляри за контакт. WordPress Form Maker е безплатна приставка за изграждане на отзивчиви форми от всякаква сложност. Форма за контакт за wordpress на руски

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

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

Най -добрите WordPress формуляри 2018

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

Цена: Безплатно


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

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

Основни функции:

  • Лесен за персонализиране.
  • Персонализирани съобщения по подразбиране.
  • Лесно дефинирани настройки за поща.

WPForms

Цена: Безплатно


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

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

Добавки като интеграции с MailChimp, AWeber и PayPal са налични при по-високи планове на WPForms.

Основни функции:

  • Незабавни известия.
  • Оптимизирана система за управление на входа.
  • Умна условна логика.

Нинджа форми

Цена: Безплатно


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

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

Основни функции:

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

Създател на формуляри

Цена: Безплатно


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

В допълнение, има много премиум функции (като интеграция на PayPal) и много платени добавки, които ви позволяват да адаптирате тази приставка според вашите нужди, като например интеграции на MailChimp и Dropbox и условно изпращане по пощата.

Основни функции:

  • 41 персонализирани теми.
  • Контрол на подаване на формуляри.
  • Многостранични формуляри.

Бърза сигурна форма за контакт

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

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

Основни функции:

  • Лесно персонализирано редактиране на формуляри.
  • Възможност за изпращане на имейли за потвърждение.
  • Можете да пренасочвате посетителите към почти всеки URL адрес.

Цена: Безплатно


С множество опции за оформление и 18 типа полета, Visual Form Builder ви позволява бързо и лесно да създавате професионално изглеждащи формуляри. Този плъгин може да бъде конфигуриран да изпраща заявки за формуляри до множество имейликакто и възможност за изпращане на индивидуални пощенски разписки до всеки потребител.

Освен това можете да поставите няколко формуляра на една и съща страница или страница и да дублирате формуляри с едно щракване. Visual Form Builder автоматично записва записи от формуляри в базата данни на WordPress и ви позволява да управлявате данни директно от вашето табло за управление на WordPress.

Основни функции:

  • Плъзгане и пускане интерфейс.
  • Възможност за експортиране на записи в CSV файл.
  • Няколко опции за поставяне на полета.

Създател на формуляри

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

С премиум версията получавате 37 теми, базирани на различни цветови схеми, възможност за добавяне на раздел със съдържание и възможност за експортиране на изпратените данни в CSV или XML формат.

Основни функции:

  • Настройки за имейл за администратори и потребители.
  • Интеграция с Google Maps.
  • Разнообразие от опции за пренасочване.

Невероятно

Цена: Безплатно


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

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

Има и редица платени добавки като интеграции на MailChimp и AWeber.

Основни функции:

  • Плъзгане и пускане интерфейс.
  • Почти неограничени известия по имейл.
  • Формулирайте импортиране и експортиране, използвайки XML формат.

Пиратски форми

Цена: Безплатно


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

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

Основни функции:

  • Известия по имейл.
  • Възможност за персонализиране на полета, етикети и съобщения.
  • Контактите се съхраняват в база данни.

Ultimate Form Builder

Цена: Безплатно


Ultimate Form Builder е WordPress плъгинФормуляр Премиумза създаване на неограничени гъвкави форми за контакт. Тази приставка има 10 красиво проектирани шаблона за формуляри. Това е лесен за използване плъгин, който ви позволява да създавате прости и сложни форми за контакт, без да докосвате нито един код.

Ultimate Form Builder поддържа едноетапна и многоетапна поддръжка според вашите нужди. С този плъгин можете лесно да създавате различни видове формуляри за контакти, като например Свържете се с нас, Избор, Призив за действие, Анкета, Цитат, Заявка и др. Той има поддръжка за условна логика, която включва скриване на скрийна логика, логика на имейл и логика за пренасочване. Безплатна версия на приставката е налична в Директорията на приставките на WordPress.

Форми на Еверест

Цена: Безплатно


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

weForms

Цена: Безплатно


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

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

Основни функции:

  • 18+, за увеличаване на функционалността.
  • Къси кодове,поставете формата навсякъде, където искате.
  • Адаптивен дизайн, може да се използва на всяко преносимо устройство.
  • Влачите и пускате, използвайте го с визуализация на живо.
  • Лесен интерфейс, мощен и прост потребителски интерфейс.
  • Лесен формуляр за контакт

    Приставката GrandWP Forms има широк диапазон на гъвкавост. Можете да направите формулярите точно така, както искате те да се показват на Front-End, без да наемате разработчик. Това е 100% отзивчив и високоефективен плъгин. Използвайте приставката Form builder, за да създавате различни формуляри, които да изпращате на потребителите, или просто да предоставяте подробна допълнителна информация за продукт / услуга или уебсайта като цяло.

    Създателят на формуляри GrandWP е изключително лесен за използване. Приставката Forms има интуитивен и прост интерфейс, който ви позволява да създавате невероятни форми с няколко кликвания. Той има модерен и гъвкав дизайн, който ще направи вашия уебсайт да изглежда професионално. Приставката Forms ви позволява да персонализирате всички нива на всяко отделно поле, което създавате, за да изглежда точно така, както искате. След като създадете своя проект за формуляри GrandWP, можете да го променяте / персонализирате, когато пожелаете и все още искате. Приставката за форми за блогове също има опция за плъзгане и пускане, която ви позволява да променяте реда на полетата с едно щракване.

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

Но нека се докоснем до малко теория, ако някой не се интересува, тогава можете незабавно да продължите с инсталирането на формуляра в WordPress:

Теория: Защо ми трябва формуляр за обратна връзка?

Мисля, че много хора знаят това търсачкиОценявайте много страницата за контакти. И ако го имате, това означава, че нямате какво да криете от читателите си и сте отворени за комуникация.

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

Недостатъци на имейл адресите в контактите:

  1. Много спам идва от ботове;
  2. Посетителите рядко пишат;
  3. Няма полза от страницата.

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

Но всъщност хората рядко ще пишат, защото не искат да отидат до пощата и да напишат вашия адрес, но ако го направят, тогава има голям шанс писмото да попадне в категорията „Спам“ и дори няма да знаете за това.

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

WordPress формуляр за контакт с помощта на плъгин

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

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

1.

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

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

2. - изскачащ формуляр за обратна връзка

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

3. Форма за контакт 7 е най -лошата от най -добрите

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

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

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

Онлайн генератор на формуляри за обратна връзка

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

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

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

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

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

Не намерих видео уроци, но има добро ръководство за инсталиране!

Php форма за контакт без плъгини

Какво ви е необходимо, за да създадете своя собствена форма за контакт? Просто следвайте 4 прости стъпки:

  1. Създайте php файл;
  2. На страницата за контакти (в html формат) напишете няколко реда;
  3. Свържете библиотеката на Google (ако формулярът не работи);
  4. Ако не е красиво, добавете стилове.

Не исках да описвам всичко в сайта подробно, затова заснех видео и направих архив с необходимите файловена диска на Yandex. Архивните файлове могат да бъдат изтеглени -.

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

Нечия форма не работи? След това трябва да вмъкнете във файла header.php:(свързване на библиотеката на Google). Надявам се инструкциите да са много ясни и прости за всички. Също така в архива ще намерите файл със стилове. Просто копирайте всички редове и поставете във файла style.css в края.

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

Вместо заключения

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

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

Добър ден приятели! В този урок ще ви науча как да създадете формуляр за контакт на WordPress с помощта на плъгини. Формата за обратна връзка на WordPress служи идеално решениеза тези, които искат да поддържат връзка с аудиторията си или да получават заявки на имейл адреса си, за да поръчат всякакви услуги. Ще научим с вас как да направите изскачащ формуляр в модален прозорец. След като прочетете тази статия, ще можете сами да вградите формуляра във вашите сайтове. Така че да тръгваме.

Защо имате нужда от формуляр за връзка с WordPress?

Може да се изненадате от въпроса защо имам нужда от формуляр за обратна връзка на сайта на WordPress? Защо просто не добавите имейл адрес към сайта, така че хората просто да ми пишат?

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

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

  • - спам ботове със завидна редовност пробиват през техните анализатори пощенските адреси, където има споменаване на пощенския домейн, и го въвеждат в тяхната база данни, за да ви изпратят нежелана кореспонденция по -късно. От друга страна, когато използвате формуляр за обратна връзка с WordPress, се отървете от проблема с доминирането на SPAM имейли във вашата пощенска кутия.
  • Пълнота на информацията - Когато изпращат поща, хората не винаги изпращат цялата необходима информация. С помощта на формата за контакт вие сами определяте кои полета са ви необходими, за да улесните потребителите да ви изпращат имейл (име, имейл, телефонен номер, коментар и др.).
  • Спестете време - Формата за контакт на WordPress може да ви спести време. В допълнение към пълнотата на информацията, която сте поискали от потребителя и която той ще ви изпрати, можете също да посочите какво ви очаква в следващата стъпка, например „Вашето заявление ще бъде разгледано в рамките на 24 часа“ или Гледайте видеоклипа и много други други полезни неща.

По -долу е даден пример за формуляр за контакт, който ще създадем в този урок.

Да започнем, господа.

Стъпка 1: Избор на най -добрата приставка за формуляр за контакт на WordPress

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

По -долу са причините, поради които WPForms е най -добрият плъгин за обратна връзка:

  1. Първо, това е най-удобният за начинаещи плъгин. Чрез просто плъзгане и пускане на необходимите ви блокове можете да създадете формуляр за контакт с няколко кликвания.
  2. WPForms Lite е напълно безплатен.
  3. Когато сте готови за по -мощна функционалност и ако това наистина има значение за вас, можете да надстроите до Pro версията.

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

Стъпка 2: Инсталиране на WordPress плъгин за формуляр за контакт

За този урок използваме версията Lite, защото е безплатна и лесна за използване. Можете да го инсталирате, като влезете в блога си и отидете на Приставки - Добавяне на нов.

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

След като инсталирате приставката, не забравяйте да я активирате. Това е показано тук:

Стъпка 3: Създайте формуляр за контакт в WordPress

Така че, след успешно завършване на активирането на приставката, е време да създадем нашата форма за обратна връзка. За да направите това, в администраторския панел на блога щракнете върху раздела WPForms Menu и отидете на Add New.

Това ще отвори конструктора на Wpforms за вас, където можете да създадете формуляр за обратна връзка за контакт на WordPress, като просто плъзнете и пуснете желаните блокове. В безплатната версия Lite има два готови шаблона (празна и проста форма). Можете да ги използвате заедно, за да създадете този, който е подходящ за вас. В този пример ние избрахме втората опция за вас, т.е. проста форма за контакт. Добавете име, имейл и текстово поле към него.

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

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

Когато приключите, просто щракнете върху бутона Запазване.

Стъпка 4: Конфигуриране на известия и потвърждения

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

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

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

Можете да конфигурирате и двете полета, като отидете в Настройката в приставката за WPForms Form Designer.

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

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

По подразбиране известията се изпращат до пощата, която сте посочили в настройките. Ако искате да промените местоназначението за изпращане на известия, можете също лесно да го промените. Ако искате да посочите няколко пощенски адреса (разделени със запетаи), моля, подайте картите, както се казва 🙂

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

Стъпка 5: Добавяне на формуляр за контакт на WordPress към страницата

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

Ще използваме обикновен кратък код, за да вмъкнем формуляр в страницата. Просто кликнете върху бутона „Добавяне на формуляр“ и изберете името на формуляра, за да го вмъкнете в страницата.

Глоба. Сега запазете страницата и отворете визуализацията, за да видите промените.

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

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

Стъпка 6: Добавяне на формуляр за контакт на WordPress към страничната лента

Плъгинът WPForms идва с вградена джаджа за формуляр за контакт, която можете да добавите към страничната лента или всяка друга област на сайта (като долния колонтитул).

За да направим това, трябва да отидем в раздела „Външен вид“ -> Приспособления. Там ще видите предварително инсталираната джаджа за приставка за формуляри отляво. Просто го вземете и използвайте обичайното плъзгане и пускане, за да зададете реда на показване в желаната област в страничната лента.

Следващата стъпка е да посочите името на джаджата и да запишете. Отидете на сайта и вижте резултата.

С това приключваме нашия преглед на нашата приставка за формуляр за контакт WPForms. Но специално за вас подготвих още един преглед на една безплатна приставка, с която можем да направим изскачаща форма за обратна връзка и всички същите функции, както в предишната. Нарича се Форма за контакт 7. Наистина е много мощен и козът му е, че е напълно БЕЗПЛАТЕН!

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

Така че, за всеки случай, за да знаете, че са J

Как да направите формуляр за обратна връзка за контакт, като използвате формуляр за контакт 7

Продължаваме да разбираме въпроса за създаването на формуляри за приемане на приложения от вашия сайт. Напред имаме друга приставка за формуляр за контакт на WordPress, наречена Форма за контакт 7. Нека да я инсталираме в нашия блог и да я активираме, както можем.

Той вече е инсталиран на моя сайт, а не в този блог. Процедурата е стандартна. Сега трябва да отидем в административния панел на блога и да създадем нов формуляр, който да събира приложения за нас и друг полезна информация... Отидете в раздела „Формуляр за контакт 7“ -> Добавяне на нов.

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

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

  1. Неговото име, към което да се позовава (лична жалба)
  2. Пощенски адрес (обратна връзка, къде да му изпратите оферта)
  3. Телефонен номер, на който да се обадите незабавно (ако това стане бързо, той така или иначе ще стане ваш клиент)
  4. Самият бутон „Изпращане“

Това са основни данни, други вече можете да разберете по време на кореспонденция или телефонен разговор. Логично ли е? Мисля, че да. Преместване на.

Създаване на полета за формуляр за контакт в приставката за формуляр за контакт 7

И така, ние сме решили броя на полетата, сега трябва да ги създадем. Следните раздели са ни достъпни:

  • Текст (Всяко текстово поле, например „Име“, „Задайте въпрос“ или друго име, което ще съберете чрез това поле)
  • Имейл (потребителят има само една цел да въведе)
  • URL адрес (адресът на сайта ще бъде въведен в това поле, други стойности не са приемливи, ще бъде генерирана грешка)
  • Тел (поле с телефонен номерза нашата форма за контакт WordPress са разрешени числови стойности, текстът ще даде грешка)
  • Номер (Числов диапазон от стойности, който можете да приложите например към цената: "колко сте готови да платите за сайта? От 23 000 до 120 000 рубли")
  • Дата (Ние посочваме датата, от която до каква дата. Пример: „Резервация на кола от 13/04/2016 до 25/04/2016“)
  • Текстова област (Текстова област, можете да въведете текст тук като коментар)
  • Падащо меню Приложено в моя блог, можете да разгледате. В края на всяка статия предлагам на потребителите да създадат прост уебсайт или онлайн магазин. Това е функционалността, която предоставя тази опция.
  • Квадратчета за отметка (с множество възможности за избор, например: уебсайт + дизайн на лого + промоция + контекстна реклама)
  • Бутони за избор (Избиране на един елемент, например: „Поръчвате контекстна реклама или насочена“)
  • Приемане (Приемайте условията на споразумението, т.е. информация за потребителя, като публична оферта)
  • Тест (Тестът е поредица от кратки въпроси, можете също да го вмъкнете във формата за контакт).
  • reCaptcha (Потвърждение, че не сте робот и няма да изпращате спам.) Добра защитаот СПАМ. Забележка: тази опция работи, ако сте свързали Really Simple Captcha плъгин.
  • Файл (Ако искате да разрешите на потребителите да качват файл към вас, например: „Прикачете техническите спецификации за развитието на сайта“).
  • Изпращане

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

В примера по -долу използвах 2 полета: Име, Имейл. Съответно имате нужда от тези раздели:

Като щракнете върху текстовия раздел (Текст), влизаме в диалоговия прозорец:

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

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

За да не се объркате, аз го подчертах със стил. Код по -долу:

< div class = "col-md-4" > < label class = "sr-only" >Пълно име< / label >[текст * текст - 658 клас: форма - контролен заместител "(! LANG: Вашето име" ] !}< / div >

И ето екрана:

Правим подобна операция за полето „Имейл“. Кликваме върху съответния раздел и се озоваваме в такъв диалогов прозорец.

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

< div class = "col-md-4" > < label class = "sr-only" >Пълен имейл< / label >[имейл * имейл - 447 клас: формуляр - контролен заместител "(! LANG: Вашият имейл" ] !}< / div >

И ето екрана:

И накрая, бутона „Изпращане“. Тя е за стилове.

< div class = "col-md-4" >[изпратете клас: btn - плосък клас: col - xs - 12 "Поръчка"]< / div >

< / div >

Важна забележка:Скъпи приятели, в този пример използвам отзивчиви стилове, за да създам формуляр за контакт в WordPress, което означава, че може да приема форми с всякакъв размер на екрана.

Ще видите бутона в горния десен ъгъл. Със сигурност няма да пропуснете. 🙂

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

Настройване на пощенски адрес за приемане на заявления

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

Трябва да кликнете върху голям раздел"Писмо". Това ще бъде второто след шаблона на формуляра.

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

Сега по полета:

Сега трябва да настроим известия за успешното или неуспешното изпращане на имейла от формуляра за контакт на WordPress.

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

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

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

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

Копирайте и поставете в нашата страница, след като отидете на текстов редактор(не визуално). Представено на екрана по -долу:

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

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

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

Щракнете върху „изпрати“ и това пише във формуляра ни:

Сега нека видим как изглежда нашето приложение. Те идват в пощенската ми кутия. Проверете доставката:

Нека влезем вътре, за да се уверим, че кодирането и всички данни са правилни.

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

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

Създаване на изскачаща отзивчива форма за обратна връзка за контакт в WordPress

За да може нашата форма да стане отзивчива, тоест „гумена“, трябва да свържем друга приставка, или по -скоро нейната добавка към Форма за контакт 7 - тя се нарича Bootstrap Contact Form 7. Инсталирайте и просто активирайте и това е всичко - работи. Не е необходимо да правите никакви настройки с него. Инсталиран и забравен.

В следващата стъпка ще ви кажа какви промени трябва да бъдат направени, за да направим формуляра изскачащ и отзивчив. Направих подобно изпълнение на начална страницавашия студиен сайт. За да направите това, отидете на шаблона index.php, който се намира в раздела "Външен вид - редактор". Ще работим само с кода, ръчно.

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

За да постигнете този резултат, имате нужда от следния код, ще го покажа изцяло в фрагмента:

Да поръчам

< a href = "#" class = "btn btn-primary btn-flat" data - toggle = "modal" data - target = "#modal2" >Да поръчам< / a >

< ! -- Modal -- >

< div class = "modal contact-modal fade" tabindex = "-1" id = "modal2" role = "dialog" aria - labelledby = "myModalLabel" aria - hidden = "true" >

< div class = "modal-dialog" >

< div class = "modal-content" >

< div class = "modal-header" >

< button type = "button" class = "close" data - dismiss = "modal" > < span aria - hidden = "true" >& times;< / span > < span class = "sr-only" >Близо< / span > < / button >

< h4 class = "modal-title black" id = "myModalLabel" >Подайте заявлението си< / h4 >

< / div >

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

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

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

За какво служи формулярът за обратна връзка?

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

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

Но има редица сайтове, които могат да се възползват от проста форма за контакт:

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

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

Управление на панела за обратна връзка на WP

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

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

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

Добавяне на страница за обратна връзка с помощта на Page Builder

Ако използвате тема от Elegant Themes, настройването на страница за обратна връзка би трябвало да е доста лесно за вас. Ще използваме конструктора на страници от Elegant Themes, който ще добави формуляр само в няколко стъпки.

За да започнете, отидете на Страници -> Добавяне на страница в административния панел на WordPress. В резултат на това ще бъде създаден нова страница... Дайте име на тази страница " Обратна връзка". Непосредствено под заглавието ще видите бутона „ Използвайте Page Builder«.

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

Структура на конструктора на страници

Първото нещо, което искаме да добавим, е текст, описващ страницата. Щракнете върху „ Вмъкване на колона", И след това изберете първата опция за блока с пълна ширина. След това в създадената колона щракнете върху Вмъкване на модул и изберете Текст.

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

« Моля, използвайте формата по -долу, за да направите предложения за подобрения на нашия сайт или да ни посочите проблеми

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

Бих искал да оставя тази опция деактивирана засега, тъй като все още не получавам твърде много спам. В текстовото поле „Имейл“ въведете имейл адреса, на който искате да получавате съобщения за обратна връзка. Останалите настройки не са задължителни. Можете да добавите заглавка, CSS клас или ID за полетата:

Създаване на формуляр за контакт

Когато приключите, просто щракнете върху бутона Запазване, за да добавите формуляра, и след това Публикуване, за да покажете формуляра на страницата. За щастие, формата за контакт Elegant Themes по подразбиране е много проста и изисква само имейл адрес, име и съобщение. Това е идеално за формуляр за контакт.

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

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

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

Приставки за формуляри за контакт

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

Потребителски шум

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

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

След това този формуляр изпраща известие до посочения имейл адрес на администратора на сайта, че е получено съобщение от потребителя:

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

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

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

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

Форма за контакт с нинджа ритник

Ninja Kick Contact Form е първокласна приставка, много подобна на Usernoise, но добавя няколко допълнителни функции и стилове.

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

Изходяща форма

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

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

Ninja Kick Contact Form е платена приставка главно поради нивото на персонализиране, което позволява. Можете да избирате от три различни теми и да променяте цветовете и стила на всеки аспект на презентацията.

Той също така има вградена защита срещу спам и е напълно отзивчив и удобен за мобилни устройства. Ninja Kick Contact Form е стабилен, сравнително прост и използва висококачествена анимация.

Потребителски запис

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

За използване на услугата се начислява определена такса в зависимост от това колко от вашите сайтове са я внедрили.

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

Формуляр за контакт WordPress Plugin Форма за контакт 7

Ще анализирам безплатната Форма за контакт 7, която е преведена на руски. В стандартната версия той включва:

Добавете reCaptcha captcha

Инсталирайте стандартно приставката чрез административния панел на WordPress, както изглежда в панела.

CF7 в търсене

Нека настроим reCaptcha от Google, отидем в раздела за интеграция и кликнете върху връзката google.com/recaptcha. Трябва да имате акаунт в Google.

Връзка към recaptcha

Той ще се прехвърли към услугата, ще настрои елементите, както на екрана, ще въведе домейна правилно, щракнете върху изпрати по -долу.

Свързване на captcha със сайта

Копираме данните за captcha, двата ключа.

Ключове за достъп

Върнете се към приставката WordPress и щракнете върху бутона Настройки за интеграция.

Интеграция

Въвеждаме ключовете, копирани в услугата reCaptcha, записваме ги в съответните раздели и запазваме.

Запазване на настройките

Създаване на формуляр

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

Изтриване на стандартни етикети

Въведете името на новия проект и щракнете върху бутона Текст, защото името ще бъде въведено в текст без правила.

Текст на полето

Ще се появи изскачащ прозорец, персонализирайте го според вашите нужди.


Генератор на тагове
  1. Типът определя дали посетителят трябва да попълни полето, аз да
  2. Името не се променя, това е уникален идентификатор
  3. Стойност по подразбиране, въведена фразата, която виждам вътре
  4. Използвайте вместо заместител, тоест докато не се въведе нищо, надписът ще се покаже
  5. Не препоръчвам използването на полето Akismet
  6. За да добавите стилове, въведете клас или идентификатор, направен pole-imya
  7. Вмъкнете маркера в общото поле

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

Генератор на поща

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

Добавете част от текстовата област и телефона (по избор), принципът е същият.

Бутони за телефон и текстова област

Преди това конфигурирахме интегрирането на captcha в WordPress, в базова версия CF7 няма бутон за вмъкване на captcha, за това създадохме кратък код и го поставихме под останалите елементи.

Остава да добавите бутон за изпращане, да изберете от списъка и да персонализирате изхода му.

Бутон за изпращане

Резултатът е следният код.

Краен код CF7

Конфигуриране на изпращане на имейл

Промяна на параметрите на имейла

  1. Етикети на полета, създадени по -рано
  2. Пощенски адрес, на който ще се изпращат писма
  3. От кого и темата, попълнете по желание
  4. Допълнителни заглавки, напълно ясни
  5. Пишем в тялото на писмото какво искаме да получим по пощата след изпращането. Например написах Mail и вмъкнах съответния маркер срещу тази дума.
  6. В долната част кликнете върху Запазване

Запазване

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

Вмъкване на формуляр в сайта

В горната част на страницата се е образувал кратък код, копирайте го.

Кратък код

Отидете на всеки запис и поставете.

Поставяне на краткия код на страницата

След като щракнете върху бутона Преглед, той ще бъде прехвърлен на сайта с показване на извършената работа.

Краен вариант

Добра черта за разработчиците на теми на WordPress е да направят продукт, който поддържа CF7 предварително, което улеснява живота и не е необходимо да се пише CSS стиловев кода на сайта. Моята тема поддържа плъгин и доста извежда красива картина... Ако не сте доволни, тогава за всяко поле беше предписан клас, използвайте го, за да промените дизайна. Проверих работата по темата, писмата идват бързо. За други методи прочетете връзката.

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

Направете полетата хоризонтално в една линия

Погледнах в интернет и се ужасих колко манипулации правят. Няма да ви показвам как да персонализирате напълно дизайна, това е темата на нито едно голямо ръководство. Влизаме в редактиране на формуляра и увиваме полетата, които искаме да подредим хоризонтално в div с клас, разглеждаме кода.

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

Опаковане в div

Отидете в администраторската област на WordPress Външен вид> Редактор на теми> style.css добавете стилове за обратна връзка с WordPress в края на файла.

Гъвкава форма (дисплей: flex;) само екран за медии и (макс. Ширина: 655px) (. Гъвкава форма (дисплей: блок;))

Стилове на писане

От стиловете можете да видите, че на div с класа flex-form е присвоено свойството display: flex, задава позицията на елементите в ред, без допълнителни параметрипространството е разделено по равно.

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

Изскачащ формуляр за обратна връзка

Положително при приемане на заявления са валидни от CF7. Плъгинът за показване на изскачащ прозорец ще бъде Popup Maker. Няма да описвам, връзката към материала се намира в този параграф. В допълнение към тази статия.

Как да добавите към elementor

За да вмъкнете формуляр в elementor, трябва да използвате секцията за кратък код. Формулярът е създаден съгласно инструкциите по -горе, което означава, че има кратък код от CF7. Отидете на създаването на страницата в елемента и потърсете краткия код в търсенето на елемента.

Намиране на елемент в elementor

Elementor обработи заявката

Използване на настройката на темата

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

Добавка в ROOT

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

ROOT работа на вградената функция

Обратна връзка чрез приспособления

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

Използване на текстова джаджа

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

Формуляр в джаджа

Обратна връзка без плъгин

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

Отворете файла function.php за редактиране, напишете кода най -отдолу, как да го използвате.

/ * код за обратна връзка * / add_shortcode ("art_feedback", "art_feedback"); функция art_feedback () (ob_start ();?>

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

Влизаме в създаването на страница в панела на WordPress, пишем, кликваме върху изглед.

В Gutenberg вмъкнете ред във всеки текстов блок.

Поставяне на изхода в записа

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

Лош външен вид

Сега нека персонализираме външния вид, поставете този код във файла style.css на активната тема.

#add_feedback (margin: 20px 0 0; position: relative;) #art_name, #art_email, #art_subject, #art_comments (padding: 10px 5px; display: inline-block; width: 49.548%; border-radius: 3px; border: 1px solid #ddd; font-size: 0.9em;) #art_subject (width: 100%; margin: 5px 0;) #art_comments (width: 100%;) #add_feedback .button (border: none; padding: 10px 20px; color: #fff; font-size: 1em; display: наследяване; margin: 10px 0 0 0; border-radius: 3px; background-color: #2f94ce;) #add_feedback вход: фокус, #add_feedback вход: focus, #add_feedback вход: фокус, #add_feedback текстово поле: фокус (цвят: # 444; box-shadow: 0 0 3px rgba (68, 68, 68, 0.2);). текст на грешка (фон: # F59E9E; подложка: 15px 0px; текст -align: center; color: #fff;). име на грешка, .er-имейл, .err-коментари (дисплей: inline-block; размер на шрифта: 11px; позиция: абсолютна; отгоре: -30px; цвят: бял ; рамка: 1px плътно червено; подложка: 5px 10px; височина на линията: 1.1; фон: червено; box-shadow: 0 0 3 px 0px rgba (0, 0, 0, 0.3); ). име на грешка: след,. имейл на грешка: след,. коментари за грешка: след (съдържание: ""; позиция: абсолютна; вляво: 20 пиксела; отдолу: -10 пиксела; граница: 5 пиксела плътно прозрачна; граница отгоре: 5px плътно червено;). Коментари за грешка (отгоре: 16%; отляво: 0;). Име на грешка (вляво: 0;). Имейл на грешка (вдясно: 4%;). Съобщение-успех (фон: rgba ( 0, 128, 0, 0.5); color: #fff; padding: 20px; text-align: center; margin: 20px auto; border-radius: 3px;) #add_feedback .error (border: 1px solid red;) #add_feedback .изисква се: след (съдържание: "*"; позиция: абсолютна; вляво: 20px; отдолу: -10px;) #име на изкуство: фокус :: -moz -placeholder, #art_name: focus: -moz -placeholder, #art_name: focus : -ms-input-placeholder, #art_email: focus ::-webkit-input-placeholder, #art_email: focus ::-moz-placeholder, #art_email: focus: -moz-placeholder, #art_email: focus: -ms- input-placeholder, #art_comments: focus ::-webkit-input-placeholder, #art_comments: focus ::-moz-placeholder, #art_comments: focus: -moz-placeholder, #art_comments: focus: -ms-inpu t-placeholder, #art_subject: focus ::-webkit-input-placeholder, #art_subject: focus ::-moz-placeholder, #art_subject: focus: -moz-placeholder, #art_subject: focus: -ms-input-placeholder ( цвят: прозрачен)

Актуализираме style.css на сървъра и виждаме как се е променила обратната връзка на страницата.

Блок за оформление

Създайте файл feedback.js и поставете кода в него. Качете на хостинга в папката js на активната тема.

JQuery (document) .ready (function ($) (var add_form = $ ("# add_feedback"); // Нулиране на стойностите на полето $ ("# add_feedback input, #add_feedback textarea"). On ("blur", функция () ($ (" # add_feedback input, #add_feedback textarea"). removeClass ("грешка"); $ (". име на грешка, .er-имейл,. грешка-коментари, .message-успех"). remove ( ); $ ("# submit-feedback"). val ("Изпращане на съобщение");)); // Изпращане на стойности на полета var options = (url: feedback_object.url, data: (action: "feedback_action", nonce : feedback_object.nonce), type: "POST", dataType: "json", beforeSubmit: function (xhr) (// Когато изпращате, променете етикета на бутона $ ("# submit-feedback"). val ("Submitting ... ");), success: function (request, xhr, status, error) (if (request.success === true) (// Ако всички полета са попълнени, изпратете данните и променете етикета на бутон add_form.after ("

" + request.data +"
") .slideDown (); $ (" # submit-feedback "). val (" Изпращане на съобщение ");) else (// Ако полетата са празни, покажете съобщения и променете етикета на бутона $ .each (заявка. данни, функция (ключ, val) ($ (". art_" + ключ) .addClass ("грешка"); $ (". art_" + ключ). преди (" " + val +"");)); $ (" # submit-feedback "). val (" Нещо се обърка ... ");) // При успешно изпращане нулирайте стойностите на полето $ (" # add_feedback "). reset ();), error: function (request, status, error) ($ ("# submit-feedback"). val ("Нещо се обърка ...");)); // Изпратете add_form.ajaxForm (опции) ;));

Js папка на сървъра

Сега зареждаме втората част от кода във function.php.

/ * втора част * / add_action ("wp_enqueue_scripts", "art_feedback_scripts"); функция art_feedback_scripts () (// Обработка на полета wp_enqueue_script ("jquery-form"); // Включване на скриптовия файл wp_enqueue_script ("обратна връзка", get_stylesheet_directory_uri (). "/js/feedback.js", масив ("jquery"), 1.0; nonce "),));) add_action (" wp_ajax_feedback_action "," ajax_action_callback "); add_action ("wp_ajax_nopriv_feedback_action", "ajax_action_callback"); function ajax_action_callback () (// Масив от грешки $ err_message = array (); // Проверете nonce. Ако проверката се провали, блокирайте изпращането if (! wp_verify_nonce ($ _ POST ["nonce"], "feedback-nonce" )) (wp_die ("Данни, изпратени от грешен адрес");) // Проверете за спам. Ако скритото поле е попълнено или проверката е премахната, блокирайте изпращането, ако (false === $ _POST ["art_anticheck "] ||! празен ($ _ POST [" art_submitted "]))) (wp_die (" Това е спам ");) // Проверете полетата с имена, ако са празни, след това напишете съобщение в масива за грешки, ако (празен ( $ _ POST ["art_name"]) ||! Isset ($ _ POST ["art_name"])) ($ err_message ["name"] = "Моля, въведете вашето име.";) Else ($ art_name = sanitize_text_field ($ _ POST ["art_name"]);) // Проверете полетата за поща, ако са празни, след това напишете съобщение в масива за грешки, ако (празен ($ _ POST ["art_email"]) ||! Isset ($ _ POST ["art_email "])) ($ err_message [" email "] =" Моля, въведете имейл адреса си. ";) elseif (! preg_match (" / ^ [[: alnum:]]] * @ + \. (2,4) $ / i ", $ _POST [" ар t_email "])) ($ err_message [" email "] =" Имейл адресът е невалиден. "; ) else ($ art_email = sanitize_email ($ _ POST ["art_email"]);) // Проверете полетата на темата на имейла, ако е празно, след това напишете съобщението по подразбиране if (empty ($ _ POST ["art_subject"]) || ! isset ($ _POST ["art_subject"]))) ($ art_subject = "Съобщение от сайта";) else ($ art_subject = sanitize_text_field ($ _ POST ["art_subject"]);) // Проверете полетата за съобщения, ако празно, след това напишете съобщение до масив от грешки, ако (празен ($ _ POST ["art_comments"]) ||! isset ($ _ POST ["art_comments"])) ($ err_message ["коментари"] = "Моля, въведете вашето съобщение. ";) else ($ art_comments = sanitize_textarea_field ($ _ POST [" art_comments "]);) // Проверете масива за грешки, ако не е празен, изпратете съобщението. В противен случай изпратете писмо if ($ err_message) (wp_send_json_error ($ err_message);) else (// Посочете адресата $ email_to = ""; // Ако адресатът не е посочен, тогава вземаме данни от настройките на сайта, ако ( ! $ email_to) ($ email_to = get_option ("admin_email");) $ body = "Име: $ art_name \ nИмейл: $ art_email \ n \ nСъобщение: $ art_comments"; $ headers = "От:". $ art_name. "<" . $email_to . ">"." \ r \ n "." Отговор до: ". $ email_to; // Изпратете имейл wp_mail ($ email_to, $ art_subject, $ body, $ headers); // Изпратете съобщение за успешно изпращане на $ message_success = „Съобщението е изпратено. Ще се свържа с вас скоро. "; Wp_send_json_success ($ message_success);) // Убийте отново процеса ajax само в случай, че wp_die ();)

Проверяваме формата за ефективност. Проблемът може да възникне, ако не сте заредили правилно js файла в темата на WordPress и пътят до него не е регистриран правилно, а именно във втория код в раздела // Включете файла на скрипта.

Попълваме и изпращаме писмото

Такова писмо идва по пощата с обратна връзка.

Какво идва след изпращането

Чудесно, успяхме, успяхме да създадем формуляр за обратна връзка в WordPress, използвайки три различни метода, ако имате въпроси, попитайте, ние ще разберем. Късмет!

Харесва ми, харесва ми



1 звезда2 звезди3 звезди4 звезди5 звезди 5,00 / 3
Свързани статии: