Як стилізувати контактну форму 7 форм у WordPress

Маючи понад 1 мільйон активних користувачів, Contact Form 7 є одним з найпопулярніших плагінів контактної форми для WordPress. Їх найбільшим недоліком є ​​те, що форми, які ви додаєте з коробки, виглядають дуже просто. На щастя, контактну форму 7 можна легко оформити за допомогою CSS у вашій темі WordPress. У цій статті ми покажемо вам, як стилізувати контактну форму 7 форм у WordPress.


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

У нас є покрокове керівництво про те, як створити контактну форму в WordPress.

Відеоурок

Підписуйтесь на WPBeginner

Якщо вам не сподобається відео чи потрібні додаткові інструкції, продовжте читання.

Починаємо

Ми припускаємо, що ви вже встановили плагін Contact Form 7 і створили свою першу контактну форму. Наступний крок – скопіювати короткий код для вашої контактної форми та вставити її у допис WordPress або на сторінку, де ви хочете, щоб ваша форма з’явилася.

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

Форма контактів за замовчуванням 7 на веб-сайті WordPress, використовуючи тему WordPress за замовчуванням

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

Ми будемо створювати контактну форму 7 форм за допомогою CSS. Весь CSS входить у таблицю стилів вашої теми чи дочірньої теми.

Форма контактної форми 7 Форми в WordPress

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

Кожна контактна форма використовує клас CSS .wpcf7, який можна використовувати для стилювання форми.

У цьому прикладі ми використовуємо шрифт Google Lora у своїх полях введення. Подивіться, як додати Google Fonts у WordPress.

div.wpcf7 {
фон-колір: #fbefde;
облямівка: 1px суцільний # f28f27;
підкладка: 20px;
}
.wpcf7 вхід [type ="текст"],
.wpcf7 вхід [type ="електронною поштою"],
.wpcf7 textarea {
фон: # 725f4c;
колір: #FFF;
сімейство шрифтів: lora, sans-serif;
шрифт: курсив;
}
.wpcf7 вхід [type ="подати"],
.wpcf7 вхід [type ="кнопка"] {
фоновий колір: # 725f4c;
ширина: 100%;
вирівнювання тексту: центр;
перетворення тексту: великі літери;
}

Ось так виглядала наша контактна форма після застосування цієї CSS.

Форма для стилізації контактів 7 форм із CSS у WordPress

Форми для декількох контактних форм 7 форм

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

Просто відкрийте сторінку, що містить форму, яку ви хочете змінити. Переведіть мишу до першого поля у формі, клацніть правою кнопкою миші та виберіть «Оглянути елемент». Екран браузера розділиться, і ви побачите вихідний код сторінки. У вихідному коді потрібно знайти початковий рядок коду форми.

Пошук ідентифікатора елемента для вашої контактної форми

Як ви бачите на скріншоті вище, наш контактний код форми починається з рядка:

Атрибут id – це унікальний ідентифікатор, згенерований Контактною формою 7 для цієї конкретної форми. Це поєднання ідентифікатора форми та ідентифікатора поста, куди ця форма додається.

Ми використовуватимемо цей ідентифікатор у нашому CSS, щоб створити форму контакту. Ми замінимо .wpcf7 у своєму першому фрагменті CSS на # wpcf7-f201-p203-o1.

div # wpcf7-f201-p203-o1 {
фон-колір: #fbefde;
облямівка: 1px суцільний # f28f27;
підкладка: 20px;
}
# вхід # wpcf7-f201-p203-o1 [type ="текст"],
# вхід # wpcf7-f201-p203-o1 [type ="електронною поштою"],
# wpcf7-f201-p203-o1 textarea {
фон: # 725f4c;
колір: #FFF;
сімейство шрифтів: lora, "Відкрити Sans", без зарубок;
шрифт: курсив;
}
# вхід # wpcf7-f201-p203-o1 [type ="подати"],
# вхід # wpcf7-f201-p203-o1 [type ="кнопка"] {
фоновий колір: # 725f4c;
ширина: 100%;
вирівнювання тексту: центр;
перетворення тексту: великі літери;
}

Форма контакту стилю 7 Форми з CSS Hero

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

Просто встановіть та активуйте плагін CSS Hero та перейдіть на сторінку, що містить вашу форму. Клацніть на панелі інструментів героя CSS, а потім натисніть на елемент, який ви хочете стилізувати. CSS Hero надасть вам простий інтерфейс користувача для редагування CSS, не записуючи жодного коду.

Форма для стилізації контакту 7 Форма за допомогою CSS Hero

Дивіться наш повний огляд CSS Hero та як його використовувати для створення будь-якого стилю на вашому сайті WordPress. Ви можете використовувати код купона героя CSS WPBeginner щоб отримати ексклюзивну знижку 34%.

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me