Как да създадете отзивчив формуляр за контакт с два звънеца във формуляр за контакт 7

В предишната ни статия за работа с приставката Contact form 7 показахме как да създадем формуляр с две колони. Днес ще ви покажем как да създадете отзивчива (гумена) форма от две колони. Формулярът ще се показва в две колони с висока резолюция и ще бъде компресиран в една на мобилни устройства. Окончателната версия ще изглежда така:

HTML маркиране

Първо, нека създадем HTML маркировка за формуляра. Ще обвием целия формуляр в идентификатор, наречен „responsive-form” и след това ще му дадем броя редове и колони, както следва:

Ако публикувате този формуляр на сайта точно сега, той ще изглежда така:

Нека да разгледаме css стиловете за нашата решетка с две колони.

Тези стилове определят редове и колони. Ако погледнете формуляра сега, ще видите, че полетата са подредени в две колони.

Добавете малко стил към формуляра.

Прилагането на горните стилове към формуляра ще го направи да изглежда по-добре. При високи разделителни способности формулярът ще се показва в две колони, а на мобилните устройства от своя страна в една.

На компютъра

На мобилно устройство

Не забравяйте, ако е възможно, да прецените вписванията, които харесвате, с броя звезди по ваша преценка.