Как изменить внешний вид формы contact form 7

Привет всем читателям моего блога. Сегодня я хочу поделиться о том, как происходит настройка внешнего вида contact form 7 на wordpress. Те, кто знаком с движком wordpress знают, что этот плагин надежный рабочий инструмент, с помощью которого можно внедрить на сайт форму обратной связи.

Плагин легко устанавливается и настраивается, но у него есть один небольшой недостаток – это его внешний вид. Он не уродлив, но его дизайн несколько простоват. Поэтому нам понадобится еще и настройка внешнего вида contact form 7, чтобы контактная форма выглядела привлекательней и современней.

Изменить внешний вид contact form 7 можно двумя способами. Первый – это поставить плагин contact form 7 skins. Это конструктор контактной формы, предлагающий 7 способов оформления внешнего вида плагина. Второй способ – это внедрить в contact form 7 готовые стили css.

Я решил идти вторым путем, поскольку не хочется устанавливать дополнительный плагин ради изменения внешнего вида формы обратной связи. Даже если вы не знаете html и css – не проблема, я предлагаю использовать уже готовые стили и код написанный другими.
Вот шаги, которые нам необходимо предпринять:

• создать шаблон страницы контактов
• скачать готовые стили css и html код
• установить плагин contact form 7
• создание кастомных полей с помощью плагина ACF
• убираем через фильтр лишние теги <p>, <br>, <span>
• настраиваем уведомление при отправке формы

Создаем шаблон страницы «Контакты»

Итак, идем в админку wordpress и создаем страницу Контакты. После смотрим на образовавшийся url и видим, что у него есть слаг contact. У меня стоит плагин cyr to lat для транслитерации кириллических символов в транслит и он сгенерировал именно такой слаг. Однако если вам он не нравится, можете сделать себе любой другой.

Далее идем в папку с вашей темой по пути wp-content > themes > vasha-tema и переименовываем файл шаблона page.php в page-contact.php. После того, как вы его переименовали, откройте этот файл в любом редакторе кода и удалите код, отвечающий за вывод содержимого страницы. Он находится между хуками, которые подключают область хедера и футера <?php get_header(); ?> и <?php get_footer(); ?>. Также удалите функцию <?php get_sidebar(); ?> поскольку эта страница будет на всю ширину экрана без боковой колонки. В итоге у вас должен остаться только такой код.

<?php
/**
 * The template for displaying all pages.
 *
 */
get_header(); ?>

<! - - Сюда вставим html код формы, шорткод contact form 7 и готовые стили css - - >

<?php get_footer(); ?>

Теперь вордпрес видит, что данный шаблон страницы относится только к странице контакты, и ни с какой другой страницей он работать не будет. Но если вам понадобиться подключить этот шаблон страницы также к другим страницам вордпресс, то вместо текста The template for displaying all pages, напишите Template name: Контакты. В админке выберите этот шаблон и сохраните. Тогда он будет работать и с другими страницами темы.

Contact form 7 готовые стили css

После того как мы создали шаблон страницы контакты, нам нужно самим написать или где-то скачать для плагина contact form 7 готовые стили css и html код формы. Я предлагаю взять код с бесплатного шаблона одностраничного сайта под названием Agenсy. Вот ссылка для скачивания https://startbootstrap.com/themes/agency/

Важно: чтобы данный код сработал, к вашей теме сайта должна быть подключена библиотека bootstrap. Большинство тем wordpress сделано с помощью сетки бутстрап, поэтому, вполне вероятно, что она у вас уже установлена. Если же ее нет, то возьмите минифицированный файл со стилями bootstrap.min.css в папке vendor шаблона agensy. Или скачайте его на официальном сайте. Загрузите его в папку со стилями вашей темы и подключите в файле functions.php. Заодно подключите файл с собственными стилями формы обратной связи custom.css с помощью этого кода.

/**
 * Enqueue bootstrap and custom styles in your theme.
 */

function your_theme_enqueue_bootstrap()  {  

wp_register_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css', array(), '1', 'all' );   
wp_register_style( 'custom-theme', get_template_directory_uri() . '/css/custom.css', array(), '1', 'all' ); 
   wp_enqueue_style( 'bootstrap' );   
   wp_enqueue_style( 'custom-theme' );       
} 
 
add_action( 'wp_enqueue_scripts', 'your_theme_enqueue_bootstrap' );

Проследите за тем, чтобы путь к файлу bootstrap.min.css был указан верно, в противном случае в contact form 7 готовые стили css работать не будут. Так же после подключения файла со стилями убедитесь, что стили с файла бутстрап не переопределили стили вашей темы.

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

Также если вы захотите чтобы у вас был такой же шрифт как в шаблоне формы, то подключите его в файле functions.php с помощью этой функции:

/**
 * Enqueue own fonts.
 */

wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css?family=Montserrat:400,700|Kaushan+Script|Droid+Serif:400,700,400italic,700italic|Roboto+Slab:400,100,300,700&subset=cyrillic');

Далее скачайте шаблон и скопируйте код со строки 407 по 450. Код на странице index.html хорошо прокомментирован, и нужную секцию можно увидеть без труда. Начинается она с комментария <! — Contact — >. Вставьте этот html код верстки в файл шаблона page-contact.php. Здесь мы видим заголовок с подзаголовком:

<h2 class="section-heading text-uppercase">Contact Us</h2>

<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>

Далее идет код самой формы. Обертка контактной формы это теги <div class=”row”></div><div class=”col-lg-12”></div>. Эти теги с классами, растягивающими контактную форму на всю ширину страницы. Оставшийся код, начиная с тега <form id=»contactForm» name=»sentMessage» novalidate=»novalidate»> и заканчивая закрывающим тегом </form>, нужно вырезать. Вставьте его пока в блокнот, чтобы он не потерялся. На данный момент у нас остается такой код в файле шаблона.

<?php
/**
 * The template for displaying all pages.
 *
 */

get_header(); ?>

<!-- Contact -->
  <section id="contact">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 text-center">
          <h2 class="section-heading text-uppercase">Contact Us</h2>
          <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12">
          <! - - Сюда вставим шорткод contact form 7 и готовые стили css - - >
        </div>
      </div>
    </div>
  </section>
<?php get_footer(); ?>

Установка плагина contact form 7 и создание своих полей

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

Из верстки контактной формы видно, что в ней есть три поля input для ввода имени пользователя, телефона, email, поле textarea для текста и кнопка «Отправить». Следовательно, нам нужно создать такие же поля, только в настройке формы contact form 7. В верстке есть тег <p class=»help-block text-danger»></p> под каждым полем и тег <div id=»success»></div>. Они не нужны, их необходимо удалить.

Важно. При создании полей в contact form 7 обратите внимание на css классы в тегах input, идентификаторы id и атрибуты полей которые есть в верстке шаблона. Вы должны их перенести и прописать в соответствующих полях при настройке формы:

• класс css = “form-control” во всех тегах input
• идентификатор id= “ ” в каждом поле свой – name, phone, email, message
• type =”” тип поля у каждого тега input свой (типы полей задаются кликом по соответствующей кнопке при выборе поля. Если вам нужно поле ввода для email адреса выбирайте кнопку email. Если вы зададите для всех инпутов поле text, то форма работать будет, но не будет происходить валидация полей. Так если пользователь введет текст вместо цифр в поле phone, то это не будет считаться ошибкой. В противном случае появится уведомление, о том что введен некорректный телефонный номер). В общем, выбирайте правильные поля для каждого поля ввода.
• placeholder – скопируйте содержимое placeholder в верстке и вставьте это содержимое в соответствующее поле. Образец заполнения на рисунке ниже.

Удаляйте все теги <label> для полей, которые генерирует форма по умолчанию. Делаем три поля с инпутами, одно поле для ввода сообщения и кнопку. Обертку для кнопки тег <button> я удалил и переопределил классы дефолтного тега формы <инпут type= submit>, назначив ему css классы кнопки <button>. Кнопка будет иметь такой же вид, но тег будет не <button>, а <input type= “submit”>. Вот классы кнопки:

#sendMessageButton {
    font-weight: 700;
    display: inline-block;
    font-size:18px;
	padding: 20px 40px;
    color: #fff;
    text-align: center;
    background-color: #fed136;
    border: 1px solid #fed136;
    line-height: 1.5;
    border-radius: .25rem;

Вставьте их в кастомайзер, во вкладку «Дополнительные стили css» или в файл со стилями вашей темы.

На рисунке ниже показаны отредактированные теги верстки с готовыми полями. Ниже я приложу архив с весткой формы и вы можете скопировать эти теги и вставить во вкладку «Шаблон формы» во время настройки контактной формы.

Из этого скриншота видно, что все поля формы контактной формы находятся в теге div с классом row <div class=”row”>. Он разделен на две части дивами с колонками по шесть штук в каждом. Кто знает бутстрап, тот поймет, что такая верстка содержит в себе главный ряд (12 колонок), который разделен на две части, в каждой из которых по 6 колонок <div class=”col-md-6”> Tакая разметка делит поля контактной формы на две части. В левой части находятся три поля с инпутами, а в правой textarea. Кнопка это тег input тип submit. Она находится в отдельном ряду и выровнена по центру. Ну и у каждого поля естественно свои классы. Вот и вся хитрость.

Вставляем шорткод контактной формы

Далее нам нужно вставить шорткод уже готовой контактной формы в файл шаблона для ее вывода во фронтэнде. Для этого используется специальная функция <?php echo do_shortcode(); ?> для вставки любых зарегистрированных шорткодов.

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

На фоне формы есть фоновое изображение и цвет. Оно прикрепляется через свойство background-image к тегу section. Хотелось бы изменять фон прямо в консоли водпресс, а не в файле со стилями. Так же я хочу, чтобы заголовки h2 и h3 можно было изменять в настройках страницы, а не в файле шаблона. В общем, не должно быть никакого хардкода.

Заключительные настроки нужно сделать с помощью custom fields, то есть произвольных полей записи. Плагин ACF (advanced custom fields) подойдет для этого лучше всего. С его помощью я сделаю кастомные поля для вывода заголовков и фоновой картинки.

Создание кастомных полей с помощью плагина Acf

Устанавливаем и активируем плагин ACF. Находим вкладку «Группы полей» и создаем группу для страницы «Контакты». Даем ей какое-нибудь название, например «Контакты». В настройках для отображения данной группы полей я указал, что ее необходимо показывать на странице шаблона «Контакты».

Здесь я сделал три поля:

1. Ярлык 1-го поля Заголовок, имя поля – (его slug) header, тип поля – текст
2. Ярлык 2-го Текст, имя поля – text, тип поля – текст
3. Ярлык 3-го Изображение, имя поля – image, тип поля – изображение.

Теперь переходим на страницу Контакты и заполняем созданные поля. В заголовок h2 вставляем текст «Contact Us». В подзаголовок h3 вставляем «рыбный» текст Lorem ipsum dolor sit amet consectetur. И фоновое изображение map-image.png находится в папке шаблона Agency. Загружаем его в медиа библиотеку и вставляем в третье поле.

Теперь содержание этих полей нужно вывести на экран. Сделаем это с помощью специальной php функции для вывода кастомных полей <?php get_post_meta(); ?>.

На примере для заголовка h2 вы можете увидеть, что я вставил функцию get_post_meta(); в переменную $fields и обратился к ее параметрам id и key. ID поста – 149 (номер id можно увидеть в строке браузера в админке), key – это название поля, которое нужно получить. Его слаг в данном случае это header и параметр true возвращает значение метаполя.

<h2 class="section-heading text-uppercase">

<?php $fields = get_post_meta( '149', 'header', true ); echo $fields; ?>

</h2>

<h3 class="section-subheading text-muted">

<?php $field = get_post_meta( '149', 'text', true ); echo $field; ?>

</h3>

Настраиваем динамический фон

Фоновое изображение я вставил благодаря функции <?php get_field(); ?> Сначала я присвоил переменной $image значение функции get_field(‘bg_img’); со слагом поля bg_img и с помощью css класса background-image вывел ее, обратившись к значению массива [url] таким образом:

<?php $image = get_field('bg_img'); ?>

<section id="contact" style="background-image: url(<?php echo $image['url']; ?>);">
</section>

Вот что у меня вышло.

Перейдите по этой ссылке и посмотрите реальный пример https://example.wp-oleg.in.ua/contact/ Согласитесь, что примененные к contact form 7 готовые стили css придают ей гораздо лучший вид, чем у дефолтной формы. Также здесь вы можете скачать файл шаблона page-contact.php контактной формы с css стилями и готовым кодом.

Убираем лишние генерируемые теги <p>,<br>, <span> в contact form 7

Плагин контакт форм 7 генерирует свои теги <span>, <p>, <br>. Если ваша форма не соответствует образцу показанному в шаблоне сайта, то выясните это просмотрев код формы в браузере с помощью инструментов для разработчика dev tools. Возможно, вы увидите эти лишние теги. Их можно убрать с помощью фильтра. В сети есть много решений этого вопроса стоит только загуглить «как убрать лишние генерируемые теги <p> и <br> в contact form 7» или «how to remove tag span contact form 7». Один из вариантов убрать лишние теги с contact form это, вставить этот код в файл functions.php. Он убирает теги <p>, <br> и <span>

/**
 * Remove tag <p> и <br>.
 */

define('WPCF7_AUTOP', false );

/**
 * Remove tag <span>.
 */

add_filter('wpcf7_form_elements', function($content) {

$content = preg_replace('/<(span).*?class="s*(?:.*s)?wpcf7-form-control-wrap(?:s[^"]+)?s*"[^>]*>(.*)</1>/i', '2', $content);

return $content;

});

Настройки уведомления при отправке формы

Так же в настройках уведомления при отправке формы, рекомендую использовать почтовый тег [Name]. Он будет выводить значение текстового поля Name вместе с уведомлением. Вставьте его в начало каждого поля. Например, так:

[Name], спасибо за Ваше сообщение. Оно успешно отправлено.

При удачной отправке письма, пользователь увидит свое имя и обращение к нему, например: «Вася, спасибо за Ваше сообщение. Оно успешно отправлено». Безусловно Васе будет приятно :-). Таким же образом вы можете отредактировать другие поля в настройках отправки формы, использовав другие почтовые теги, которые сгенерировала вам форма. Это теги [Email], [Phone], [Messege] и т.д.

Заключение

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

Contact Form 7 (CF7) is one of the most popular plugins available for WordPress. It allows users to quickly create customised forms, anywhere on a WordPress website.

While the forms are easy to create and implement, the fields within them are styled minimally – allowing them to blend in with most websites. The appearance of each CF7 form depends on the CSS styling applied to standard HTML form elements used in your current WordPress theme.

This article shows users, skilled at using HTML and CSS, how to style When you select a CF7 Skins Style the aesthetic design (CSS code) is automatically created and applied to your form. Contact Form 7 forms to their particular requirements.

Style Contact Form 7

Tl:dr (too long; didn’t read) version

1. The Form Process
2. Use Dev Tools to examine your CF7 form
3. Examine CSS in your current WordPress theme
4. Target CSS changes to CF7 forms only
5. Use CSS to change the appearance of your CF7 form

You will need to be skilled at using HTML and CSS to follow along in this article. If that description does not fit you, you can learn all you need to know about both HTML and CSS at http://www.w3schools.com/ and come back to this article when you’ve done that.

You will also need to be skilled at using Firebug or Chrome Dev Tools to examine the HTML and CSS of your CF7 form in detail to follow along in this article. If that description does not fit you, you can learn about Firebug or Chrome Dev Tools and come back to this article when you’ve done that.

Table of Contents

• Default Contact Form 7 Form
• The Form Process
• HTML
  • Standard HTML Form Elements
  • HTML code + CF7 Tags in CF7 Form area
  • Completed HTML code in CF7 Form
  • CSS classes & ids generated by CF7
  • Target CF7 classes & ids
  • Add CF7 classes & ids
• Use Dev Tools to examine your CF7 form
  • CF7 Form Structure
• CSS
  • Default CF7 CSS style
  • Examine CSS in your current WordPress theme
  • Use a Child Theme to make changes to your CF7 forms CSS
  • Target CSS changes to CF7 forms only
  • You made need higher CSS Specificity
  • Add CSS changes on individual CF7 form elements
  • Copy current CSS with your Dev Tool
  • Add CF7 classes & ids within your CF7 forms
  • Use CSS to change the appearance of your CF7 form
  • Targeting Specific CF7 Forms

Default Contact Form 7 Form

We use the default CF7 form (normally named “Contact form 1” & installed automatically on every install of the CF7 plugin) as the basis of this article.

The actual look of this default form on your WordPress website will depend on the current WordPress theme used on your website and the CSS styling that theme applies to standard HTML form elements.

In this case our website uses the The7 theme by Dream-Theme and the default Contact Form 7 form appears as follows:

Tip: The appearance of the default CF7 form on your WordPress website will depend on the current WordPress theme used and the CSS styling that theme applies to standard HTML form elements.

You may notice this form has a couple of styling issues:

1. The labels don’t really stand out
2. The Send button text is a little small.

In this article we’ll be demonstrating how to change the style of this form, using HTML and CSS, to meet particular requirements.

The Form Process

Forms are a common part of many websites and are a very powerful tool for interacting with users. They provide an easy way for visitors to your website to start a conversation with you about their particular requirements.

CF7 forms are based firmly on the more general HTML form process

While the CF7 plugin makes it quick and easy to create forms with little or no knowledge of HTML, Contact Form 7 forms are based firmly on the general HTML form process.

HTML includes a number of elements which are specifically designed for use in forms. The CF7 plugin provides support for most of the commonly used HTML form elements, including some recently added HTML5 elements.

Form appearance depends on the HTML form elements used and the CSS styling applied

The appearance of each CF7 form depends on the HTML form elements used

and the CSS styling applied to these elements in your current WordPress theme.

In any web form, the HTML provides the form content and layout (structure) of the form while the CSS controls the forms appearance and presentation (style).

HTML + CSS = FORM

HTML – form content and layout (structure)
CSS – form appearance and presentation (style).

HTML

The HTML in each CF7 form is created by the CF7 plugin based on information supplied by you in the Form section on the CF7 interface.

Any HTML elements added by you in the Form section on the CF7 interface are combined with HTML generated by the CF7 plugin.

HTML (supplied by you) + HTML (added by the CF7 plugin) = FORM Content & Layout (structure)

Standard HTML Form Elements

The default Contact Form 7 form uses label elements Label Content as the basis for the form.

While this is probably the simpliest way to create a form, it has a number of shortcomings, which we discuss in further articles – ( see Why we use Fieldset, Legend & Lists in CF7 Skins and Making your form easy to read by using Fieldsets ).

You can in fact use any HTML elements you want in the Form section on the CF7 interface and this is a key part of building CF7 forms that match your functional and appearance requirements.

With practice you can learn how to create increasingly complex CF7 forms by combining your HTML elements with those added automatically by the CF7 plugin.

HTML code + CF7 Tags in CF7 Form area

The box below shows the content of the Form section of the CF7 interface for the default CF7 form.

<label> Your Name (required)
     </label>

<label> Your Email (required)
    [email* your-email] </label>

<label> Subject
     </label>

<label> Your Message
    [textarea your-message] </label>

[submit "Send"]

As you examine this code you should notice that it includes:

• Standard HTML Elements – Your Name (required)
• CF7 Tags – [email* your-email]

The standard HTML Elements you add in this section are output largely unchanged by the CF7 plugin. CF7 then uses the CF7 Tags to create fully functioning standard HTML form elements which can include a number of additional HTML attributes.

If you are not sure how Contact Form 7 uses CF7 Tags you can read all about them at Contact For 7 Tag Syntax.

Completed HTML code in CF7 Form

The box below shows the complete HTML code generated on the actual website, based on information supplied by you in the Form section on the CF7 interface and the additional HTML code added by the CF7 plugin.

<div id="wpcf7-f235-p1192-o1" class="wpcf7"><form novalidate="novalidate"
  class="wpcf7-form" method="post" action="/example.com/styling-contact-form-7-forms/
  #wpcf7-f235-p1192-o1">
<div style="display: none;">
<input type="hidden" value="8" name="_wpcf7">
<input type="hidden" value="3.4.1" name="_wpcf7_version">
<input type="hidden" value="wpcf7-f235-p1192-o1" name="_wpcf7_unit_tag">
<input type="hidden" value="1cc9dc2c57" name="_wpnonce">
</div>
<p>Your Name (required)<br>
  <span class="wpcf7-form-control-wrap your-name">
  <input type="text" aria-required="true" class="wpcf7-form-control
  wpcf7-text wpcf7-validates-as-required" size="40" value="" name="your-name"></span> </p>
<p>Your Email (required)<br>
  <span class="wpcf7-form-control-wrap your-email">
  <input type="email" aria-required="true" class="wpcf7-form-control
  wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email"
  size="40" value="" name="your-email"></span> </p>
<p>Subject<br>
  <span class="wpcf7-form-control-wrap your-subject">
  <input type="text" class="wpcf7-form-control wpcf7-text"
   size="40" value="" name="your-subject"></span> </p>
<p>Your Message<br>
  <span class="wpcf7-form-control-wrap your-message">
  <textarea class="wpcf7-form-control wpcf7-textarea"
   rows="10" cols="40" name="your-message"></textarea></span> </p>
<p><input type="submit" class="wpcf7-form-control wpcf7-submit"
  value="Send"><img class="ajax-loader" src="http://buzztone.com.au/wp-content/plugins
 /contact-form-7/images/ajax-loader.gif" alt="Ajax loader sending..." style="visibility: hidden;"></p>
<div class="wpcf7-response-output wpcf7-display-none"></div>
</form>
</div>

Take a moment to compare these two bits of code and notice where the information from the form section of the CF7 interface has made it into the HTML on the actual website.

Tip: If you unable to understand easily what is going on in the code included in these two boxes, you probably don’t have adequate skills to change the style of CF7 forms, without at least some external support or advice.

In that case you should continue to learn what you need to know about both HTML and CSS at http://www.w3schools.com/ and come back to this article when you’ve done that.

CSS classes & ids generated by CF7

You may notice that Contact Form 7 adds a number of CSS classes & ids to the individual HTML form elements – for example:

• <div> id=”wpcf7-f8-p275-o1″ class=”wpcf7″ > … <div> – for the complete form which is given a unique id
• <span> class=”wpcf7-form-control-wrap your-name”> … </span> – inline element which wraps each text field

These are added, by the plugin author, to allow users skilled at using HTML and CSS, to style their CF7 forms to their particular requirements.

Target CF7 classes & ids

The list of available classes that can be targeted within CF7 forms include:

• .wpcf7
• .wpcf7-form
• .wpcf7-form-control
• .wpcf7 input
• .wpcf7 input[type=”text”]
• .wpcf7 input[type=”email”]
• .wpcf7 input[type=”checkbox”]
• .wpcf7 textarea
• .wpcf7 select
• .wpcf7 select option
• .wpcf7 select option:hover
• .wpcf7 p

It makes sense to target these individual CSS classes available within your CF7 forms.

WordPress theme developers also can use these CSS classes & ids to build support for the CF7 plugin within their theme. As CF7 is one of the most popular plugins in WordPress, it makes sense for theme developers to do this.

Add CF7 classes & ids

You can also give your HTML form elements individual classes & ids within the CF7 tags in the Form section of the CF7 interface. This can be very useful when you have number of elements you want to style the same way.

At this point you should use Firebug or Chrome Dev Tools to examine the HTML and CSS of your CF7 form in detail.

Use one of these tools to explore all the HTML form elements in your CF7 form and see how each element is being styled in detail by the CSS in your current WordPress theme.

In particular take note of the various style sheets that are contributing to the final style used and how individual style elements are being overwritten (or not) by the CSS hierarchy.

Once you understand how the HTML and CSS is configured in your CF7 form, you can begin to plan the CSS changes you need to change the appearance of the form to suit your requirements.

You will need to be skilled at using Firebug or Chrome Dev Tools to examine the HTML and CSS of your CF7 form in detail to follow along in this article.

If that description does not fit you, you can learn about Firebug or Chrome Dev Tools and come back to this article when you’ve done that..

CF7 Form Structure

We used Firebug to produce the following diagram which shows the overall structure if the default CF7 form we are using in this article.

The diagram shows how each element of the form is created using standard HTML form elements and how those elements are arranged in relation to each other.

With experience, using Firebug or Chrome Dev Tools should give you all the information you need to change the style of your CF7 forms quickly and easily, but it may definitely help you initially to produce a hand drawn paper sketch similar to this diagram.

CSS

Default CF7 CSS style

There is a common misconception that the CF7 plugin controls the appearance of CF7 forms though the plugins CSS style sheets.

In truth the Contact Form 7 plugin uses only very minimal CSS styling to allow CF7 forms to blend in with most websites. For a listing of complete style sheet used by the CF7 plugin see Default CF7 CSS style.

The appearance of CF7 forms on your website will depend largely on the current WordPress theme used and the CSS styling that theme applies to standard HTML form elements.

Examine CSS in your current WordPress theme

The actual look of CF7 forms on your website will depend largely on the current WordPress theme used and the CSS styling that theme applies to standard HTML form elements.

To change the appearance of your CF7 forms to suit your requirements, you will need to:

1. Understand what CSS styling is being applied to standard HTML form elements in your CF7 form
2. Adjust the CSS used by your current theme for these HTML form elements.

Your current theme may not do a good job of styling forms

For some reason many WordPress themes do not provide CSS styling for standard HTML form elements. We regard this as poor practice and always look closely at how a theme styles standard HTML form elements when selecting themes.

Importantly if your theme neglects to provide appropriate CSS for these standard HTML form elements then the appearance of your form will fall back to that provided by default by the browser – which can be different in different browsers.

Use a Child Theme to make changes to your CF7 forms CSS

The most common and preferred method to makes changes to CF7 form styling is to create a Child Theme.

Make any necessary additions to the CSS in the child themes style.css only, rather than directly in the themes styles.css. That way you don’t lose your changes when you update the theme.

The style.css file of the child theme usually imports all styling from the parent theme by including the following CSS code at the top of the child theme’s style.css file.

/* Import Parent Theme */
@import url('../twentyeleven/style.css');

Any CSS changes that alter the appearance of our CF7 forms are added below this. Due to the CSS loading heirachy, any CSS changes made here will overwrite styles previously set in the parent theme.

Alternatively you could use a custom CSS plugin to make your CSS changes.

Target CSS changes to CF7 forms only

When making CSS changes you want to make sure that your CSS changes don’t inadvertantly effect other elements on your website.

The preferred way to do this is to use CSS inheritance to target the relevant HTML elements within your CF7 forms only.

For CF7 forms we have several ids & classes which can be used to give the necessary targeted inheritance including:

• .wpcf7
• .wpcf7-form
• .wpcf7-form-control

For example we can use the class .wpcf7-form to change the appearance of all HTML input text elements within CF7 forms only:

.wpcf7-form input[type="text"] {
	background: #fff;
	border: 1px solid #bbb;
	color: #4F4F4F;
}

Use CSS inheritance to ensure that your CSS changes don’t inadvertently affect other elements on your website.

You made need higher CSS Specificity

Depending on how your theme styles standard HTML form elements in general, and CF7 form elements in particular, you may need to add extra CSS specificity to get your CSS changes showing.

For example we can use an extra the CF7 class to give higher CSS Specificity:

.wpcf7 .wpcf7-form input[type="text"] {
	background: #fff;
	border: 1px solid #bbb;
	color: #4F4F4F;
}

For WordPress themes with high levels of unnecessary CSS specificity, you may need to target the #id of specfic CF7 forms as explained in Styling a Specific Contact Form 7 Form.

Add CSS changes on individual CF7 form elements

You can add additional CSS styling to any CF7 form elements you want to modify.

The list of common elements that can be targeted within CF7 forms include:

• .wpcf7 input
• .wpcf7 input[type=”text”]
• .wpcf7 input[type=”email”]
• .wpcf7 input[type=”checkbox”]
• .wpcf7 textarea
• .wpcf7 select
• .wpcf7 select option
• .wpcf7 select option:hover
• .wpcf7 p

You can use Firebug or Chrome Dev Tools to explore the full range of ids & classes used by Contact Form 7.

For example to change the background colour of the Send button when the mouse pointer hovers over the button:

.wpcf7 input[type="submit"]:hover {
	background:#4f2a0f;
	cursor:pointer;
	color:#fff;
}

There are some CF7 classes available which you might want to use to target a specific CF7 Tag on all CF7 forms on your site.

• .wpcf7-text
• .wpcf7-email
• .wpcf7-textarea
• .wpcf7-submit

Copy current CSS with your Dev Tool

Often you can copy the CSS currently used on the element from within your Dev Tool

and then add alternative values for the properties you want to change.

Add CF7 classes & ids within your CF7 forms

You can also add id and class attributes to a CF7 form by adding html_id and html_class attributes into a CF7 shortcode. This can be used to target individual forms via the html_id attribute or a number of forms using the html_class attribute.

HTML:
[ contact-form-7 id=”1511″ html_class=”cf7-psForm” title=”Personal Service Form” ]

CSS:

.wpcf7 .cf7-psForm {
    background: none repeat scroll 0 0 #fff;
    border: 1px solid #9ffffe;
    padding: 20px;
}

Use CSS to change the appearance of your CF7 form

Using the techniques described in this article, we can use the following CSS to change the appearance of the default CF7 form.

.wpcf7-form {
	background: #dcc8a5;
	padding: 10px 20px;
	border: 2px solid #f6efdf;
	border-radius: 7px;
	width: 300px;
}
 
.wpcf7-form p {
	color: #4f2a0f;
	margin-bottom: 5px;
}
 
.wpcf7-form input,
.wpcf7-form textarea {
	background: #f6efdf;
	padding: 5px 7px;
	margin: 4px 0 8px 0;
	border: 3px solid #ccb58c;
	color: #4f4f4f;
	border-radius: 7px;
}
 
.wpcf7-form .wpcf7-submit {
	background: #4f2a0f;
	padding: 5px 15px;
	color: #fff;
	min-width: 100px;
}
 
.wpcf7-form input[type="submit"]:hover {
 	background: #000;
}

Using the changed CSS given above, the default CF7 form now looks as shown below.

As practice you can use Firebug or Chrome Dev Tools to see how we’ve styled this form.

Targeting Specific CF7 Forms

Each CF7 form has a unique id which can be targeted in your CSS changes – see Styling a Specific Contact Form 7 Form for detailed instructions on how to do this.

Contact Form 7 Styling Troubleshooter

If you would like some help from our support staff & are willing to help us by providing information on your use of Contact Form 7 & CF7 Skins, you should complete the following form:

This form is made with CF7 Skins + CF7 Skins Pro + CF7 Skins Ready + CF7 Skins Multi + CF7 Skins Logic

Still have questions?

If you still have questions, after reading and working through the information provided in this article, you should ask your question in the CF7 support forum.

Please include:

• a link to your Contact Form 7 form plus
• all your input in the Form & Mail sections of the CF7 interface.

This helps others to understand your actual problem and offer a possible solution.

Tip: Make sure you create a separate post for your question as per the WordPress Forum Guidelines.

This page is still a Work in Progress

This article was created from questions asked in the CF7 support forum related to this issue. We add more information as we become aware of other issues and solutions.

If you have something you think might help others on this issue, you can use the CF7 form below to contact us.

Please note that anything that looks like a request for support or help will probably be ignored.

This form is made using CF7 Skins – you can use Firebug or Chrome Dev Tools to see how we’ve built it.

Приветствую вас, уважаемый читатель! Сегодня я покажу вам,  как создать форму обратной связи с автором сайта/блога в ВордПресс, при помощи популярного плагина Contact Form 7 (более 5 млн. установок). В пост включено: правильная настройка Contact Form 7, защита от спама, как изменить и настроить внешний вид формы. А также указал на основные причины — почему не работает и не отправляет письма контактная форма.

Контактная форма является важным средством для поддержки связи со своими читателями и наоборот. Чиркнуть личное письмецо, сделать предложение автору (от которого он не сможет отказаться), задать вопрос, отправить какой нибудь файл и многое другое. Все это возьмет на себя и не разгласит посторонним ценную информацию, наша контактная форма WordPress Contact Form 7. Вот, как то, так. Написал так написал, самому аж понравилось.

Не буду вас утомлять, уважаемый читатель, всякой писаниной — перейдем к делу. Установка и правильная настройка модуля для ВордПресс — контактная форма 7.

Ещё один плагин контактных форм. Простой, но гибкий.

Contact Form 7 может управлять многочисленными контактными формами, где вы можете гибко настраивать содержимое форм и почты с достаточно простой разметкой. Формы имеют встроенную поддержку Ajax отправки, CAPTCHA, спам фильтра Akismet и не только.

Все манипуляции производим в админке ВордПресс. Для того, чтобы установить плагинчик, в разделе «Плагины» нажимаем «Добавить новый». Вводим в окошко «Поиска» Contact Form 7. Естественно он отобразится первым. Кликаем кнопку «Установить:

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

Contact form 7 настройка

Находим в панели управления появившийся новый раздел «Contact Form 7» — пункт «Контактные формы». На данной странице у вас уже будет готовая по умолчанию форма контактов. С номером 1.

Из картинки видно, что по умолчанию представлена стандартный вариант формы для связи и готовый шорткод для вставки на новую страницу, запись или на боковую панель (через текстовый виджет). Contact form 7 внешний вид по умолчанию, установленная на отдельной странице сайта:

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

Откроется страница «Редактировать контактную форму». Плагин на русском языке и поэтому вам разобраться что к чему, будет очень легко. Вкладка «Шаблон формы». Вы можете изменить шаблон формы под свои нужды.

Например, чтобы добавить в шаблон формы тег поле для загрузки файла, нужно: Отметить мышкой место для вставки тега (лучше всего после сообщения) и нажать соответствующею вкладку «файл». С помощью этой функции вы можете разрешить пользователям загружать свои файлы через вашу форму, а затем вам будет отправлено электронное письмо с вложениями файлов:

Откроется окно — Генератор тега формы: файл:

Контактная форма 7 применяет ограничения по умолчанию для типа файла и размера файла. Когда вы не устанавливаете свои параметры, то по умолчанию расширения файлов являются: jpg, jpeg, png, gif, pdf, doc, docx, ppt, pptx, odt, avi, m4a, mov, mp3, mp4, mpg, wav, wmv. А допустимый размер файла составляет 1 МБ (1048576 байт). Жмём кнопочку «Вставить тег»:

Где отметили курсором мышки там и появится дополнительный тег. Если вставился не в том месте, то просто копируете его и помещаете в нужное. Таким же способом добавьте нужные теги в вашу форму. Обязательно после добавления дополнительных тегов нажимайте синею кнопку «Сохранить». А вот так, будет выглядеть кнопка для прикрепления файла к письму, после поля сообщения:

Если всё правильно делаете, то проблем с дополнительными полями, у вас не будет.

Ещё проверьте вкладки Письмо, Уведомления при отправке формы и Дополнительные настройки. По моему там и менять ничего не надо. Если только в Дополнительных настройках можно указать параметр — только для подписчиков — subscribers_only: true. Для подробной информации будет ссылка на страницу настроек дополнительных параметров.

А теперь, друзья, нам нужно подготовленную контактную форму разместить на отдельную, новую страницу или боковую панель веб-ресурса. Делается это легко.

Размещаем контактную форму на отдельной странице сайта/блога

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

После этого, создайте новую страницу — раздел Страницы — Добавить новую. Вписываем название страницы, например «Контакты». Переключаем редактор сообщений в режим «Текст» и вставляем шорткод в поле сообщений:

Если у вас новая страница автоматически добавляется в меню, то выставляем «Порядок» 1, 2 или 3 (какая по счету в меню, будет отображаться страница Контакт). Нажимаем кнопку «Опубликовать». Всё. Готово.

Так же вы можете добавить страницу в меню вручную. Теперь у вас установлена форма для связи с автором блога/сайта.

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

Получаете спам через Contact Form 7?

Есть защита. Спамеры затрагивают всё, ваши контактные формы не являются исключением. Прежде чем вас заспамят, защитите ваши контактные формы с помощью мощных анти-спам функций Contact Form 7.

Contact Form 7 поддерживает фильтрацию спама с Akismet. Интеллектуальная reCAPTCHA блокирует раздражающих спам ботов. Используя черный список комментариев вы можете также блокировать сообщения, содержащие определенные ключевые слова или отправляемые с определённых IP адресов.

Сервис Google reCAPTCHA защищает вас от спама и других видов автоматического злоупотребления. С модулем интеграции reCAPTCHA в Контактную форму 7 вы можете заблокировать форму отправку спам-ботами.

Интеграция Google reCAPTCHA v3 в Contact Form 7: защита от спама

reCAPTCHA v3 проверяет запросы с оценкой и дает вам возможность предпринимать действия в контексте вашего сайта.

Нажмите пункт «Интеграция». Вы увидите поле под названием reCAPTCHA:

Клик Настройки интеграции, а после перейдите по ссылке, чтобы получить ключи ReCaptcha API:

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

reCAPTCHA — это сервис Google, поэтому для его использования вам необходим аккаунт Google.

Войдите в Google, используя учетную запись, и перейдите по ссылке https://www.google.com/recaptcha/admin. Вы увидите простую регистрационную форм:

Укажите название (Ярлык). Выберите reCAPTCHA v3 (для работы reCAPTCHA v3 не нужен виджет CAPTCHA (флажок «Я не робот», используемый в reCAPTCHA v2)) и введите домен сайта в поле Домены. Примите Условия использования reCAPTCHA и нажмите кнопку Отправить.

После регистрации сайта вы получите ключ сайта и секретный ключ:

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

Если вы решите установить Contact Form 7, то я советую дополнительно к нему установить аддон Contact Form 7 Style. Он позволит вам редактировать внешний вид вашей формы. Вы сможете не только выбрать один из готовых шаблонов, но и создать свой собственный уникальный дизайн. Хотите изменить внешний вид? Тогда продолжение специально для вас, ценителей красоты.

Внешний вид контактной формы — Contact Form 7 Style

Плагин Contact Form 7 Style — это аддон для Contact Form 7, который необходимо установить на вашем сайте WordPress. Поддерживает пользовательские стили, которыми можно легко управлять через панель администратора. Также есть предопределенные шаблоны которые можно активировать в настройках контактной форме 7. В настройках основного плагина появится новая вкладка — Contact Form 7 Style Template. Настройка внешнего вида:

Пример, я изменил стандартный внешний на такой симпатичный:

Не забывайте, что можно задать свои, пользовательские параметры стиля:

И в заключение:

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

Почему не работает (не отправляет письма) Contact Form 7?

1. Проблемы вашего хостинга. Важно отметить, что отправка и получение электронных писем в значительной степени зависит от сервера, на котором размещен ваш сайт WordPress;
2. Убедитесь, что используется правильный обратный электронный адрес;
3. Ваше письмо может рассматриваться как спам;
4. Плагины или тема конфликтует с Contact Form 7;
5. Конфликты Javascript.

Если вы не можете отправлять электронные письма из этого плагина, вполне вероятно, что вы не можете отправлять электронные письма из WordPress в целом. В случае чего, господа, получить на часто задаваемые вопросы по работе плагина вы можете на странице https://contactform7.com/faq/.

Или на форуме поддержки https://wordpress.org/support/plugin/contact-form-7/. Английский язык не беда, с переводом любимого браузера будет всё понятно.

На этом у меня всё. Вроде, ни чего не забыл. Всего доброго. Удачи, друзья.

P.S. Оказывается на редактирование старых постов (информация для читателей должна быть актуальной всегда) уходит столько же времени, как на написание новой инструкции. Ужас!

Плагин Contact form 7 мы обсудили в предыдущей статье. Но не затронули тему изменения внешнего вида самой формы. Именно этот вопрос мы сегодня и попробуем решить.

Начнем с использования специально созданного для Contact form 7 плагина.

Contact Form 7 Style

Этот плагин находится в библиотеке WordPress. Просто введите его название или просто название плагина контактной формы и он будет выложен на первой странице. Активируем его.

Теперь при редакции новой формы, к четырем вкладкам настроек, добавляется пятая, которая так и называется “Contact Form 7 Style шаблоны”

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

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

Теперь пройдемся по настройкам самого плагина. Вы их найдете в левом меню консоли блога.

All Styles – Все стили

В этой опции показаны все стили в виде списка. Если нажать под стилем формы на ссылку “Свойства”, то откроются настройки всех созданных вами форм в плагине Contact form 7. Каждая будет обозначена чек боксом. Установив напротив выбранной формы галочку, вы не заходя в настройке присваиваете ей вид того стиля, который выбрали. Или наоборот – убираете раннее выбранный. Очень удобно.

Add new – Добавить новую

Это страница конструктора формы. Первое что необходимо сделать – дать ей название. Здесь же – предварительный просмотр и возможность ее публикации или сохранения.

Можно не создавать новую форму, а выбрать ту, которая уже создана, но у вас появилось желание изменить ее внешний вид. Просто делаете выбор в окне ниже. Нажав на красную клавишу – предварительно просмотра, отправляете ее в соответствующее окно. Вторая клавиша – отправка изменения и сохранения в плагине Contact form 7.

Здесь же есть очень большой выбор дополнительных шрифтов.

Теперь самое интересное – работа с настройками формы. Здесь все очень просто – выбираете кнопку соответствующей настройки – настройки самой формы (ширина, длина, цвет), натройка кнопки, текстового поля, радиокнопок и т.д. И работаете с ними. Если возникают вопросы – просто переведите текст.

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

После завершения работы – сохраните стиль формы.

CSS Editor – Настройки CSS

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

Setting – Настройки плагина

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

System Status – Обратная связь с поддержкой плагина.

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

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

Как всегда, предлагаю Вам свою рассылку – “Инструменты в помощь начинающему блогеру”. Подписавшись на которую, будете получать всю последнюю информацию о настройках блога

Ну что же, удачной Вам работы! Будут вопросы или пожелания, пишите в комментариях. Если информация была для Вас полезной – делитесь ей со своими друзьями в социальных сетях