


Блог IT-шника
Блог IT-шника
Привіт:) Спілкування зі своїми відвідувачами — важливий момент успішної роботи будь-якого веб-ресурсу. Користувач завжди повинен мати можливість звернутися до адміністрації сайту з будь-якого питання. Саме для цього є форма зворотного зв'язку WordPress. Покажу як її встановити та налаштувати.
Покажу найбільш популярні та робочі способи створення форми контактів у середовищі WordPress.
Цей модуль — один з найпопулярніших серед ВордПрес-користувачів. Має всі необхідні інструменти для створення та налаштування контактних форм будь-якої складності, з інтерфейсом українською. Розберу основні моменти роботи із ним.
Насамперед встановіть та активуйте плагін.
В адмін-розділі Зв'язок > Контактні форми вже створено форму для прикладу. Можете сміливо використовувати її або створити нову в підменю Додати.
Якщо потрібно створити власну форму, клацніть Додати. У новому вікні зверху вкажіть назву.
Видно, що за замовчуванням були додані основні поля. Їх можна видаляти та додавати свої. Для цього є панель кнопок із назвами полів.
Наприклад, додамо поле для введення номера телефону. Для цього в текстовому полі поставте курсор у потрібне місце та натисніть зверху однойменну кнопку.
У новому вікні:
В кінці клацніть Вставити позначку.
<label>
та додайте назву.Далі можете додати решту полів, відредагувати існуючі.
Наприкінці, у правому кутку, натисніть кнопку Зберегти.
до змісту ↑Після збереження форми вона готова до роботи. Про це свідчить спеціальний шорткод під її назвою. Скопіюйте його.
Форму можете вивести на окремій сторінці або десь у спливаючому вікні.
Якщо, наприклад, потрібно вивести у вмісті посту або сторінки, відкрийте на редагування (або створіть) та вставте скопійований код у блок Короткий код.
На сайті це виглядатиме приблизно так:
СПАМ через контактні форми — часта проблема на сайті. Для її вирішення є декілька способів.
Після встановлення та активації Contact Form 7 автоматично створює тестову форму. Часто саме ця форма й використовуються на сайті. Але у ній для полів плагін використовує стандартні назви.
А це також може стати причиною СПАМу. Все діло в тому, що зазвичай для формування списків email-адрес використовуються боти. Бот, скануючи сайт, знаходить на його сторінках форму. Далі відбувається аналіз її полів. Скоріше за все такі стандартні назви полів містяться у базах цих ботів, через що така форма більш схильна щоб пропустити СПАМ.
Є простий спосіб знизити вірогідність появи СПАМу — перейменування стандартних назв полів. Для цього просто перейменуйте поля на вкладці Форма, а також в опціях Тема, Додаткові заголовки та Тіло повідомлення на вкладці Пошта.
Збережіть форму.
до змісту ↑Ефективний спосіб захисту від СПАМу — використання Google-капчі (reCAPTCHA).
У плагіні вже інтегровано цей модуль. Його потрібно лише активувати.
Відкрийте Зв'язок > Інтеграція, знайдіть блок reCAPTCHA та клацніть Налаштування інтеграції.
У браузері перейдіть за адресою https://www.google.com/recaptcha/admin/create. На сторінці вкажіть назву (довільну), тип капчі, домен свого сайту, погодьтесь з умовами використання (Accept the reCAPTCHA Terms of Service). В кінці натисніть кнопку SUBMIT.
У наступному вікні побачите ключі захисту, які необхідно вставити для вашої форми.
Поверніться в адмін-частину свого сайту, відкрийте підменю Інтеграція та натисніть Налаштування інтеграції. У полях введіть надані сервісом ключі та збережіть.
Якщо все зроблено вірно, в нижньому правому кутку сайту ви побачите панель Google-капчі. Захист працює.
Плагін також дозволяє у форму додати можливість прикріплювати файли.
Перейдіть до списку всіх форм та відкрийте потрібну.
Помістіть курсор у те місце, де потрібно додати поле для завантаження файлів, і натисніть на кнопці файл.
У новому вікні зверніть увагу на 2 опції:
Оформити поле файл, відповідно до інших, можна так:
Повний код форми:
Після збереження форми на сайті тепер відвідувач зможе прикріпити до свого повідомлення файл:
Відкрийте свою форму та перейдіть на вкладку Пошта. Ця частина налаштувань відповідає за доставку, зовнішній вигляд і вміст листів, що прийшли вам. Опишу кожне поле.
Це спливаючі повідомлення, які бачитиме відвідувач при неправильному заповненні форми, успішному/неуспішному надсиланні повідомлення. Можете замінити на власні. Після цього не забудьте зберегти.
Детально цей функціонал описав у пості "Як у Contact Form 7 відправити вкладені файли на email".
Описав у статті "Автоматичне пересилання даних із WordPress-форм у Telegram".
Якщо при перегляді на мобільних поля форми різної ширини і не розтягуються на всю ширину екрану, перейдіть Вигляд > Налаштувати > Додатковий код 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%;
}
}
Іноді потрібно, щоб після успішного відправлення форма ховалася, і залишалося лише повідомлення про успішне відправлення.
.wpcf7-form.sent p {
display: none;
}
Великий мінус цього плагіну — це завантаження його скриптів та стилів на кожній сторінці сайту, через що створюється додаткове навантаження на сервер хостингу. Щоб викликати їх лише на сторінці з формою, вставте у 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 );
}
до змісту ↑
Основні причини:
Один із способів вирішення проблеми — використовувати зовнішній SMTP-сервер.
Покажу на прикладі безкоштовного сервера надсилання листів від Google. Розберу 2 способи.
Використовуватиму безкоштовний ВордПрес-модуль WP Mail SMTP by WPForms.
Після встановлення та активації плагіну в адмінці відкрийте WP-Mail-SMTP > Налаштування. На вкладці Загальне потрібно налаштувати такі поля:
xxx@gmail.com
;Не забудьте зберегти налаштування.
до змісту ↑Спосіб підійде, якщо не хочете ставити на сайт ще один плагін. Працюватиме аналогічно описаному вище методу.
У файл 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
" вкажіть пароль.
У CF7 за замовчанням немає можливості показати форму зворотного зв'язку у спливаючому вікні. Для цього можна скористатися сторонніми рішеннями. Наприклад, плагіном Popup Maker.
Основні кроки:
Форму, створену CF7, також можна вивести в Елементорі. Для цього відкрийте існуючу сторінку в редакторі або створіть нову. Далі додайте елемент Короткий код та вставте у відповідне поле шорткод вашої форми.
Розгляну випадок із використанням безкоштовного плагіну багатомовності Polylang.
За замовчуванням безкоштовна версія Polylang не дозволяє перекладати текстові поля CF7-форм, а також системні повідомлення (під час валідації форми, після її відправлення тощо).
Зручну можливість перекладу надає безкоштовний плагін Multilingual Contact Form 7 with Polylang (https://wordpress.org/plugins/multilingual-contact-form-7-with-polylang/).
{Thank you for your message. It was sent.}
". Справа клацніть Зберегти.У файлі 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-адресу, на яку потрібно перенаправити.
CF7 за замовчуванням додає теги <p>
і <br>
у своїх формах. Якщо у такій формі використовується своя власна розмітка, то часто виникають проблеми із її стилізацією.
Щоб вимкнути автоматичне вставляння вказаних тегів, використайте один із способів (рекомендую користуватися першим).
/**
* СПОСІБ 1
*
* Код у файлі functions.php
*/
add_filter( 'wpcf7_autop_or_not', '__return_false' );
/**
* СПОСІБ 2
*
* Директива у файлі wp-config.php
*/
define( 'WPCF7_AUTOP', false );
до змісту ↑
В одному із проектів потрібно було після успішного відправлення форми автоматично завантажувати файл на комп'ютер відвідувача сайту. Для цього я на сайті через адмін-меню Медіафайли -> 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) якоїсь конкретної форми. Наприклад, на сайті створені та працюють декілька форм. І в одній із них необхідно, після успішного відправлення, прикріпити якийсь файл для автоматичного завантаження відвідувачем. Або для кожної з форм потрібно зробити редирект (перенаправлення) на різні сторінки сайту.
Щоб однозначно визначити конкретну форму, необхідно перевіряти її ID, який присвоюється одразу при створенні форми.
Його подивитися просто.
post
. Числове значення, яке слідує справа після знаку "=
", і є цим унікальним ID форми. Наприклад, post=99
. Тут 99
— унікальний ідентифікатор.Процес детально описаний в матеріалі.
Простий спосіб через код PHP описав у пості.
Додайте 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; /* Уникнення перенесення тексту */
}
Додайте 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>
не має вмісту (контенту). А селектори псевдокласів працюють лише для тегів, які мають вміст.