Как да настроите CSS формуляр за контакт 7

Видео: Как изменить внешний вид Contact form 7? Коддинг или Плагин?

Съдържание

инструкции
съвети
предупредителен
Какво ви трябва

Формулярът за контакт 7 е приставка за платформи за публикуване в WordPress, която позволява на потребителите бързо да създават потребителски форми за контакт. Въпреки че формите са лесни за създаване и внедряване, техните полета са минимално персонализирани, позволявайки интеграция с всеки сайт. Създайте си персонализирани стилове и ги изпълнявайте в полетата на формулярите, генерирани от този плъгин.

инструкции

Персонализирайте стила на полетата с формуляр за контакт 7, използвайки CSS (Comstock / Comstock / Getty Images)

Отворете таблицата със стилове на темата на вашия WordPress и превъртете до края. Създайте анотирана област, за да можете лесно да намерите кода си. Пример:

/ Тук започва моят потребителски CF7 код /
Персонализирайте стиловете на вашите полета и текстови области. За да направите това, създайте запис във вашата стилова таблица. Пример:

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

Добавете граници, фонове, подложки и размери на текстовите елементи. Примери:

.wpcf7 input [type = "text"] {фон: няма повторение скрол 0 0 # F9F9F9; граница: 1px твърдо # 8E9BA9; пълнеж: 5px; ширина: 200px; }
Персонализирайте стиловете на падащите менюта и менютата за избор.За да направите това, създайте запис във вашата стилова таблица. Пример:

.wpcf7 input [type = "select"] {

}

Персонализирайте полетата за избор, подобни на текстовите полета. Полетата за избор не са толкова широки като текстовите полета, така че добавете няколко допълнителни пиксела към ширината си. Пример:

.wpcf7 input [type = "selected"] {фон: няма повторение скрол 0 0 # F9F9F9; граница: 1px твърдо # 8E9BA9; пълнеж: 5px; ширина: 210px; }
Персонализирайте стила на бутона за изпращане. За да направите това, създайте запис във вашата стилова таблица. Пример:

.wpcf7 input [type = "submission"] {

}

Персонализирайте бутона „изпрати“, за да допълни вида и усещането на сайта ви (трябва да продължи да се отличава от фона). Пример за червен бутон за изпращане:

.wpcf7 input [type = "submission"] {цвят на фона: # 990000; граница: 4px твърдо # B34040; цвят: #FFFFFF; }
Запазете промените във вашата таблица със стилове и прехвърлете данните в папката на темата.

съвети

Опитайте различни стилове и различни цветове на границите.
Направете нова проверка на формулярите във Firefox, Safari и Internet Explorer, защото всеки браузър предлага малко по-различни полета за въвеждане.

предупредителен

Добавете персонализиран CSS към стилова таблица на вашата тема, а не към стилова таблица на приставки. Ако направите това, при обновяване на приставката, персонализирането на файловете в папката ви може да се загуби.