Як скоригувати контактну форму CSS 7

Зміст

• Інструкції
• Як
• Повідомлення
• Що вам потрібно

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

Інструкції

Налаштуйте стиль поля Контактної форми 7 за допомогою CSS (Comstock / Comstock / Getty Images)

1. Відкрийте таблицю стилів вашого WordPress і прокрутіть до кінця. Створіть анотацію, щоб можна було легко знайти код. Приклад:

   / Тут починається мій спеціальний код CF7 /

2. Налаштуйте стилі ваших полів і текстових областей. Для цього створіть запис у таблиці стилів. Приклад:

   .wpcf7 input [type = "text"], .wpcf7 areadotexto {}

   Додайте межі, фони, відступи та розміри текстових елементів. Приклади:

   .wpcf7 input [type = "text"] {background: без повтору прокрутки 0 0 # F9F9F9; кордон: 1px твердий # 8E9BA9; заповнення: 5px; ширина: 200px; }

3. Налаштуйте стилі випадаючого меню та меню вибору.Для цього створіть запис у таблиці стилів. Приклад:

   .wpcf7 input [type = "select"] {

   
   

   }

   Налаштуйте поля вибору, подібні до текстових полів. Поля вибору не настільки широкі, як текстові поля, тому додайте кілька додаткових пікселів до вашої ширини. Приклад:

   .wpcf7 input [type = "selected"] {background: без повтору прокрутки 0 0 # F9F9F9; кордон: 1px твердий # 8E9BA9; заповнення: 5px; ширина: 210px; }

4. Налаштуйте стиль кнопки надсилання. Для цього створіть запис у таблиці стилів. Приклад:

   .wpcf7 input [type = "submission"] {

   }

   Налаштуйте кнопку "Надіслати", щоб доповнити зовнішній вигляд вашого сайту (він повинен продовжувати виділятися на тлі). Приклад червоної кнопки надсилання:

   .wpcf7 input [type = "submission"] {background-color: # 990000; кордон: 4px суцільний # B34040; колір: #FFFFFF; }

5. Збережіть зміни в таблиці стилів і перенесіть дані до теки.

Як

• Спробуйте різні стилі та різні кольори меж.
• Виконайте нову перевірку форм у Firefox, Safari та Internet Explorer, оскільки кожен браузер надає трохи різні поля введення.

Повідомлення

• Додайте власний CSS до таблиці стилів вашої теми, а не до таблиці стилів плагіна. Якщо ви зробите це, коли оновлення плагіна, налаштування файлів у вашій теці може бути втрачено.

Що вам потрібно

• Доступ до таблиці стилів WordPress