Како стилизирати образац за контакт 7 образаца у ВордПресс-у

Са преко милион активних корисника, Контакт образац 7 један је од најпопуларнијих додатака за образац за ВордПресс. Њихов највећи недостатак је што ван обрасци које додате су врло једноставни. Срећом, Контакт образац 7 може се лако стилизовати помоћу ЦСС-а у вашој ВордПресс теми. У овом чланку ћемо вам показати како стилски образац 7 образаца у ВордПрессу.


Белешка: Више не препоручујемо додатак за образац Цонтацт Форм 7. Уместо тога, препоручујемо ВПФормс, који је најприкладнији додатак за контакт за почетнике. Такође можете бесплатно да преузмете ВПФормс Лите.

Имамо корак по корак водич о томе како креирати образац за контакт у ВордПресс-у.

Видео Туториал

Претплатите се на ВПБегиннер

Ако вам се видео не свиђа или вам је потребно више упутстава, наставите да читате.

Почетак

Претпостављамо да сте већ инсталирали контактни образац Цонтацт Форм 7 и направили свој први контакт образац. Следећи корак је копирање кратког кода за образац за контакт и залеђивање у ВордПресс пост или страницу на којој желите да се ваш образац појави.

Ради овог чланка користили смо подразумевани контакт образац и додали га у ВордПресс страницу. Овако је образац за контакт изгледао на нашој пробној страници.

Подразумевани образац за контакт 7 на веб локацији ВордПресс користећи подразумевану ВордПресс тему

Као што можете видети да контакт образац наслеђује неке стилове облика из ваше ВордПресс теме. Поред тога, то је врло основно.

Обликоват ћемо образац за контакт 7 помоћу ЦСС-а. Сав ЦСС иде у образац стилова ваше теме или дечије теме.

Облик контактних образаца 7 Обрасци у ВордПрессу

Контакт образац 7 генерише врло користан и стандардни компатибилни код за обрасце. Сваки елемент у обрасцу има одговарајућу ИД и ЦСС класу која је с њим повезана.

Сваки контакт образац користи ЦСС класу .впцф7 коју можете користити да бисте обликовали свој образац.

У овом примеру у пољима за унос користимо Гоогле фонт Лора. Погледајте како да додате Гоогле фонтове у ВордПресс.

див.впцф7 {
позадинска боја: #фбефде;
обруб: 1пк чврста материја # ф28ф27;
паддинг: 20пк;
}
.впцф7 улаз [тип ="текст"],
.впцф7 улаз [тип ="емаил"],
.впцф7 тектареа {
позадина: # 725ф4ц;
боја: #ФФФ;
породица фонтова: лора, санс-сериф;
фонт фонта: курзив;
}
.впцф7 улаз [тип ="прихвати"],
.впцф7 улаз [тип ="дугме"] {
позадинска боја: # 725ф4ц;
ширина: 100%;
поравнавање текста: центар;
трансформација текста: велика слова;
}

Овако је изгледао наш контакт образац након примене овог ЦСС-а.

Стилизовање контакт форме 7 обрасца са ЦСС-ом у ВордПресс-у

Обликовање вишеструких контакт образаца 7 образаца

Проблем са ЦСС-ом који смо користили горе је што ће се он применити на све обрасце за контакт 7 на вашој веб локацији. Ако користите више образаца за контакт и желите да их другачије стилизирате, тада ћете морати да користите ИД генерисан контактним обрасцем 7 за сваки образац.

Једноставно отворите страницу која садржи образац који желите да измените. Доведите мишем до првог поља у обрасцу, кликните десним тастером миша и одаберите Испитај елемент. Екран прегледача ће се поделити и видећете изворни код странице. У изворном коду морате пронаћи почетну линију кода обрасца.

Проналажење ИД-а елемента за образац за контакт

Као што можете видети на горњој слици, наш образац за контакт контакт почиње линијом:

Атрибут ид је јединствени идентификатор који је генерирао Контакт образац 7 за овај образац. То је комбинација ИД-а обрасца и ИД-а поста где се овај облик додаје.

Овај ИД ћемо користити у нашем ЦСС-у да бисмо обликовали контакт образац. Ми ћемо заменити .впцф7 у нашем првом ЦСС исјечку са # впцф7-ф201-п203-о1.

див # впцф7-ф201-п203-о1 {
позадинска боја: #фбефде;
обруб: 1пк чврста материја # ф28ф27;
паддинг: 20пк;
}
# впцф7-ф201-п203-о1 улаз [типе ="текст"],
# впцф7-ф201-п203-о1 улаз [типе ="емаил"],
# впцф7-ф201-п203-о1 тектареа {
позадина: # 725ф4ц;
боја: #ФФФ;
породица фонтова: лора, "Опен Санс", Санс Сериф;
фонт фонта: курзив;
}
# впцф7-ф201-п203-о1 улаз [типе ="прихвати"],
# впцф7-ф201-п203-о1 улаз [типе ="дугме"] {
позадинска боја: # 725ф4ц;
ширина: 100%;
поравнавање текста: центар;
трансформација текста: велика слова;
}

Стилска образац за контакт 7 Обрасци за ЦСС Херо

Многи почетници ВордПресс-а немају искуства са писањем ЦСС-а и не желе да троше време на то. Срећом, за почетнике постоји сјајно решење које ће вам омогућити да не само стилски образац већ готово сваки аспект ваше ВордПресс странице.

Једноставно инсталирајте и активирајте ЦСС Херо додатак и идите на страницу која садржи ваш образац. Кликните на алатну траку ЦСС Херо, а затим кликните на елемент који желите да стил. ЦСС Херо ће вам пружити лако корисничко сучеље за уређивање ЦСС-а без икаквог писања било којег кода.

Облик контакт форме 7 Образац помоћу ЦСС Херо

Погледајте наш комплетан преглед ЦСС Хероја и како га користити за стилизовање било чега на вашој ВордПресс веб локацији. Можете да користите ЦСС Херо код купона ВПБегиннер да бисте добили ексклузивни попуст од 34%.

То је све што се надамо да је овај чланак помогао да научите како да обликујете образац за контакт 7 у ВордПрессу. Такође бисте желели да видите наш водич о томе како да додате скочни образац за контакт у ВордПресс-у.

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