У зв'язку з тим, що плагін Contact Form 7 дуже широко використовується користувачами WordPress, Виникла необхідність написати докладний посібник   по ньому. У даній статті розглядаються настройки Contact Form 7, методи впровадження і відповіді на найбільш поширені питання щодо використання плагіна.

Для того щоб додати форму Contact Form 7в потрібне місце, потрібно скопіювати код вставки на місце на сторінці або поста. Робиться це дуже просто:



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

  Якщо ваша форма не відображається і видає помилку contact-form-7 404 «Not Found»

Код є ознакою того, що контактна форма задана шорткодом, не може бути знайдена. Переконайтеся, що ви використовуєте правильний код вставки. Спробуйте повторити вставку скопіювавши потрібний код ще раз.

  Як додати або відредагувати поле для зміни зовнішнього вигляду форми Contact Form 7?

Щоб додати поле, додати тег до формі   текстового поля, повністю змінити або відредагувати форму потрібно зайти в налаштування і поставити потрібні вам параметри.

  Кожен тег має строгий синтаксис, підтримуючи кілька варіантів. Вивчення синтаксису може бути важко, але ви можете легко зробити користувальницький тег за допомогою генератора тегів замість цього. Натисніть кнопку тега і після форматування натискайте « Створити Тег ».   Так само ви можете ознайомитися з тим в окремій статті.

  Внутрішні налаштування форми Contact Form 7.

У кожній формі доступні такі настройки:

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

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

провівши все внутрішні налаштування Contact Form 7ви отримаєте відредагований код для вставки, який буде впроваджений вами в потрібну область на сайті.

  Як вводити та редагувати тему повідомлення?

Просто змініть поле «Тема» поле в розділі «Лист». Для цього треба зайти в потрібне меню налаштувань і змініть стандартний тег на свою назву.

  Як встановити автовідповідач до форми Contact Form 7?

Для того що б встановити автовідповідач, який буде спрацьовувати після того як було успішно відправлено перший лист потрібно перейти в розділ «Лист, опуститься вниз настройки і поставити галочку біля« Лист 2 ». Після появи форми, налаштувати потрібні вам критеріям, за аналогією з «Лист 1».

  Пошта, яка приходить через контактну форму плагіна Contact Form 7 показує «WordPress», як ім'я відправника. Як змінити це?

Адреса відправника складається з адреси електронної пошти   відправника і додаткового імені відправника. WordPress привласнює «WordPress» в якості імені відправника, якщо параметр не відформатований. Якщо ви хочете використовувати інше ім'я, щоб «WordPress» більше не з'являється в якості імені відправника, ви повинні явно вказати ім'я відправника в поле «Від:» поле в розділі «лист»:

  Чи можна розміщувати контактну форму поза постом?

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

  Як вставляти контактну форму в файлі шаблону?

Ви можете вставляти шорткод безпосередньо в тему шаблону, для цього буде потрібно скористатися функцією do_shortcode (). Це можна зробити за допомогою такого рядка:

  Повідомлення про помилку «Не вдалося відправити повідомлення». Contact Form не надсилає листи. Що не так?

Причин для такого повідомлення зазвичай може бути кілька:

• Першою актуальною причиною може бути поштовий сервер, з забороною на відправлення поштової форми. У цьому випадку повідомлення про помилку буде оточене червоною лінією. Зв'яжіться з адміністратором сервера для вирішення.
• другий можливою причиною   є те, що форма відправки знаходиться під підозрою спаму. У цьому випадку повідомлення про помилку буде оточено жовтогарячою лінією.

  Повідомлення відповіді «Ваше повідомлення було успішно відправлено», але лист не доходить.

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

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

  Контактна форма перенаправляє на сторінку помилки 404 після відправки.

Ця проблема викликана поєднанням двох помилок конфігурації. По-перше, AJAX JavaScript не працює на вашій контактної формі. Через цієї проблеми, ваша контактна форма змушена перенаправляти після відправки. По-друге, ваша контактна форма використовує недоступні слова в назвах полів введення. Це питання бентежить WordPress, в результаті чого з'являються 404 ( «Not Found») помилки.

Привіт, друзі!

У даній статті я покажу, як робиться якісна форма зворотнього зв'язку   WordPress за допомогою плагіна Contact form 7.

Ця форма дійсно якісна, так як вона дуже проста у використанні і має той функціонал, який може застосовуватися в разі створення, наприклад - функція прикріплення файлу при відправці повідомлення.

До того ж, вона і робиться простіше нікуди. Втім, я пропоную відразу перейти до її реалізації без жодних філософських міркувань про важливість контактної форми на сайті, а тим більше персональному блозі.

Робимо форму зворотного зв'язку за допомогою плагіна Contact form 7

Спершу встановлюємо плагін, скачавши його з офіційної сторінки. Потім приступаємо до самого процесу створення форми.

Після встановлення плагіну в адмін-панелі WordPress з'являється новий пункт, який називається так само, як і плагін - Contact form 7.

Ми можемо відразу додати нову форму, перейшовши в пункт "Додати нову" або ж змінити існуючу, яка створюється при установці плагіна.

Має вона назву "Контактна форма 1". Я ж пропоную створити нову форму, щоб побачити весь процес наочно. Тоді не важко редагувати вже існуючі форми. Тому, ми тиснемо на пункт "Додати нову" і потрапляємо в редактор форм, де відразу ж потрібно вибрати потрібний вам мову.

Якщо потрібна російська мова (за замовчуванням), то тиснете на першу кнопку додати.

Якщо ж потрібен іншу мову, то обираєте його зі списку і продовжуєте створення форми.

Мене, звичайно, цікавить варіант за замовчуванням. Тому я тисну на кнопку "Додати нову" і потрапляю на сторінку з усіма настройки форми.

Насамперед нас цікавить заголовок форми. Я рекомендую призначити унікальне ім'я для форми. Це потрібно для того, щоб при створенні нових форм ви не плуталися. Щоб ви чітко знали де яка форма і могли відредагувати потрібну.

Так як форму я буду розміщувати на сторінці, то приблизно так її і назвав - "Форма зворотнього зв'язку для сторінки Контакти".

Як бачимо, є всі найнеобхідніші поля:

• поле для введення імені;
• для введення e-mail;
• для введення теми повідомлення;
• для введення самого повідомлення;
• кнопка для відправки.

З цими полями можна вже розміщувати форму зворотного зв'язку на сайті, але я пропоную зробити ще одне поле, яке в деяких випадках дуже корисне і важливе. Все залежить від тематики сайту. Якщо ж це блог, то неодмінно треба його зробити.

Це поле для прикріплення файлу до повідомлення. Уявіть, що у вас тематика сайту, як у мене. Технічна тематика, де дуже складно зрозуміти суть проблеми без якихось графічних даних. Щоб в такому випадку краще взаємодіяти з читачами, необхідно давати їм можливість пояснювати свої проблеми по максимуму, так як від цього залежить якість вашої відповіді і допомоги в цілому.

Щоб реалізувати це поле, спочатку потрібно в стандартний шаблон додати ще одне поле. Робимо це наступним чином. Копіюємо 2 передостанні рядки, тобто код виведення поля повідомлення, і дублюємо їх. Має вийти, як на скріншоті нижче.

Тепер необхідно змінити назву поля. Змінюємо фразу "Повідомлення" на "Прикріпити файл".

Далі в цьому ж коді потрібно замінити другу частину "" на код, який буде виводити поле для вибору файлу з комп'ютера. Спочатку необхідно згенерувати такий код. Для цього справа шаблону форми є спеціальна функція генерації тега. Тиснемо на неї і вибираємо з усього списку пункт "Відправлення файлу".

Першим кодом ми замінюємо раніше вказану частину   коду в шаблоні форми.

Другу частину ми вставляємо в поле "Прикріплені файли", яке знаходиться в блоці "Адресат".

Тепер можна зберігати створену форму, натиснувши на кнопку у верхній частині сторінки праворуч від назви форми.

Під назвою форми з'явиться код, який буде виводити форму зворотного зв'язку на сторінці. Його і потрібно вставити в редактор сторінки в текстовому режимі.

Створюємо нову сторінку. Назву її "Контакти". В текстовий редактор   розміщую цей код.

Тепер можемо перейти на сторінку. Повинні побачити саму контактну форму з усіма полями. У мене все вийшло і форма має наступний вигляд.

Для цього ми заповнюємо всі поля і для прикладу можна прикріпити якийсь графічний файл (картинку).

Після того, як я заповнив усі поля і натиснув на кнопку "Відправити" мені без перезавантаження сторінки, що дуже добре, показало повідомлення про успішну відправку.

Але чи дійсно це так? Переходимо в пошту і бачимо, що повідомлення дійсно прийшло.

Перейшовши в нього, побачимо зміст самого звернення з даними про відправника та прикріпленим файлом.

Повідомлення прийшло. Також файл прикріпився. Значить, зробили все правильно. Якщо у вас також, то можете спати спокійно. Але я пропоную виконати ще одну дію. Потрібно перевірити працездатність форми на перевірку помилок при заповненні.

Бувають такі форми зворотного зв'язку, які некоректно перевіряють заповнення обов'язкових полів. Випадково забув вписати поле e-mail і відправив повідомлення. Форма написала, що повідомлення успішно відправлено, але насправді звернення не буде доставлено власникові сайту. А ми чекаємо відповіді і чекаємо.

Як правило, така ситуація поширена в формах ОС, які робляться за допомогою кодів без плагіна. В даному ж випадку, якщо ми не заповнимо якийсь обов'язкове поле, нам видасть помилку і підпише необхідні поля для заповнення.

Форма прекрасно працює, що і слід було зробити.

Якщо виникли якісь неясності то прошу дивитися мій детальний відео-урок. У ньому буде більш наочно все описано.

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

Така реалізація зараз у мене на блозі. Можете подивитися на сторінці "Написати мені".

Якщо хочете таку форму і собі. Тоді житі новий детальний матеріал. Скажу відразу, що робиться вона просто. Всі вихідні коди я вам дам. Також зроблю детальний відео-урок, що відіб'є всі ваші запитання.

На цьому з вами прощаюся. Пишіть свої коментарі, пропозиції, ідеї і все, що душа забажає. До швидкої.

З повагою, Костянтин Хмельов!

Flector 5

Це плагін створення контактних форм. Він надзвичайно популярний (по скачуванням поступається тільки плагинам і) серед користувачів, так як вдало поєднує простоту використання і найпотужніші можливості по налаштуванню і конструювання контактних форм. Я спробую максимально докладно розглянути всі можливості плагіна.

1 Розпаковуємо архів.

2 Копіюємо папку contact-form-7   в / Wp-content / plugins /.

3 Заходимо в адмінку блога на вкладку " Модулі"І активуємо плагін.

При своїй активації плагін створює окреме меню в адмінці блогу під назвою "", також при цьому створюється дефолтна контактна форма, яку ви можете побачити в " Contact Form 7 \\ Форми":

Якщо використовувати запропонований "код вставки", то форма в блозі буде така:

Звичайно, зовнішній вигляд цієї контактної форми буде залежати від стилів, які використовуються в вашому шаблоні, але в цілому вона буде виглядати саме так.

Для виведення цієї найпростішої форми вам знадобиться всього пара хвилин. І саме через таку легкості додавання контактної форми багато користувачів і люблять цей плагін.

Однак, плагін має купою можливостей по створенню просунутих контактних форм будь-якої складності. Але почнемо з простого, з створення своєї власної форми, яка буде лише трохи відрізнятися від вбудованої в плагін форми за замовчуванням. Кількома на посилання "Додати нову":

Відкриється ось така початкова сторінка додавання форми:

Плагін автоматично визначає використовувану в блозі локаль, тому необхідності вибирати мову немає, просто клікайте на кнопку "". Після цього з'явиться сторінка конструктора форм. Перше, що ви повинні зробити тут - це перейменувати заголовок форми:

Заголовок не має ніякого значення, він потрібен лише для того, щоб ви самі не заплуталися в своїх власних формах. Встановили назву своєї форми, натиснули на кнопку " зберегти", Отримали в результаті" код вставки ":

Тепер можна вставити запропонований код в будь-яку свою запис або сторінку (в режимі "Текст", звичайно), щоб вивести в ній контактну форму. Однак вона нічим не буде відрізнятися від форми за замовчуванням, тому продовжимо працювати з конструктором форм. У правій частині сторінки конструктора розташована кнопка " згенерувати тег", Клік на неї видасть:

Виберемо, наприклад, номер телефону. Відкриється таке вікно:

Власне, тут можна взагалі нічого не міняти. Розміри, класи та інше це другорядні опції і в більшості випадків вам їм редагувати не треба. Однак, опція "" може бути корисна в якості підказки відвідувачам, як саме треба заповнювати це поле.

Наприклад, задаємо такі значення:

При виведенні контактної форми поле буде виглядати так:

При кліці на це поле введений там текст зникне, так як він служить лише підказкою для заповнення. Але я пропустив момент додавання обраного тега в саму контактну форму. Ось цей тег:

Необхідно вставити в ліву частину сторінки конструктора форм, де розташований сам код контактної форми:

Створювати код форми треба вручну, тобто розставляйте заголовки, теги абзаців і переносів рядків самі, повинно вийти щось типу:

Зберігаємо код форми і отримуємо в підсумку ось таку контактну форму:

Власне, таким же способом можна легко за пару хвилин додати в вашу контактну форму будь-тег, який використовується плагіном. Не буду змушувати вас вручну пробувати кожен тег, відразу наведу їх висновок:

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

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

2 E-mail.

Використовується тільки для введення e-mail адреси.

3 URL.

4 Номер телефону.

Використовується тільки для введення номера телефону (цифри і дефізи).

5 Число (spinbox).

Використовується тільки для введення числа (можна використовувати для вказівки віку, кількості замовлених одиниць товару і т.д.).

6 Число (slider).

Не функціонує належним чином. Для виведення цього числового слайдера використовується HTML5, а це, по-перше, означає, що такий слайдер виглядає по-різному в різних браузерах, а по-друге, він все одно до пуття не працює. На форумах підтримки плагіна я бачив рішення, виправляють роботу даного тега, але мені вони не допомогли - змусити цей слайдер відображати будь-які цифри я так і не зміг. Рекомендую не використовувати даний тег.

7 Дата.

Використовується тільки для введення дати.

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

У російській перекладі даний тег теж отримав назву "Текстове поле", але в термінології HTML це textarea, що, по суті, означає лише збільшене текстове поле. Використовується для введення тексту повідомлення.

9 Випадаюче меню.

Використовується для вибору пункту (або декількох пунктів) з меню, що випадає. Можна використовувати для чого завгодно - від питання про колір товару, що замовляється до вибору статі людини.

10 Checkboxes.

Використовується для вибору одного або декількох пунктів із запропонованих варіантів.

11 Radio buttons.

Використовується для вибору тільки одного пункту із запропонованих варіантів.

12 Acceptance.

Використовується для згоди з умовами.

13 Питання.

Використовується для відповіді на зазначені питання (питання вибирається випадково з зазначених варіантів). В основному, даний тег використовується в якості захисту від спаму. І якщо на числовий питання спам-боти легко можуть відповісти, то на запитання на кшталт "на якій планеті ми живемо?" вони відповісти не в змозі.

14 CAPTCHA.

Використовується для виведення повноцінної капчи. Для використання даного тега необхідна установка плагіна Really Simple CAPTCHA. Капча цілком читається, а тому легко пробивається просунутими спам-ботами на кшталт Хрумер.

15 Відправлення файлу.

Використовується для відправки файлу. Можна вказати максимальний розмір і формати допустимих файлів.

16 Кнопка відправки.

Використовується для відправки даних контактної форми. Це обов'язковий тег.

З тегами, використовуваними безпосередньо в контактній формі, розібралися. Тепер розглянемо, як ці самі теги з контактної форми отримати на свій email. Трохи нижче коду контактної форми в конструкторі знаходиться шаблон посилається вам листи і саме в ньому ви повинні зробити необхідні зміни. Це важливо, тому що неправильне заповнення цього шаблону не дозволить вам дізнатися, що саме написав відвідувач у вашій формі. Як приклад візьму тег номера телефону. Скажімо, у вашій контактної формі він вставлений через такий код:

Значить, в шаблоні посилається листи треба вставити такий код:

Сенс, думаю, зрозумілий. У коді контактної форми , А в листі тільки назва цього поля . Плагін формує цифрові назви тегів на кшталт , Але ніхто не заважає вам використовувати свої імена. І з приводу інших тегів в шаблоні листа - вони теж формуються за таким же принципом - замість   використовується   і т.д.

Тексти, які видає контактна форма можна також поправити в конструкторі форм в розділі "Повідомлення":

Питання та відповіді про плагіну:

1 Помилка виду " ", як виправити?

Це означає, що або зазначена форма видалена, або неправильно вказано заголовок форми (title в коді виклику критичний для виклику форми).

2 В листі я бачу теги на кшталт   замість тексту, як виправити?

Це означає, що відвідувач не заповнив дане поле. В такому випадку, тег не замінює, а виводиться, як є.

3 Чи є обмеження при виборі імені для тега?

Є. якщо циклі WordPress   використовується ім'я "name", то ви не можете його використовувати в якості імені для тега. кращим способом   уникнути проблем буде додавання префіксів для імен, на зразок слова "your". З ім'ям тега проблем точно не буде.

4 Чи можна повідомити відвідувачеві по email, що його форма була отримана?

Можна, можливо. Використовуйте в конструкторі форм опцію "Адресат 2":

Дану опцію цілком можна використовувати в якості автовідповідача.

5 Чи можна відправити заповнену форму за кількома адресами?

Можна, можливо. Використовуйте в опції "Адресат" поле "":

де [Email protected]   ваш додатковий email, на який буде відіслана копія заповненої відвідувачем форми (команда "cc" відправляє приховану копію).

6 Чи можна вивести форму не в запису або сторінці?

Так. Вставте код виклику форми в текстовій віджет.

7 Чи можна вивести форму безпосередньо кодом в файлах шаблону?

Так. Використовуйте код виду:

8 Форма не відсилається, видається помилка в червоній рамці, як виправити?

Звернутися до вашого хостера, можливо в PHP заборонений виклик функції mail ().

9 При відправці форми видається помилка в помаранчевій рамці, як виправити?

Помаранчева рамка сигналізує про спам. Помилкове спрацьовування захисту від спаму можуть викликати плагіни кешування. Налаштуйте в вашому плагін кешування періодичну очистку файлів кеша (24 годин достатньо).

10 Поле для введення email виглядає інакше, ніж інші поля в формі, як виправити?

Плагін використовує HTML5 код для введення email-адреси (   замість ), А подібний код часто не оформлений в старих шаблонах. Вам необхідно внести зміни в styles.css   вашого шаблону, додавши туди необхідний код для селектора input.

11 Як в email вставити прикріплений користувачем файл?

Використовувати для цього спеціальне поле "Приєднання:"

Дійсно заслуговує вашої уваги. На відміну від багатьох інших популярних плагінів він не змушує вас купувати якусь Pro   версію - все його можливості доступні відразу. Популярність плагіна (понад 19 мільйонів скачувань) цілком заслужена - при всій своїй функціональності він надзвичайно простий в налаштуванні і доступний навіть для початківців користувачів движка WordPress.

Але все ж пам'ятаєте - це плагін створення контактних форм, а не плагін створення просто форм. При всіх своїх можливостях він не дозволить вам створити просунуту форму на основі будь-яких умов. Його основне призначення саме створення контактних форм і не більше. Для створення динамічних форм, форм створення записів і тому подібних речей використовуйте плагіни начебто Ninja Forms

Сподобався пост? Підпишись на оновлення по або

Плагін Contact Form 7 допоможе організувати зворотний зв'язок на вашому сайті.

Завантажити плагін Contact Form 7 можна на офіційному сайті WordPress

Завантажити плагін Really Simple CAPTCHA можна на офіційному сайті WordPress

Як встановити і підключити цей плагін ми розглянули в уроці ««, зараз розберемося з додатковими функціями плагіна Contact Form 7. Форма коректно працює на моніторах, планшетах, телефонах і ноутбуках. До речі якщо у вас зламався ноут, тобто сервіс де роблять ремонт ноутбуків HP.

Після того як ви завантажили та активували плагін зайдіть в налаштування плагіна перейшовши в новий розділ панелі управління «Контакти».

Наведіть мишкою на назву форми і виберіть «Редагувати»

Відкриється вікно зміни параметрів форми

Так як на сайті може використовуватися не одна, а кілька форм (форма відправки повідомлення, форма замовлення дзвінка, форма з анкетними даними), то щоб не виникало плутанини яка форма за що відповідає, потрібно змінити ім'я форми. Для цього клікніть по назві форми 1.

У блоці №2 відображається те, що буде виводиться на сторінці в формі. Спочатку йде текст, назву поля, після код цього поля. Ви можете змінити текст на той який вам потрібен.

Для додавання нових полів в форму натисніть на список, що випадає №3 - «Згенерувати тег» і зі списку виберіть необхідний елемент.

• Текстове поле
• E-mail
• Номер телефону
• Число (spinbox)
• Число (slider)
• Текстове поле
• Випадаюче меню
• Checkboxes
• Radio buttons
• Acceptance
• питання
• CAPTCHA
• Відправлення файлу
• кнопка відправки

Підказки та поля форми за замовчуванням розташовуються так: вгорі підказка, внизу елемент. Якщо хочете розташувати опис і елемент в один рядок - приберіть після тексту тег

. Весь блок з описом і елементів повинен бути в один рядок і перебувати всередині тега

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