7 Sontact вид настройка форма
Популярни Формуляр 7 плъгин не се различава особено красота на стандартното си изпълнение на тази за много потребители, въпросът е как да промените външния вид. Това е, което ние сега правим, аз се опитвам да ви дам един универсален вариант, който е подходящ за всеки сайт.
По-рано говорихме за това как да инсталирате и конфигурирате формата за контакт 7. Сега ние няма да говорим за това, и веднага да пристъпи към необходимите промени в дизайна.
Tabs отворен започне да се правят корекции, за да започне малко ощипвам нашата форма.
Добавянето на класове на форма формата за контакт 7.
Когато се отвори формата за редактиране, ще видите нещо подобно следната картина:
Тази форма за обратна връзка ще изглежда така:
Boring, не е пропорционална, честно казано не е хубаво.
За да промените външния вид на формите, които трябва да се направят някои работи с стилове, но за да започне да добавите още класове в шаблон форма. За тази отворена форма за редактиране (както е показано по-горе) и добавя следните класове:
Напиши малко, така че е трудно да се правят грешки. В мрежата, най-вероятно намерите съвети без прилагане и добавяне на класове. Работата е там, че без добавяне на класове може да бъде няколко проблема. Например, може да искате да добавите няколко форми на интернет, те ще бъдат идентични с формата, и то не винаги е удобно, за това, че е необходимо да се използва предложената версия на мен.
добавени класове все още нищо не се промени, следващата стъпка е да се определи идентификатор на формуляр.
Определете форма ID на страницата.
Първо трябва да се разбере, че една и съща форма ще има различен номер на различни страници на сайта, така че направи плъгин, добавя допълнителен параметър за всяка форма извикване. Сега ние анализираме в детайли.
В кода търсите в началото на нашата форма, тя изглежда така:
Това е, което ще оформи номер. Поглеждайки назад, аз ще покаже някои идентификатор има същата форма в друга страница.
Както можете да видите, идентификаторът е различно, само за няколко фигури. На тази първо трябва да реши коя страница ще бъде разположен форма, и едва след това да пристъпи към преразглеждане на стилове.
Е, следващата стъпка е взето, ние сме определили идентификатор, нашите предписаните класове А сега да преминем директно към промяна във външния вид.
Стайлинг Форма Форма за контакти 7 файла style.css
Гледайки напред да кажа, че опцията е малко вероятно, че ще ми намери идеалното предложение. Факт е, че всеки, който прочете това иска да види формата му е като това, което той представлява. Аз не съм четец на ум, и не мога да угоди на всички, но аз ще се опитам да ви дам един съвет, където и къде да гледам и какво да се промени. Така че, прости веднага за възможно разочарование, няма панацея, а вие трябва да работят малко.
Промяна на цвета на фона, маржове, шрифт форма.
След това отидете на работа стиловете. Първа смяна (ако е необходимо) цвета на фона на формата, адаптиране на нашите граници, ние избираме желания шрифт и цвят на текста. Всички тези настройки ще бъдат извършени знаейки ID. Как да го получите, разгледахме по-горе.
Първо погледнете файла style.css, добавете първите правила за идентификационния номер на формуляр (трябва да добавите в долната част на файла), в моя случай това wpcf7-f172-р34-O1, вие също трябва да замени вашата самоличност:
# Wpcf7-f172-Р34-o1 марж: 5px;
подложка: 10px;
фон: # B3AFAF;
шрифт семейство: Грузия, «Times New Roman", Times, сериф;
цвят: # 000;
>
Сега помислете всички подробности:
- На първо място, заеми се отдръпнали. Външната граници (ръб да образуват началото) - марж: 5px, подложка (от началото до вътрешната форма елементи) -padding: 10px.
- Леене или нейния фон се определя от фон на имот: # B3AFAF, цвят може да избере нещо друго, просто сменете стойността.
- Ние определяме семейството шрифтове, ако не искате да се регистрирате, вие не може да го управлява (шрифт семейство: Грузия, «Times New Roman", Times, серифен).
- Цветът на текста определя цвета имота, който сега стои в черно (цвят: # 000).
С тези параметри могат да експериментират за себе си, изберете подложка, цветове и шрифтове. За да направите това, трябва само да промените стойността, с изключение на новата опция за да опресните страницата и да видите промените. Не се страхувайте да експериментирате, тогава няма да се счупи нещо, най-много стилове просто не работят и можете лесно да го оправи, както е било.
Ние определяме границите между областите, промяна на рамката.
Ние се обръщаме към нашите полета, добавете запълване:
# Wpcf7-f172-Р34-o1 р марж: 5px;
>
Това уплътнение около краищата на полетата, които ще бъдат на текста и блоковете не са се слели в едно.
Следващата стъпка ще бъде рамката, ще дам своя версия, и можете да намерите в мрежата много опции, които ви харесват и да ги замени.
# Wpcf7-f172-р34-o1 вход, текстово поле граница: 3px двойно # 000;
>
От страна на малко по-подробно. Стойността на този 3px ширина на рамката, двойни, двойни използването на (ако не е нужно, можете да изтриете думата), # 000 цветни рамки могат да избират свои собствени.
Можете ли да запазите промените и да разгледаме това, което получаваш. На следващо място, преминете направо към областта, както и промяна техния размер и местоположение.
Промяна на границите и местоположението им.
Преди това променихме нашия формуляр и добавяне на класа, в момента това е дойде по-удобно. По подразбиране ширина на полетата е същата и не е много хубаво и удобно. ние ще поправим това точно сега. Ние добавяме към файл, следните правила стил:
име-CF поплавъка: ляво;
подложка: 2px;
>
.Име-CF ширина вход: 270px;
>
.thems-CF вход ширина: 100%;
>
.ясно CF ясно: и двете;
>
.ширина текст-CF текстовото поле: 100%;
>
Сега анализираме всичко в подробности:
- Първата класа, към който ние се обръщаме име-CF той принадлежи към областта с името и имейла. За тях тирето на 2 пиксела (пълнеж: 2 пиксела) и заключителни (поплавъка: ляво), което ще се уеднаквят двете полета подред.
- След това се промени маржове ги питат оптимално (за моя шаблон) размер 270px (.name-CF вход
- Полето с името на темата ще направи по цялата ширина на формата, тъй като текстът не може да има повече от (.thems-CF вход
- На следващия блок, който ще добавя на формата е за отмяна на потока (.thems-CF вход).
- Точно както и в предишния случай, поле с текстови съобщения вършат цялата ширина (текст-CF текстово поле).
Можете да актуализирате даден файл от стилове и погледнете промени, ако е необходимо, да коригира размера според нуждите си.
Изравнете бутона "Изпращане" в средата, промяна на фона и нашир.
Ние се обръщаме към нашия бутон, приведе центъра и добавяне на фона:
представя-CF ширина: 200px; / * Блок ширина * /
височина: 25 пкс; / * Височина * /
марж: 0 автомобил; / * Отстъп наляво и надясно * /
>
.представя-CF ширина вход: 200px;
фон: # 96B195;
>
Традиционно обясни какво е това, което:
- Първото правило ние определяме ширината и височината на блока, в който ще бъдат публикувани на ключа и да го постави в центъра на формата.
- Второто правило на цвета на фона на определени бутони (фон: # 96B195, освен ако не сте посочили ще бъде в същия цвят като останалата част на областта), задаване на ширината на бутоните (ширина :. 200px е желателно би било със същия размер като ширината на блока, какво би бутона не е Той се премества настрани).
Пестим нашите настройки и да видим какво имаме:
Съгласен съм, не е шик, но изглежда адекватно като цяло, по-долу стандартната форма, мисля, че ефектът е очевиден. Във всеки случай, ние се научихме да промените външния вид на формуляра формата за контакт 7.