Настройване на формуляри за контакт 7 в wordpress. Всички полета (тагове) на формата

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

Как работи приставката за формуляр за контакт 7

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

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

От известно време плъгинът Contact Form 7 спря да работи - не изпращаше писма, а просто преобръщаше изтеглянето. Намерих решение - инсталирах друг безплатен плъгин WPForms Lite. Настройва се много лесно, не изисква инсталирането на допълнителни добавки за конфигуриране на изпращането на съобщения, но забелязах, че не работи с всеки имейл. На едната не получих писма, но на другата се изпращат.

Настройване на приставката Contact Form 7. Инструкции

1) Регистрираме полето на подателя в пощата на Yandex (всяко, без значение какво, името му не е важно за работата на приставката и няма да бъде видимо за посетителите). Той ще служи като претоварна точка за писма.

2) Настройване на формата за контакт на приставката Contact Form 7. Щракнете "Промяна"и отвъд "Шаблон на формуляр". Ето пример за това как трябва да изглежда със задължителните полета: потребителско име, имейл, съобщение и бутон за изпращане:

Вашето име (задължително)

Вашият имейл (задължително)

Съобщение

3) раздел "писмо"отговаря за външния вид на писмата, които получавате.

На кого- адрес на пощенска кутия на получателя

От кого – <адрес ящика отправитель>

Предмет –

Тяло на писмото –

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

внимание! За да може приставката Contact Form 7 да изпраща имейли, трябва да инсталирате друга приставка WP-Mail-SMTP. Именно той ще свърже двете пощенски адресиподател и получател и изпълнява системни функции за изпращане на писма.

Настройване на приставката WP-Mail-SMTP. Инструкция

От имейл- адрес на пощенска кутия на подателя

От името– например името на вашата организация или вашето име

пощенска програма- функцията за изпращане на писма. Изберете „Изпращане на всички имейли на WordPress чрез SMTP“

SMTP хост- за Yandex поща smtp.yandex.ru

SMTP порт- за Yandex mail 465

Шифроване– Използвайте SSL криптиране

Удостоверяване– Да: Използвайте SMTP удостоверяване

потребителско име– влезте във вашия имейл подател

Парола- парола на подателя на вашата поща

Настройката е завършена. Запазете промените си.

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

В настройките на формата за контакт обърнете внимание на реда в горната част:

Трябва да се копира и постави на всяка страница. Всичко е готово.

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

Формата за контакт е основен атрибут на повечето сайтове. Ето защо в директорията на WordPress има толкова много приставки за формуляри за контакт. Един от най-популярните е Contact Form 7. Плъгинът ви позволява да създавате формуляри от всякакъв вид; много гъвкав и лесен за настройка; се развива в продължение на много години и съдържа много разработки.

Създаване и показване на контактни форми

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

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

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

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

Предна част на сайта

Сега нека запазим статията и да видим как изглежда нашата форма (с помощта на темата Twenty Sixteen):

Картината показва формуляра след изпратеното писмо (това е указано от известието в долната част на формуляра).

Персонализиране на формуляри (създаване на сложни формуляри)

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

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

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

И по-долу има четири раздела:

1. Шаблон на формуляр
2. Писмо
3. Допълнителни настройки

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

Шаблон на формуляр

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

Оформление на формуляра

За оформление можете да използвате html тагове и кратки кодове на плъгини. Кратките кодове добавят полета на формуляр, а html таговете ви позволяват да създавате персонализирани HTML структура. Например нашата форма по подразбиране изглежда така:

Вашето име (задължително) Вашият имейл (задължително) Предмет Съобщение

И когато се покаже в публикация, ще се превърне в този HTML:

Синтаксис на кратък код

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

Тагът по-късно ще бъде преобразуван в текстово поле с html код:

Кратките кодове могат да се създават удобно с помощта на конструктора на кратки кодове.

Но конструкторът не ви позволява да промените краткия код (можете да създадете кратък код само там). Има два начина за промяна на краткия код:

1. изтрийте и създайте нов с помощта на конструктора.
2. проучете синтаксиса и поправете краткия код на полето ръчно.

С дизайнера ще го разберете сами.

И тук ще анализираме синтаксиса на краткия код.

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

Текст (задължително)Тип на полето: текст, избор, парола, номер и др. (в този случай текстово поле). Определя в кой елемент от формата ще бъде преобразуван нашият таг, което означава какъв вид данни ще приема. * Звездичка прави полето задължително (формулярът няма да бъде изпратен и ще се покаже известие, че полето трябва да бъде попълнено). име на клиента (задължително)Името на полето се използва като атрибут name във входа, а също така се използва и при формиране на шаблона на изпратеното писмо. id:my-id Атрибутът id при въвеждане със стойност my-id. Използва се за декорация. class:my-class Атрибутът class при въвеждане със стойност my-class. Използва се за декорация. контейнер "Въведете име" Использовать текст "Введите имя" как placeholder. !}

Следвайте реда на атрибутите на етикета: първо идва типът на полето, след това името му и едва след това допълнителните опции.

Типове полета

• Текстови полета: текст, имейл, тел, url, текстово поле
• Числови полета: число, диапазон
• Полета за дата: дата
• Квадратчета за отметка, радиостанции, списъци: квадратче за отметка, радио, изберете
• Поле за качване на файл: файл
• CAPTCHA: captchac и captchar
• Анкети: викторина
• Поле "Приемам": приемане
• Бутон за изпращане: изпращане
• Персонализиран тип поле

Шаблон за писмо

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

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

Заглавки на имейли:

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

От - име и e-mail, от кого е писмото. Обикновено тук се посочва сървърната поща (напр [имейл защитен]).

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

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

• Допълнителни заглавки - Reply-To: се записват тук по подразбиране. Заглавката Reply-To ни казва, че на този имейл може да се отговори, като щракнете върху бутона „Отговор“ в пощенска програма, а етикетът на формуляра е името на полето от шаблона. Посоченият от потребителя имейл ще бъде вмъкнат вместо този етикет. Получавате нещо като Reply-To: [имейл защитен].

Тяло на писмото

Това е следващата важна част от този раздел. Ето текста на писмото. В текста използваме едни и същи етикети на формуляр (имена на полета от шаблона на формуляр).

Нека анализираме буквата по подразбиране:

от:<>Тема: Съобщение: -- Изпратено от сайта Exploring the Contact Form 7 Plugin (http://test-wp.ru)

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

От: Дмитрий Тема: Въпрос относно формуляр за контакт 7 Съобщение: Здравейте! Имам въпрос относно приставката Contact Form 7. Как да я настроя? -- Изпратено от сайта Exploring Contact Form 7 Plugin (http://test-wp.ru)

Незадължителни полета в тялото на имейла

Ако потребителят не попълни полето, но то се използва в тялото на писмото, то тялото на писмото ще бъде непълно. Например, тялото казва Човек от града, но потребителят не е попълнил полето, което означава, че в писмото ще получим Човек от града ... Такъв ред в писмото е излишен. За да премахнете този ред от имейла, поставете отметка в квадратчето „Изключване на извеждане на редове с празни тагове за съобщения“. Обърнете внимание, че това ще работи само когато текстът на полето и краткият код са на един ред.

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

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

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

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

Етикетите на шаблони за писма не работят в тези полета.

Допълнителни настройки

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

Ще говоря за използването на тази функционалност в отделна статия.

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

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

Всеки формуляр за контакт има свой собствен кратък етикет, като [ contact-form-7 id="71" title="Формуляр за контакт 1"] . Чтобы вставить контактную форму в свой пост, скопируйте шорткод и вставьте его в содержание поста.!}

Ако вашият формуляр не се визуализира и извежда грешка contact-form-7 404 „Не е намерено“

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

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

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

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

Вътрешни настройки на Контактната форма 7.

Всяка форма има следните настройки:

• Персонализиране на шаблон на формуляр;
• Писмо;
• Известия при подаване на формуляр.

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

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

Как да определя или променя темата на съобщение?

Просто сменете полето "Тема" в секцията "Писмо". За да направите това, отидете в желаното меню с настройки и променете стандартния етикет на вашето име.

Как да инсталирам автоматичен отговор за формуляр за контакт 7?

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

Пощата, която идва през формуляра за контакт на приставката Contact Form 7, показва „WordPress“ като име на подателя. Как да го промените?

Адресът на подателя се състои от адреса електронна пощаизпращач и незадължително име на подател. WordPress присвоява „WordPress“ като име на подател, ако настройката не е форматирана. Ако искате да използвате различно име, така че „WordPress“ вече да не се показва като име на подателя, трябва изрично да посочите името на подателя в полето „От:“ в секцията „поща“:

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

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

Как да вградите формуляр за контакт във файл с шаблон?

Можете да вградите кратък код директно в темата на шаблона, като използвате функцията do_shortcode(). Това може да стане с този ред:

Съобщение за грешка „Не може да се изпрати съобщение“. Формата за контакт не изпраща имейли. Какво не е наред?

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

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

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

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

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

Формулярът за контакт пренасочва към страница за грешка 404 при изпращане.

Този проблем е причинен от комбинация от две грешки в конфигурацията. Първо, AJAX JavaScript не работи във вашата форма за контакт. Поради този проблем вашият формуляр за контакт е принуден да се пренасочва след изпращане. Второ, вашата форма за контакт използва недостъпни думи в имената на полетата за въвеждане. Този въпрос обърква WordPress, което води до грешки 404 („Не е намерено“).

Формата за контакт се държи странно в някои браузъри.

Това може да се дължи на невалиден HTML, CSS, Javascript. Моля, тествайте страницата си с формуляри с валидатори или инструменти за отстраняване на грешки.

Полезни инструменти:

• буболечка- Разширение за Firefox. Добър за отстраняване на грешки в JavaScript.
• W3C Markup Validation Service - услуга за валидиране на HTML.
• W3C CSS Validation Service - услуга за валидиране на CSS.

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

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

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

CAPTCHA не работи, изображението не се появява.

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

Полето за въвеждане на текст CAPTCHA работи в Internet Explorer, но не и в Firefox. Не може да се въведе код.

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

Въведете кода:

Това няма да работи правилно:
Въведете кода:

Как да добавя идентификатори и атрибути на класа към елементите на формуляра?

Можете да добавите всеки идентификатор и клас към формуляра в краткия код.
Пример:

Ако искате да научите повече за функции на WordPress, съветваме ви да изучавате уроците

Плъгинът Contact Form 7 ще ви помогне да организирате обратната връзка на вашия сайт.

Можете да изтеглите приставката Contact Form 7 от официалния уебсайт на WordPress

Можете да изтеглите приставката Really Simple CAPTCHA от официалния уебсайт на WordPress

Разгледахме как да инсталираме и свържете този плъгин в урока "", сега ще се занимаваме с него допълнителни функции Plugin Contact Form 7. Формата работи коректно на монитори, таблети, телефони и лаптопи. Между другото, ако вашият лаптоп е счупен, тогава има сервиз, където лаптопите на HP се ремонтират.

След като изтеглите и активирате приставката, отидете на настройките на приставката, като отидете на нов разделконтролен панел "Контакти".

Задръжте курсора на мишката върху името на формата и изберете „Редактиране“

Ще се отвори прозорец за промяна на параметрите на формата.

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

Блок № 2 показва какво ще се показва на страницата във формата. Първо идва текстът, името на полето, след кода на това поле. Можете да промените текста на каквото искате.

За да добавите нови полета към формата, щракнете върху падащия списък № 3 - "Генериране на етикет" и изберете необходимия елемент от падащия списък.

• Текстово поле
• електронна поща
• Телефонен номер
• Номер (спинбокс)
• Число (плъзгач)
• Текстово поле
• Падащо меню
• Квадратчета за отметка
• радио бутони
• Приемане
• Въпрос
• CAPTCHA
• Изпращане на файл
• бутон за изпращане

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

. Целият блок с описания и елементи трябва да е на един ред и да е вътре в тага

Текстово поле