Как изменить стиль контактной формы WordPress

Хотите изменить стиль контактной формы WordPress? Тогда это руководство для вас! Вы узнаете, как стилизация форм WordPress может быть очень простой! Узнать больше.

Примерное время чтения : 6 минут

У вас есть только один шанс произвести первое впечатление.

А привлечь внимание посетителей красивой формой — способ произвести отличное впечатление.

Это также идеальный способ заставить их заполнить форму. В конце концов, как они могут заполнить его, если они его не видят?

Итак, если вы готовы перейти от простых форм к красивым, это руководство для вас.

Мы покажем вам два способа легко изменить стиль контактной формы WordPress!

Давайте углубимся в это.

Как изменить стиль контактной формы WordPress

Как мы уже упоминали, есть два способа настроить стиль вашей формы.

Какой из них вы выберете, будет зависеть от вашего уровня комфорта при кодировании. Но мы покажем вам оба метода, чтобы вы знали все доступные варианты.

Способ 1: отредактируйте код своей формы в WordPress

Итак, вы хотите погрузиться с головой в воды кодирования, да?

Мы предполагаем, что у вас уже есть созданная форма и вы хотите ее настроить. Если у вас нет формы, перейдите к нашему руководству по созданию формы, чтобы начать работу.

Шаг 1: Получите идентификатор или класс вашей формы

Для начала вам нужно получить идентификатор или класс вашей формы.

Самый простой способ сделать это — зайти на свой веб-сайт, щелкнуть правой кнопкой мыши форму и выбрать «Проверить» . Здесь мы увидим HTML-шаблон формы в вашей дочерней теме.

Боковая панель инструментов разработчика Google выдвинется, и вы сможете просмотреть различные разделы кода для своей формы.

Самое главное — найти область, которую вы хотите настроить, и отслеживать идентификатор или имя класса . Вы будете использовать это, чтобы внести изменения.

Например, если бы мы хотели изменить цвет фона нашего шаблона формы «Свяжитесь с нами», мы бы нашли крайний фрагмент кода. В данном случае это div с класс api-form-box .

Мы даже можем проверить, как это будет выглядеть с этой консоли.

Если мы щелкнем правой кнопкой мыши div и выберем Add Attribute , мы сможем добавить стиль цвета фона.

Нажмите Enter, и изменения немедленно отобразятся в окне.

Но не волнуйтесь. Всякий раз, когда вы обновляете страницу, форма возвращается в нормальное состояние.

Затем войдите в панель администратора WordPress, чтобы внести необходимые изменения в код CSS.

Шаг 2: Измените CSS в панели администратора WordPress.

Теперь, когда вы приняли к сведению несколько вещей, которые хотите изменить в нашей форме, обратитесь к своему администратору WordPress, чтобы начать.

Затем на боковой панели WordPress выберите «Внешний вид» → «Настроить» → «Дополнительный CSS» , чтобы настроить форму.

Здесь вы можете ввести классы CSS для своей формы.

Например, мы решили кое-что изменить в нашей форме, поэтому вот код, который мы ввели:

Чтобы пометить класс , вы должны включить файл . перед именем класса. Для идентификатора вы ставите # .

Однако, если вы используете этот метод, мы рекомендуем узнать больше о правилах CSS, чтобы лучше понять ваши изменения.

Для нашего примера это будет выглядеть так:

• .api-form-box меняет цвет фона на голубой
• .frm-button-submit меняет фон кнопки отправки на желтый, а текст на черный.
• .frm-submit центрирует кнопку в форме

С этими изменениями наша форма будет выглядеть так:

Отсюда ваша сила безгранична. Вы можете настроить свою форму так, как вам нравится, если вы научитесь использовать CSS.

Однако у этого метода есть некоторые недостатки.

Обновление может нарушить дизайн вашей формы и заставить вас делать это снова. Не говоря уже о том, что это отнимает много времени. Если у вас несколько контактных форм, вам придется отредактировать HTML-код и добавить к каждой из них собственный CSS.

Но если вы хотите что-то более прямолинейное и нерушимое, рекомендуем проверить следующий способ.

Способ 2: используйте конструктор форм с визуальным стилем

Кодирование — это навык, который требует времени для изучения.

А у многих нет времени учиться. Если это вы, конструктор форм — ваш лучший вариант.

И мы рекомендуем Formidable Forms .

Это самый продвинутый плагин WordPress для создания форм, а это означает, что создание форм является простым и экономит время, что позволяет посвятить больше времени другим областям вашего веб-сайта.

Независимо от типа формы на вашем веб-сайте, Formidable справится со всем быстро.

Никакого кодирования, никаких хлопот — простое создание формы.

Есть и другие конструкторы форм на выбор (WPForms, Gravity Forms и другие), но они не предлагают возможности оформления, которые есть в Formidable. И это означает, что вы получаете больше власти над тем, как выглядит ваша форма.

Мы также рекомендуем ознакомиться с премиальными планами Formidable.

Хотя они не требуются для оформления вашей формы, вы получаете множество замечательных функций:

• Доступ к шаблонам оформления форм
• Возможность настроить фоновое изображение
• Дополнительные шаблоны форм для более быстрого запуска формы
• И многое другое

Итак, как только вы установите и активируете Formidable, вы будете готовы начать.

Получить Грозные формы сейчас!

Всего три простых шага, чтобы оформить форму и разместить ее на своем сайте:

1. Создать форму
2. Стиль формы
3. Показать форму

Шаг 1: Создайте форму

Чтобы стилизовать форму, вам нужна форма для стилизации, верно?

Итак, зайдите в свою админку WordPress и перейдите в Formidable → Forms → Add New .

Вы можете выбрать один из наших многочисленных готовых шаблонов (премиум-функция) или пустую форму , чтобы начать работу.

Затем дайте вашей форме имя и нажмите «Создать» .

Плагин перенесет вас в конструктор с функцией перетаскивания, где вы сможете легко редактировать свою форму.

Добавьте любые поля формы, которые вы хотите, настройте метки полей, измените тип ввода и многое другое из меню боковой панели.

Если вы создаете контактную форму, лучше всего добавить следующее:

• Текстовое поле для имени посетителя
• Электронная почта для связи с ними
• Абзац для сообщения, которое они хотят добавить

После настройки контактной формы нажмите «Обновить» , чтобы сохранить изменения.

Затем мы перейдем на вкладку «Стиль» .

Шаг 2. Стиль формы

На вкладке «Стиль» вы увидите несколько вариантов.

Вы можете выбрать один из наших готовых шаблонов дизайна, чтобы сэкономить время (премиум), или начать разрабатывать свой собственный.

Чтобы создать собственный стиль, нажмите на три точки рядом с «Грозным стилем» и нажмите «Изменить» . Грозный стиль — это стиль по умолчанию в Грозном.

Это приведет вас к нашему дизайнеру Formidable Style, где вы сможете настроить свою форму.

Вы можете изменить размер и цвет меток, полей ввода, размер шрифта и цвет фона и даже загрузить фоновое изображение!

Например, для тестового веб-сайта Cheap n' Cheesy мы разработали форму, отражающую бизнес:

Возможности безграничны для вас и вашей контактной формы!

Итак, нажмите «Обновить» , чтобы сохранить изменения после настройки формы.

Теперь нам просто нужно, чтобы это отображалось!

Шаг 3: Отобразите форму

Отобразить форму еще проще, чем создать ее.

Сначала перейдите к посту или странице, где вы хотите показать свою форму, и добавьте новый блок WordPress.

Затем найдите блок Formidable Forms , добавьте его и выберите свою форму в раскрывающемся меню.

Наконец, обновите свой пост или страницу, и ваша форма будет работать на вашей странице!

Мы говорили вам, что это было легко, как и все с Грозным.

Получить Грозные формы сейчас!

Готовы стилизовать контактные формы WordPress на своем сайте?

Возможность стилизовать контактные формы — это то, что вам нужно , а не нужно.

Вы можете увидеть поисковые запросы плагина Contact Form 7, связанные с их настройкой. Такие вещи, как контактная форма 7 CSS, тип ввода текста в WPCF7 или тип ввода электронной почты с WPCF7.

Ничего из этого не требуется с этими двумя методами. И этот пост научил вас, как настроить контактную форму в WordPress, чтобы ваша форма выглядела так, как вы хотите. Независимо от того, вводите ли вы пользовательский HTML, CSS и многое другое или используете Formidable Forms. Вы не будете разочарованы.

Итак, не ждите больше. Возьмите Formidable Forms и начните создавать свои формы!

И подпишитесь на нас в Facebook, Twitter и YouTube, чтобы узнать больше полезных советов и рекомендаций по форме!

Подробнее читайте в блоге Formidable

• Грозные формы 6.0! Шаблоны стилей, форма подтверждения и многое другое
  Читать далее

  Jotform против Typeform против Formidable Forms [Сравнение]
  Читать далее

  Как использовать контактную форму WordPress для перенаправления после отправки
  Читать далее

Знаете ли вы, что Formidable Forms — один из самых быстрых плагинов для создания форм WordPress, доступных сегодня? Если вы еще не используете его, начните с нашего бесплатного плагина или полнофункциональной профессиональной версии!