Як створити контактну форму WordPress

Привіт:) Спілкування зі своїми відвідувачами — важливий момент успішної роботи будь-якого веб-ресурсу. Користувач завжди повинен мати можливість звернутися до адміністрації сайту з будь-якого питання. Саме для цього є форма зворотного зв'язку WordPress. Покажу як її встановити та налаштувати.

Зміст

Покажу найбільш популярні та робочі способи створення форми контактів у середовищі WordPress.

Форма зворотного зв'язку WordPress за допомогою плагіну Contact Form 7

Цей модуль — один з найпопулярніших серед ВордПрес-користувачів. Має всі необхідні інструменти для створення та налаштування контактних форм будь-якої складності, з інтерфейсом українською. Розберу основні моменти роботи із ним.

Як створити форму Contact Form 7

Насамперед встановіть та активуйте плагін.

В адмін-розділі Зв'язок > Контактні форми вже створено форму для прикладу. Можете сміливо використовувати її або створити нову в підменю Додати.

Якщо потрібно створити власну форму, клацніть Додати. У новому вікні зверху вкажіть назву.

Видно, що за замовчуванням були додані основні поля. Їх можна видаляти та додавати свої. Для цього є панель кнопок із назвами полів.

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

У новому вікні:

  • позначте опцію Обов'язкове поле, якщо користувач повинен у будь-якому випадку вказати телефон;
  • Ім'я — унікальний ідентифікатор поля (раджу залишити як є);
  • Значення за замовчуванням — початкове значення;
  • поставте галочку навпроти Використовуйте цей текст як заповнювач поля, якщо хочете значення за замовчуванням зробити як підказку;
  • опції Атрибут Id та Атрибут класу потрібні, якщо плануєте згодом змінювати зовнішній вигляд форми.

В кінці клацніть Вставити позначку.

Щоб нове поле мало схожий до всіх інших зовнішній вигляд, оберніть його у тег <label> та додайте назву.

Далі можете додати решту полів, відредагувати існуючі.

Наприкінці, у правому кутку, натисніть кнопку Зберегти.

до змісту ↑

Виведення форми CF7 на сайті

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

Форму можете вивести на окремій сторінці або десь у спливаючому вікні.

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

На сайті це виглядатиме приблизно так:

Плагін Contact Form 7 додає власний блок у редакторі з однойменною назвою. Можете додати його, вибравши в ньому назву створеної форми для виведення.
до змісту ↑

Боротьба зі СПАМом

СПАМ через контактні форми — часта проблема на сайті. Для її вирішення є декілька способів.

Перейменування стандартних імен полів

Після встановлення та активації Contact Form 7 автоматично створює тестову форму. Часто саме ця форма й використовуються на сайті. Але у ній для полів плагін використовує стандартні назви.

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

Є простий спосіб знизити вірогідність появи СПАМу — перейменування стандартних назв полів. Для цього просто перейменуйте поля на вкладці Форма, а також в опціях Тема, Додаткові заголовки та Тіло повідомлення на вкладці Пошта.

Збережіть форму.

до змісту ↑

Форма CF7 із капчею

Ефективний спосіб захисту від СПАМу — використання Google-капчі (reCAPTCHA).

У плагіні вже інтегровано цей модуль. Його потрібно лише активувати.

Відкрийте Зв'язок > Інтеграція, знайдіть блок reCAPTCHA та клацніть Налаштування інтеграції.

У браузері перейдіть за адресою https://www.google.com/recaptcha/admin/create. На сторінці вкажіть назву (довільну), тип капчі, домен свого сайту, погодьтесь з умовами використання (Accept the reCAPTCHA Terms of Service). В кінці натисніть кнопку SUBMIT.

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

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

Якщо все зроблено вірно, в нижньому правому кутку сайту ви побачите панель Google-капчі. Захист працює.

до змісту ↑

Форма Contact Form 7 із можливістю завантаження файлів

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

Перейдіть до списку всіх форм та відкрийте потрібну.

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

У новому вікні зверніть увагу на 2 опції:

  • Граничний розмір файлу (в байтах) — максимальний розмір файлу, що завантажується. Рекомендую встановити значення 10485760 (що дорівнює 10 мегабайтам) або менше.
  • Допустимі типи файлів — формати файлів, які може завантажити користувач. Наприклад: jpeg,png,pdf,txt.

Оформити поле файл, відповідно до інших, можна так:

Повний код форми:

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

до змісту ↑

Налаштування листа CF7 для надсилання на пошту

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

  • Кому — e-mail, на який приходитимуть листи. Вказаний за замовчуванням шаблон бере адресу в розділі Налаштування > Загальне. Можете вписати пошту вручну.
  • Від кого — ім'я відправника та його пошта. В даному випадку відправник — ваш сайт. Вказується його назва та поштова адреса. Раджу не змінювати значення за замовчуванням, інакше можуть не надсилатися листи.
  • Тема — тема листа, яку користувач вписав під час заповнення аналогічного поля.
  • Тіло повідомлення — текст повідомлення. За замовчуванням у ньому вказуються дані користувача, який заповнив форму, і навіть повідомлення. Ви можете вписати будь-який текст.
до змісту ↑

Налаштування повідомлень CF7

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

до змісту ↑

Як у CF7 відправити вкладені файли на email

Детально цей функціонал описав у пості "Як у Contact Form 7 відправити вкладені файли на email".

Як пересилати дані з WordPress-форм у Telegram

Описав у статті "Автоматичне пересилання даних із WordPress-форм у Telegram".

Стилізація полів форми Contact Form 7

Якщо при перегляді на мобільних поля форми різної ширини і не розтягуються на всю ширину екрану, перейдіть Вигляд > Налаштувати > Додатковий код CSS та додайте рядки

@media screen and (max-width: 767px) {
    .wpcf7 input[type="text"],
    .wpcf7 input[type="email"],
    .wpcf7 input[type="tel"],
    .wpcf7 input[type="submit"],
    .wpcf7 textarea {
        display: block;
        width: 100%;
    }
}

Як приховати CF7 форму після успішного відправлення

Іноді потрібно, щоб після успішного відправлення форма ховалася, і залишалося лише повідомлення про успішне відправлення.

.wpcf7-form.sent p {
    display: none;
}

Виклик скриптів та стилів Contact Form 7 лише на сторінці з формою

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

require_once( ABSPATH . 'wp-admin/includes/plugin.php' );
if ( is_plugin_active('contact-form-7/wp-contact-form-7.php') ) {
    add_action( 'wp_print_styles', function () {
        if ( ! is_page( get_theme_mod( "header_contacts") ) ) {
            wp_deregister_style( 'contact-form-7' );
        }
    }, 100 );
    add_action( 'wp_print_scripts', function () {
        if ( ! is_page( get_theme_mod( "header_contacts") ) ) {
            wp_deregister_script( 'contact-form-7' );
        }
    }, 100 );
}
до змісту ↑

Не працює надсилання листів у Contact Form 7

Основні причини:

  1. Невірні налаштування сайту. Буває, що в налаштуваннях вказана неправильна або неіснуюча адреса електронної пошти, від імені якої та на яку мають надсилатися листи. Щоб перевірити це, перейдіть Налаштування > Загальне та переконайтеся, що адреса електронної пошти містить правильну та робочу адресу.
  2. Обмеження хостингу. Часто для основного e-mail використовується скринька, надана хостингом. Через ліміт сервера листи з таких скриньок можуть не надсилатися. Зазвичай таке відбувається на дешевих віртуальних хостингах. Ці обмеження зазначаються у списку доступних послуг тарифного плану. Також ці ліміти можна з'ясувати у техпідтримки.

Один із способів вирішення проблеми — використовувати зовнішній SMTP-сервер.

Покажу на прикладі безкоштовного сервера надсилання листів від Google. Розберу 2 способи.

Перед початком роботи потрібно мати зареєстрований Google Акаунт, який буде використовуватися як основний e-mail на сайті (в опції Адміністративна email адреса в адмін-розділі Налаштування > Загальне).
до змісту ↑

Налаштування SMTP-сервера від Google за допомогою плагіну

Використовуватиму безкоштовний ВордПрес-модуль WP Mail SMTP by WPForms.

Після встановлення та активації плагіну в адмінці відкрийте WP-Mail-SMTP > Налаштування. На вкладці Загальне потрібно налаштувати такі поля:

  • Від (адреса) — e-mail адреса Google у форматі xxx@gmail.com;
  • Від імені — від кого лист (зазвичай вказується назва сайту);
  • Метод відправки пошти — оберіть значення Other SMTP;
  • SMTP серверsmtp.gmail.com;
  • Шифрування SSL;
  • SMTP порт465;
  • Auto TLSУВІМК;   
  • Авторизація УВІМК;
  • SMTP Username — e-mail адреса Google;
  • SMTP пароль — пароль від поштової скриньки.

Не забудьте зберегти налаштування.

до змісту ↑

Налаштування SMTP-сервера від Google без плагіну

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

У файл functions.php вставте рядки

add_action( 'phpmailer_init', function ( $phpmailer ) {
    $phpmailer->Host = 'smtp.gmail.com';
    $phpmailer->Port = 465;
    $phpmailer->Username = 'xxx@gmail.com';
    $phpmailer->Password = 'password';
    $phpmailer->SMTPAuth = true;
    $phpmailer->SMTPSecure = 'ssl';
    $phpmailer->From = 'xxx@gmail.com';
    $phpmailer->FromName = get_bloginfo( 'name' );
    $phpmailer->IsSMTP();
});

У коді значення "xxx@gmail.com" замініть на адресу своєї Google-скриньки та замість "password" вкажіть пароль.

У коді використовується email-сервер від Гугл. Ви можете використовувати й інші поштові сервіси, а також поштовий SMTP-сервер вашого хостингу. Для цього лише потрібно дізнатися його хост, порт, наявність та тип шифрування.
до змісту ↑

Як зробити спливаючу форму CF7 (у модальному вікні)

У CF7 за замовчанням немає можливості показати форму зворотного зв'язку у спливаючому вікні. Для цього можна скористатися сторонніми рішеннями. Наприклад, плагіном Popup Maker.

Основні кроки:

  1. Після встановлення розширення створіть нове спливаюче вікно і дайте йому назву.
  2. У полі контенту вставте шорткод форми Contact Form 7.
  1. Опустіться нижче і знайдіть блок налаштувань Popup Settings. На вкладці Triggers створіть тригер, у якому вкажіть дію, коли показувати на екрані модальне вікно. Також раджу задати Cookie, яке керує повторним відображенням спливаючого вікна. Також у цій секції можна налаштувати, в якому місці сайту виводити спливаюче вікно. Опції добре описані, а тому не зупинятимуться на них.
до змісту ↑

Виведення Contact Form 7 форми в Elementor

Форму, створену CF7, також можна вивести в Елементорі. Для цього відкрийте існуючу сторінку в редакторі або створіть нову. Далі додайте елемент Короткий код та вставте у відповідне поле шорткод вашої форми.

до змісту ↑

Як перекласти поля CF7-форми та системні повідомлення із використанням Polylang

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

За замовчуванням безкоштовна версія Polylang не дозволяє перекладати текстові поля CF7-форм, а також системні повідомлення (під час валідації форми, після її відправлення тощо).

Зручну можливість перекладу надає безкоштовний плагін Multilingual Contact Form 7 with Polylang (https://wordpress.org/plugins/multilingual-contact-form-7-with-polylang/).

  1. Встановіть та активуйте плагін.
  2. Відкрийте адмін-меню Зв'язок -> Контактні форми, оберіть форму (якщо їх декілька) та клацніть на її назві.
  3. У вкладках Форма та Повідомлення впишіть потрібні текстові поля основною мовою. Наприклад, якщо на сайті передбачаються українська та англійська мови, то основною я обираю англійську.
  4. Вміст текстових рядків помістіть у фігурні дужки. Наприклад, "{Thank you for your message. It was sent.}". Справа клацніть Зберегти.
  1. Перейдіть Мови -> Переклади та знайдіть потрібний текстовий рядок у стовпці Рядок.
  2. У цьому ж рядку таблиці, у стовпці Переклади, впишіть переклад цього текстового рядка відповідною мовою.
  1. Внизу сторінки натисніть Зберегти зміни.
до змісту ↑

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

У файлі functions.php пропишіть код

add_action( 'wp_footer', 'mp_redirect_after_sent_mail' );
function mp_redirect_after_sent_mail() {
?>
	<script>
		document.addEventListener('wpcf7mailsent', function(event) {
			location = 'https://site.com/simple-page/';
		}, false);
	</script>
<?php
}

У коді замість https://site.com/simple-page/ вкажіть URL-адресу, на яку потрібно перенаправити.

до змісту ↑

Як прибрати теги <p> та <br> з форми Contact Form 7

CF7 за замовчуванням додає теги <p> і <br> у своїх формах. Якщо у такій формі використовується своя власна розмітка, то часто виникають проблеми із її стилізацією.

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

/**
 * СПОСІБ 1
 * 
 * Код у файлі functions.php
 */
add_filter( 'wpcf7_autop_or_not', '__return_false' );


/**
 * СПОСІБ 2
 * 
 * Директива у файлі wp-config.php
 */
define( 'WPCF7_AUTOP', false );
до змісту ↑

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

В одному із проектів потрібно було після успішного відправлення форми автоматично завантажувати файл на комп'ютер відвідувача сайту. Для цього я на сайті через адмін-меню Медіафайли -> Add New Media File завантажив потрібний файл та додав у файл functions.php наступний код.

add_action( 'wp_footer', 'mp_download_file_after_sent_mail' );
function mp_download_file_after_sent_mail() {
	$downloadFileUrl = 'https://site.com/wp-content/uploads/2023/11/presentation.pdf';
	if ( $downloadFileUrl ) {
		$contactformId = (int) 99;
		$downloadFileName = 'presentation';
		?>
		<script>
			document.addEventListener('wpcf7mailsent', function(event) {
				if (<?php echo $contactformId; ?> == event.detail.contactFormId) {
					jQuery('body').append('<a id="cf7fd-attachment-link" href="<?php echo $downloadFileUrl; ?>" target="_blank" download="<?php echo $downloadFileName; ?>"></a>');
					jQuery('#cf7fd-attachment-link')[0].click();
					setTimeout(function() {
						jQuery('#cf7fd-attachment-link').remove();
					}, 2000);
				}
			}, false);
		</script>
		<?php
	}
}

У коді замініть наступні рядки:

  • значенням змінної $downloadFileUrl вкажіть повну URL-адресу файлу, який буде завантажуватися;
  • замість "99" у змінній $contactformId вкажіть унікальний ідентифікатор (ID) вашої форми. Його можна подивитися в адресному рядку браузера при відкритті конкретної форми на редагування (параметр post=xxx);
  • значення змінної $downloadFileName вкажіть назву файлу, який буде зберігатися на комп'ютері користувача.
до змісту ↑

Як дізнатися ID конкретної форми Contact Form 7

Іноді потрібно дізнатися унікальний ідентифікатор (ID) якоїсь конкретної форми. Наприклад, на сайті створені та працюють декілька форм. І в одній із них необхідно, після успішного відправлення, прикріпити якийсь файл для автоматичного завантаження відвідувачем. Або для кожної з форм потрібно зробити редирект (перенаправлення) на різні сторінки сайту.

Щоб однозначно визначити конкретну форму, необхідно перевіряти її ID, який присвоюється одразу при створенні форми.

Його подивитися просто.

  1. Відкрийте адмін-меню Зв'язок -> Контактні форми.
  2. У списку всіх створених форм клацніть на назві тієї, ID якої потрібно дізнатися.
  3. В адресному рядку браузера, в URL-адресі, знайдіть параметр post. Числове значення, яке слідує справа після знаку "=", і є цим унікальним ID форми. Наприклад, post=99. Тут 99 — унікальний ідентифікатор.
до змісту ↑

Як у Contact Form 7 дані форми передати у зовнішній API

Процес детально описаний в матеріалі.

Як у Contact Form 7 відправити форму із затримкою

Простий спосіб через код PHP описав у пості.

Як у Contact Form 7 прибрати текстовий напис на кнопці

Додайте CSS-стилі:

/* ВАРІАНТ 1 */

.wpcf7 input[type="submit"] {
    color: transparent;
    text-shadow: none;
    background-color: #your-color; /* змініть на потрібний колір */
}

/* ВАРІАНТ 2 */

.wpcf7 input[type="submit"] {
    text-indent: -9999px; /* Переміщує текст за межі кнопки */
    overflow: hidden; /* Запобігає показу тексту */
    white-space: nowrap; /* Уникнення перенесення тексту */
}

Як у Contact Form 7 вставити у кнопку власне зображення

Додайте CSS-стилі:

.wpcf7 .wpcf7-submit {
    position: relative;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='23' height='23' viewBox='0 0 23 23'><path d='M2.29997 22.2264L20.6518 3.87456L20.6502 19.6031L22.7623 19.7377L22.7643 0.264273L3.29085 0.266246L3.42545 2.37835L19.154 2.37676L0.80217 20.7286L2.29997 22.2264Z' fill='%23484E2C'/></svg>");
    background-size: 23px 23px;
    background-repeat: no-repeat;
    background-position: center;
    color: transparent;
    text-shadow: none;
    border: none;
    cursor: pointer;
}
Селектори псевдокласів ::before та ::after відносно кнопки не працюють, а тому конструкції .wpcf7 input[type="submit"]::before та .wpcf7 input[type="submit"]::after не з'являться у DOM-дереві та на екрані. Все діло в тому, що HTML-тег <input> не має вмісту (контенту). А селектори псевдокласів працюють лише для тегів, які мають вміст.

Михайло Петров
Михайло Петров

Мене звати Михайло. Я — WordPress-розробник. Створюю візитки, корпоративні сайти, блоги на WordPress.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *