DDR64.ru

Выделяем главное

Форма обратной связи для WordPress

Сегодня я расскажу о том, как создать форму обратной связи для WordPress, используя плагин Contact Form 7.

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

Установка плагина происходит стандартным способом: Плагины – Добавить новый, в поиск вбиваем Contact Form 7, устанавливаем и активируем.

Далее, у нас в административном меню появиться вкладка Contact Form 7. Зайдя в нее, вы увидите уже предустановленный шаблон формы. (рис. 1)

 

форма

 

Если вы вставите код, который генерирует Contact Form 7, в страницу сайта или записи

, то получите следующий вид (рис. 2)

 

форма_2

Внешний вид формы можно немного приукрасить, с помощью CSS. Например, так как это сделал я на своем сайте (рис. 3)

форма_3

В начале, изменим шаблон формы:

Здесь я весь шаблон добавил в блок <div> и назначал этому блоку класс «myforma» , также я добавил класс для кнопки «Отправить» class=»myforma_submit» , и выделил красным цветом «Введите проверочный код»style=»color:red;»

Далее, напишем стили в виде CSS, которые будут менять дизайн нашей формы:

border — устанавливаем цвет рамки поля, толщиною 1px:
border-radius — закругляем углы;
background — фон полей ввода;
width — ширина полей ввода, и кнопки Submit (Отправить)

На последнем этапе, вставляем стили, которые мы написали в файл стиле нашей формы. Файл расположен в /wp-content/plugins/contact-form-7/includes/css/styles.css. Добраться до этого файла можно, как через FTP, так и через админ панель сайта. Для этого заходим   Плагины — Установленные, ищем плагин Contact Form 7, и нажимаем «Изменить». Далее, с правой стороны, находим файл contact-form-7/includes/contact-form.php, и щелкаем по нему. Далее, в этом же месте ищем файл contact-form-7/includes/css/styles.css, и тоже щелкаем по нему. У нас откроется файл CSS, где мы, в начале файла вставляем наш код CSS.

Пример моей формы «Обратная связь»

 

Оценить статью
(Пока оценок нет)

Добавить комментарий

Войти с помощью: