Как использовать контактную форму 7 с пользовательскими HTML и CSS в Wordpress? - PullRequest
0 голосов
/ 17 февраля 2020

Я довольно новичок в сообществе WordPress, и если бы это зависело от меня, я бы никогда не вступил в это (я просто не в CMS). Это просто ситуация, с которой я сейчас работаю около недели, поэтому, пожалуйста, предположим, что у меня нет знаний по этому вопросу.

Итак, я конвертирую шаблон HTML в тему WordPress и пришло время обратить внимание на контактную форму. Он появляется внизу (почти) всех страниц (но не в разделе нижнего колонтитула). Дизайнер сделал это очень хорошо структурированным и подходящим для этой цели, и из-за моего предыдущего опыта я подумывал использовать плагин для работы вместо того, чтобы пытаться самостоятельно запрограммировать форму контакта. Но я провел исследование и выяснил, что это общая проблема, с которой сталкивается большинство людей, что дизайн сгенерированной формы слишком жесткий, чтобы его можно было стилизовать соответствующим образом. Насколько я читал, самый простой плагин для работы с дизайном - это Contact Form 7, потому что он генерирует просто скелет формы. Я также нашел этот учебник , который объясняет процесс. Однако, если я буду следовать инструкциям, упомянутым в нем, я все равно останусь с голой «бесклассовой» формой. Имейте в виду, что я добавил классы, используя синтаксис Contact Form 7 в бэкэнде WordPress, где нужно создавать / редактировать формы, но их (классов) нет. Я пытался поместить raw HTML в бэкэнд-редактор wp плагина, но получаю тот же результат.

Как вы получаете пользовательский дизайн HTML и CSS в Контактной Форме 7 или любом другом Контакте Плагин формы, который вы используете, я не застрял с контактной формой 7?

Любая помощь в контактной форме 7 очень ценится, а также любые другие идеи о том, как подходить к общему «Пользовательские формы контактных форм в WordPress» выпуск!

1 Ответ

0 голосов
/ 17 февраля 2020

Вы можете использовать пользовательские элементы div и классы для разработки формы 7. Форма контакта. Вот пример кода:

<div class="row">
    <div class="col-md-6 form-group">[text* your-name class:form-control placeholder "Name"]</div>
    <div class="col-md-6 form-group">[email* your-email class:form-control placeholder "Email"]</div>
</div>

Подсказка *: Вы должны использовать шорткоды по умолчанию, сгенерированные формой контакта 7, и закрыть их с помощью Ваши собственные div.

Надеюсь, это поможет ..

...