Как настроить контактную форму

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

Очень популярным способом создания контактной формы является плагин Contact Form 7 , практичный и простой в использовании инструмент, который часто бесплатно включается во многие темы WordPress и позволяет легко создавать все виды контактных форм . Этот плагин охватывает все технические аспекты создания контактной формы — для ее оформления вам потребуются дополнительные навыки или другой плагин.

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

Оставайтесь с нами, чтобы узнать больше о:

• Использование надстроек Qi для Elementor для стилизации ваших контактных форм
• Настройка стиля контактной формы

Использование надстроек Qi для Elementor для стилизации ваших контактных форм

Qi Addons for Elementor — это бесплатный многофункциональный плагин, который поставляется с 60 виджетами и включает виджет Contact Form 7 , специально созданный, чтобы помочь вам стилизовать ваши формы. Плагин не требует знаний в области кодирования , и буквально любой может использовать его с комфортом. Он не дает вам возможности создать контактную форму, но если вы используете плагин Contact Form 7, с помощью Qi вы сможете настроить и изменить дизайн своих форм таким образом, чтобы они идеально соответствовали стилю вашего веб-сайта.

Qi Addons для Elementor легко установить и настроить, и процедура практически такая же, как и для любого другого плагина.

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

Затем введите «Контактная форма 7» в поле поиска в левом меню, чтобы найти виджет «Контактная форма 7».

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

Форма, которую вы добавляете таким образом, — это форма, которую вы создали с помощью плагина Contact Form 7. Этот виджет создан только для того, чтобы помочь вам оформить форму, вы не можете создать форму с его помощью . Итак, теперь ваша контактная форма размещена там, где вы хотели, и вы можете увидеть настройки виджета Contact Form 7 в левом меню.

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

Настройка стиля контактной формы

Чтобы открыть параметры оформления формы, нажмите на вкладку «Стиль» .

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

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

Следующая опция относится к цвету этикетки .

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

Теперь, когда вы все настроили со стилем метки, следующие настройки относятся к стилю ввода .

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

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

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

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

Следующие настройки, о которых важно знать, — это настройки стиля кнопок .

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

Если вы хотите, чтобы стиль кнопки менялся при наведении, перейдите на вкладку «Активные» и настройте параметры — вы можете настроить цвет кнопки при наведении, цвет фона при наведении кнопки, цвет границы кнопки при наведении и т. д.

Если вы удовлетворены внешним видом контактной формы, теперь вы можете настроить интервалы, открыв настройки на вкладке «Стиль интервалов» . Здесь вы можете настроить интервал для каждого элемента контактной формы.

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

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

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

Вот как выглядит наша форма после того, как кто-то отправил сообщение:

И точно так же у вас есть элегантная контактная форма на вашей странице, готовая работать на вас.

Подведение итогов

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

Мы надеемся, что эта статья была полезной. Если вам понравилось, не стесняйтесь проверить некоторые из этих статей!

• Лучшие плагины кнопки «Нравится» для WordPress, которые стоит иметь
• 4 простых способа создания кнопок WordPress
• Советы по дизайну кнопок: как получить клики от посетителей