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. Пример моей формы «Обратная связь»   Поделиться
Оценить статью
(Пока оценок нет)

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

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

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