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.

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

 

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

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

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