Contact form 7 style


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

Contact Form 7 использует минимальный CSS для стилизации. Следовательно, не хватает лучшего дизайна пользовательского интерфейса. Мы можем преодолеть эту проблему, немного добавив и переопределив CSS стили проверки ввода данных и уведомлений об отправке или ошибки формы.

Contact Form 7 стили валидации по дефолту
Contact Form 7 стили валидации по дефолту

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

Стили валидации плагина Contact Form 7 WordPress

Собственно вот и сами стили валидации формы CF 7

 

span .wpcf7-not-valid { border: 1px solid #ff0000 !important; } span.wpcf7-not-valid-tip { font-size: .8rem !important; } div.wpcf7-validation-errors { background: #f8d7da; border: 1px solid #f5c6cb; color: #721c24; } div.wpcf7-response-output { margin: 2em 0; padding: 10px; border-radius: 4px; font-size: .8rem; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .wpcf7-mail-sent-ok { background: #d4edda; border: 1px solid #c3e6cb !important; color: #155724; }

Пояснения по коду валидации Contact Form 7

  • span.wpcf7-not-valid-tip — Подписи под полями формы. Обычно пишется «Поле обязательно для заполнения.»;
  • span .wpcf7-not-valid — Рамки обязательных для заполнения полей. После изменений окрашиваются в красный цвет;
  • wpcf7-response-output — Блок с сообщением под формой. Актуален как для ошибки в заполнении формы, так и для сообщения об успешной отправке формы;
  • div.wpcf7-validation-errors — Блок с сообщением об ошибке отправки формы;
  • .wpcf7-mail-sent-ok — Блок с сообщением об успешной отправке формы.

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

    Contact Form 7 стили валидации после изменений
    Contact Form 7 стили валидации после изменений

    Если нужно убрать надписи «Поле обязательно для заполнения.», в коде замените:

    span.wpcf7-not-valid-tip {   font-size: .8rem !important;  }  /*Замените на*/  span.wpcf7-not-valid-tip {   display: none !important;  }

    Плагин Contact Form 7 Style для изменения стилей CF 7 WordPress

    Если же вы хотите поменять всю стилизацию Contact Form 7 плагина, но не хотите или не знаете как это сделать кодом, советую попробовать использовать неплохой плагин Contact Form 7 Style, с помощью которого стили меняются из админки.

    Отключаем дефолтные стили Contact Form 7

    Иногда стоит полностью отключить дефолтные стили контактной формы. Во-первых, вы избавитесь от лишнего запроса на сервер и подгрузки стилевого файла Contact Form 7, во-вторых, ваши собственные стили формы не будут перебиваться стилями плагина (не нужно применять !important).

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

    // Отключаем дефолтные стили Contact Form 7  function remove_default_stylesheet() {  	wp_deregister_style( 'contact-form-7' );  }  add_action( 'wp_enqueue_scripts', 'remove_default_stylesheet', 20 );  
    

    svsites.ru


    mediadoma.com

    Куда вносить изменения?

    Перед тем как править стили нужно определиться куда вносить изменения.

    Мы можем прописать новые стили прямо в файл стилей плагина, но после обновления этот файл заменится и Ваша работа пойдёт коту … ну вы сами знаете куда.

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

    Первый вариант стиля для Contact Form 7

    Для этого варианта нам не нужно будет ничего менять в самой форме, достаточно будет просто приписать стили в файл style.css вашей темы.

    Для тех кто не помнит в какой папке он лежит вот путь:

    Для того чтобы получить такой результат как на картинке выше приписываем в самом конце файла style.css следующие стили:


    Вы можете изменить цвет фона на свой.
    Делается этот вот здесь

    Обратите внимание на правило !important — оно должно быть здесь обязательно иначе ваш цвет перебьют стили, которые прописаны в самом плагине. При помощи этого правила мы повышаем приоритет указанного стиля.
    Вы также можете поставить на фон формы изображение или градиент.
    Для того чтобы поставить изображение замените эту строку на следующую:

    При этом не забудьте загрузить изображение фона в папку images вашей темы.

    Вот пример с фоном.

    Для градиента замените эту строку на следующую:

    Здесь первое значение цвета это верхний цвет, второе это нижний и в конце задаётся однотонный фон на случай если браузер не поддерживает свойство linear-gradient.
    Вот как выглядит этот градиент:

    Для того чтобы при активации полей они подсвечивались мы приписали следующие стили:

    Второй вариант стилизации Contact Form7

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

    Далее удаляем тот код что там есть и вставляем следующий:

    После добавления кода не забываем сохранить изменения. Теперь в файл стилей дописываем:

    Я внесла код комментарии где можно поменять фон и т.д.

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

    Третий вариант стилей для Contact Form7


    Теперь давайте рассмотрим ещё один вариант оформления стилей для Contact Form7 c использованием подписи полей внутри самого поля (placeholder)
    Для этого открываем нашу форму для редактирования и удаляем все поля кроме кнопки отправки сообщения.
    Далее добавляем 2 поля типа «text» при этом в поле «Значение по умолчанию» введём Значение нашего поля, например, «Ваше имя»

    И сразу под этим полем нужно поставить галочку «Use this text as the placeholder of the field»
    Если нужно чтобы поле было обязательным для заполнения то ставим галочку возле «Required field»
    После этого нужно не забыть перейти на вкладку «Письмо» и подставить значения новых полей в письмо, которое будет приходить администратору.
    В моём случае это выглядит так:

    У вас будут другие значения шоткодов.
    Для того чтобы придать этой форме более аккуратный вид допишем следующие стили:

    Стили для вывода сообщений

    Ещё один момент это вывод сообщений об ошибках и отправке сообщения.
    Для того чтобы стилизовать их нам понадобятся классы «wpcf7-not-valid» для задания стилей тексту, который выводится под полем формы и «wpcf7-response-output» — отвечает за стиль сообщений внизу формы.
    Я добавила красную рамку для неправильно заполненных или пустых полей а так же тень и закруглённые углы для выводящихся сообщений. Вы можете дописать в эти классы всё на что хватит вашей фантазии.

    Вот результат:

    Видеоинструкция


    На этом у меня всё. Надеюсь что смысл дописания своих стилей Вам понятен. Желаю вам удачи в подгонке стилей под дизайн вашего сайта и терпения. Уверена что у вас всё получится.
    Если что пишите в комментарии. Всегда рада на них ответить.

    С уважением Юлия Гусарь

    impuls-web.ru

    • The best plugin for contact form 7. It helps a lot, and save so much time. I love it. And the support is very awesome, very fast response! Thank you!

      xoo-design, May 24th, 2016

    • Great to adjust your CForms to your general design. Very flexible and easy to use. Thanks for something like this.

      Dandelium, May 25th, 2016

    • Easy way to get your contact form new look. Thumbs up!

      TiinaL, October 23th, 2016


    • I had so many problems with Contact Forms and trying to find something that worked for me, I literally spent hours trying to find the best plugin for the job. This one by far worked best for me and I was able to style my form to look exactly how I wanted, which was a nice clean, simple style. Highly recommend checking this plugin out if you want to customize your form to look exactly how you want.

      cleslie577, January 20th, 2017

    • Incrementally changing CSS and reloading pages is time-consuming. This plugin saves a ton of time in getting just the look you want. Very responsive support for any issue, bravo!

      gregsh303, March 10th, 2017

    • The most difficult part of using a plugin when you are new to WordPress is the lack of clear, simplified explanations in the documentation, presented in a way that someone who is new can understand and implement. That is not a problem with the support for this plugin. As a new user I have found all the support provided by the creators of this plugin to be above average. When I had questions about something, they were answered, in the forum of the plugin. That is a refreshing throwback to a time when people took pride in what they created and stood behind it all the way. On top of that level of support, this plugin solves an issue that the original plugin was not designed to solve, that issue being incorporating css into the plugin to make it unique, in an easy to use menu based format. Definitely a winner that deserves a 5 star rating.

      will2016, April 12th, 2017

    • By Reichlich, May 14, 2016

    • New update is great. It really takes care of every aspect of a contact form styling. You can easily style your contact form, create as many templates as you want. it works with multiple contact forms on the same page, has a css editor as well. I am pleased with the update and recommend anyone to use it.

      By istvan_r9, May 13, 2016 for WP 4.5.2

    • Great plugin with many options!

      By malaka13, December 11, 2015 for WP 4.4

    • By ALG60, May 5, 2015 for WP 4.2.1

    cf7style.com

    Are you struggling to add your own CSS style to the Contact Form 7 in WordPress? Hopefully, this little tutorial will sort you out!

    A long while back I wrote a detailed tutorial post showing how to add some custom CSS to your Gravity forms and buttons.

    You can view that post here if you are using Gravity Forms on your WordPress website.

    A bunch of my lovely readers emailed me to ask if I could write a similar tutorial post for doing the same with the Contact Form 7 forms, so, here it is.

    If you need to install the Contact Form 7 plugin you can find it here.

    Once you have this plugin activated you can begin to create and customize your forms accordingly.

    After you have created your forms, don’t forget you will need to paste the ‘shortcode’ for each form into whichever page you’d like the forms to appear.

    For this tutorial, we’ll just assume that you have the shortcode embedded into your Contact page.

    Right, let’s get to it.

    Where to add custom CSS to Contact Form 7 in your website

    Before we get started, I want to be clear about where you should add your CSS code for the forms.

    The CSS snippets below can be placed in your theme’s style.css file most of the time, unless you are using a child theme, in which case the code will have to be placed inside your child theme’s style.css file, not the parent theme.

    For example –

    If you’re using a Genesis Child Theme, you can simply go to Appearance > Editor > Stylesheet (style.css) for the child theme you’re using. See image below.

    If you’re using a Thrive Theme, you can go direclt to Thrive Dashboard > Theme Options > Style & Layout Settings and use the Custom CSS box provided.

    Contact form 7 style

    Now let’s go back to embedding the shortcode. Again, this can be placed anywhere in a blog post or static page.

    Note: If you’re embedding the shortcode into a page built using the Thrive Architect page builder plugin, just use the Custom CSS widget provided in the options sidebar in the Architect editor.

    Contact Form 7 form background and border CSS

    The following CSS code below will style your Contact Form 7 container background and borders sitewide. So that means all the forms on your website.

    If you don’t wish to add a custom background or border, just skip adding this piece of code.

    If you use the code below without modifying it, you should end up with a light grey background with a thin dark grey border. You can adjust the values marked in red to your liking.

    /* Contact Form 7 Form Background And Border CSS  -----------------------------------------------*/    .wpcf7 {   background: #A3A3A3;   border: 1px solid #494949;   width: 700px;  }

    Contact Form 7 input fields and text area CSS

    The following CSS code will style the font size, form input fields, text area, background color, font color, form width, and padding. You can adjust these values (marked in red) to your preference.

    If you use the code below without modification, you should see each of the form fields in a light grey shade.

    /* Contact Form 7 Input Fields CSS  ---------------------------------*/    .wpcf7 input[type="text"],  .wpcf7 input[type="email"],  .wpcf7 input[type="tel"],  textarea  {   font-size: 16px;   background-color: #f5f5f5;   border: none;   color: #000;   width: 95%;   padding: 2%;  }

    Contact Form 7 submit button CSS

    Finally, the following CSS code below will style the Submit Button of your Contact Form 7 forms.

    There are three rules here: input, input:hover and input:active. Let me explain what each one does if you’re not entirely sure.

    1. input – Is the state of the button ‘as is’ before any action has taken place on it.
    2. input:hover – Is the state of the button when a cursor is hovered over the top of it.
    3. input:active – Is the state of the button when someone clicks on the button itself.

    So, you can change the values for each of these to style to your liking. Check out this post to learn how to create ghost buttons to use instead.

    If you use the code below without modification, you should see a red button, and it should change to a grey shade when you hover your mouse cursor over the top of it.

    /* Contact Form 7 Submit Button   -------------------------------*/    .wpcf7 input[type="submit"] {   color: #ffffff;   font-size: 18px;   font-weight: 700;   background: #9ED9330;   padding: 15px 25px 15px 25px;   border: none;   border-radius: 5px;   width: auto;   text-decoration: none;   text-transform: uppercase;   letter-spacing: 1px;  }    .wpcf7 input:hover[type="submit"] {   background: #494949;   transition: all 0.4s ease 0s;  }    .wpcf7 input:active[type="submit"] {   background: #000000;  }

    How to add margin spacing between form inputs and form containers

    If you are using a custom background and border with your form fields inside of these, you might have noticed your input fields are too close to the edge of the container border.

    If you’d like to add some spacing around these, use the following CSS code.

    You can adjust these to your liking. Increasing the px value will increase the space around your form fields, and the edge of your background container.

    /* Contact Form 7 Margins   -------------------------*/     .wpcf7 form {    margin-left: 25px;   margin-right: 25px;   margin-top: 25px;   }

    Output for entire CSS code provided above ‘as is’

    If you use all of the above CSS code provided without modifying anything, your forms should look something like this.

    How To Add Custom CSS To Contact Form 7 In WordPress

    Wrapping up

    So there you have it, a quick and easy tutorial for adding some simple custom CSS to your Contact Form 7 forms to make them unique to your site.

    If you have some basic knowledge of CSS, you can play around with the values to really personalize your contact forms.

    Of course, if you don’t feel comfortable messing around with CSS snippets, and don’t mind installing another plugin into your WordPress blog, there is an alternative solution.

    You can download and install the Contact Form 7 Style plugin.

    I probably should have mentioned this plugin at the start of the tutorial. However, you’re better off coding something into your site manually than installing yet another WP plugin.

    In any case, this plugin has all the necessary options to help you customize your forms with a simple click-of-the-mouse.

    I will be updating this tutorial post in the near future with more styling tips, so be sure to subscribe to my email newsletter for updates.

    For now, though, enjoy.

    If you have any questions, please leave them in the comment section below as always. If the comment is closed, contact me here.

    www.magnet4blogging.net

    How do I style contact form? This is a common question on the support forum. Contact Form 7 doesn’t provide any customization for styling. Editing CSS style sheets is the best method to style contact forms. In this article, I’ll show you some important steps for styling your contact forms. If you know about CSS, my explanation is simple. If you are not familiar with CSS, please learn CSS first with these informative websites:

    • Learning CSS – W3C
    • CSS Tutorial – W3Schools
    • Learn CSS | MDN – Mozilla Developer Network
    • CSS Basics

    Which Style Sheet Should I Edit?

    Any style sheet is okay, but I recommend editing your theme’s main style sheet. It’s better not to edit style sheets in the plugin because your changes will be overwritten when the plugin is updated. Themes can be updated, but they are generally updated less frequently than plugins. If your theme is updated often, you might make a child theme and manage the style sheet in the child theme.

    Style Fields in Contact Form

    Let’s see how we can style individual fields in a contact form. There are several types of input fields. The most common field is a single-line text input field so let’s add a style rule for it:

      input[type="text"]  {  	background-color: #fff;  	color: #000;  	width: 50%;  }  

    This selector matches all ‘input’ elements whose ‘type’ attribute has exactly the value ‘text’ (i.e. single-line text input fields). Also, this style rule has three properties specifying white as background color, black as foreground (text) color, and 50% as width of field.

    You may want to apply this style rule to other types of fields. Let’s add selectors for an email address input field and a multi-line text input area:

      input[type="text"],  input[type="email"],  textarea  {  	background-color: #fff;  	color: #000;  	width: 50%;  }  

    Now this style is applied to every part of your site. You may want to limit it to contact forms. Contact Form 7’s form has a wrapper element that has ‘wpcf7’ class. You can limit the scope of target by adding ancestor selectors:

      .wpcf7 input[type="text"],  .wpcf7 input[type="email"],  .wpcf7 textarea  {  	background-color: #fff;  	color: #000;  	width: 50%;  }  

    Style Specific Fields

    You might want to style only specific fields. First, add an ‘id’ or ‘class’ option to the form-tags of the fields in the contact form that you want to style:

    [text text-123 id:very-special-field]

    Then add style rules using the id or class:

      #very-special-field  {  	color: #f00;  	border: 1px solid #f00;  }  

    Style Whole of Contact Form

    As I mentioned earlier, the top-level element of contact form has ‘wpcf7’ class. To style the whole contact form, add style rules for the class selector:

      .wpcf7  {  	background-color: #f7f7f7;  	border: 2px solid #0f0;  }  

    This style rule gives your contact forms a light gray background and green border.

    contactform7.com

    Добавляем классы к форме Contact Form 7.

    Когда мы откроем форму для правки мы увидим примерно следующую картину:

    contact form 7 внешний видcontact form 7 настройка внешнего вида

    Такая форма обратной связи будет выглядеть примерно так:

    contact form 7 изменить внешний вид

    Скучно, не пропорционально, скажем прямо не красиво.

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

    contact form 7 стили

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

    Классы добавлены, пока ничего не изменилось, следующим шагом будет определение id формы.

    Определяем ID формы на странице.

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

    Для правки формы нужно ее добавить на страницу или в запись, в необходимом месте, то-есть вставить шорткод. После этого переходим на эту страницу и кликаем по форме правой кнопкой мыши и выбираем пункт «Просмотреть код» это для браузера Chrome, если у вас другой, то там примерно такой же текст.

    красивая форма contact form 7

    В открывшемся коде ищем начало нашей формы, выглядит это так:

    стилизуем contact form 7

    Именно это и будет id формы. Возвращаясь назад, покажу какой id имеет эта же форма на другой странице.

    стилизуем contact form 7

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

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

    Стилизация формы Contact Form 7, работа с файлом style.css

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

    Изменяем цвет фона, отступы, шрифт формы.

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

    Сперва обратимся к файлу style.css, добавим первые правила для ID формы (добавлять нужно в самом низу файла), в моем случае это wpcf7-f172-p34-o1, вам же нужно подставить ваш идентификатор:

    #wpcf7-f172-p34-o1 {
    margin: 5px;
    padding: 10px;
    background: #B3AFAF;
    font-family: Georgia, «Times New Roman», Times, serif;
    color: #000;
    }

    Теперь разберем все подробнее:

    1. Вначале займемся отступами. Внешние отступы (от края до начала формы) — margin: 5px, внутренние отступы (от начала формы до внутренних элементов) —padding: 10px.
    2. Заливка формы или ее фон определяется свойством background: #B3AFAF, цвет можете подбирать какой угодно, просто заменив значение.
    3. Определяемся с семейством шрифта, если менять не хотите можно не прописывать это правило (font-family: Georgia, «Times New Roman», Times, serif).
    4. Цвет текста определяет свойство color, которое сейчас стоит в черном цвете (color: #000).

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

    Определяем отступы между полями, изменяем рамку.

    Переходим к нашим полям, добавим отступов:

    #wpcf7-f172-p34-o1 p{
    margin:5px;
    }

    Это отступы по краям полей, что бы текст и блоки не сливались в одно целое.

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

    #wpcf7-f172-p34-o1 input,textarea {
    border: 3px double #000;
    }

    О рамках немного подробнее. Значение в 3px это ширина рамки, double двойное использование (если не нужно, можно удалить это слово), #000 цвет рамки так же можете подобрать свой.

    Можете сохранить изменения и посмотреть на то что у вас получилось. Далее перейдем непосредственно к полям и изменению их размеров и расположения.

    Меняем ширину полей и их расположение.

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

    .name-cf {
    float:left;
    padding: 2px;
    }
    .name-cf input {
    width: 270px;
    }
    .thems-cf input {
    width: 100%;
    }
    .clear-cf {
    clear: both;
    }
    .text-cf textarea {
    width: 100%;
    }

    Теперь разберем все поподробнее:

    1. Первый класс к которому мы обратимся name-cf он принадлежит полям с именем и емейлом. Для них задаем отступ в 2px (padding: 2px) и обтекание (float:left), что бы выровнять два поля в один ряд.
    2. Далее подправим ширину полей задав им оптимальный (для моего шаблона) размер в 270px (.name-cf input { width: 270px; }). Если у вас поля все еще в одну строчку или же слишком маленький размер, подберите свой вариант.
    3. Поле с названием темы сделаем на всю ширину формы, так как текста там может быть больше (.thems-cf input { width: 100%;}). Если вы хотите свое, точное значение укажите его в пикселях.
    4. Следующий блок который мы добавили к форме предназначен для отмены обтекания (.thems-cf input {width: 100%; }).
    5. Так же как и в предыдущем случае, поле с текстом сообщения делаем на всю ширину (text-cf textarea {width: 100%;}).

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

    Выравниваем кнопку «Отправить» по центру, изменяем фон и ширину.

    Переходим к нашей кнопке, выровняем по центру и добавим фон:

    .submit-cf {
    width: 200px; /*ширина блока*/
    height: 25px; /*высота*/
    margin: 0 auto; /* Отступ слева и справа */
    }
    .submit-cf input {
    width: 200px;
    background:#96B195;
    }

    Традиционно объясняю что к чему:

    1. Первым правилом мы определяем ширину и высоту блока в котором будет размещена кнопка и ставим ее по центру формы.
    2. Вторым правилом задаем цвет фона кнопки (background:#96B195, если не указать будет такого же цвета как и все остальные поля), устанавливаем ширину кнопки (width: 200px, желательно что бы была такого же размера, как ширина блока, что бы кнопка не двигалась в стороны).

    Сохраняем наши настройки и смотрим что у нас получилось:

    contact form 7 ширина, размер полей

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

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

     

    yrokiwp.ru

    Отключаем стандартные contact form 7 стили

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

    Стандартные contact form 7 сообщения

    Для этого, в файле functions.php  добавляем следующий код:

    Теперь, когда старые стили удалены, можно сверстать/взять новые css стили сообщений (например тут) и прикрутить их к contact form 7. Для примера, я уже имею свои готовые стили alert-ов и буду использовать их:

    Шаблон сообщений для cf7

    Отключение скриптов

    Возвращаемся в functions.php файл и добавляем следующий код:

    В коде выше, мы перезаписываем нативный скрипт contact form плагина на наш и подключаем его через функцию wp_enqueue_script . Кстати, если вы начинающий (или нет) разработчик и хотите узнать больше о встроенных функция в WordPress, то возможно вам будет интересна данная статья.

    NEW_PATH — путь до нового js файла в теме, который нужно скопировать из wp-content/plugins/contact-form-7/includes/js/scripts.js

    Зачем подключать новый скрипт?

    Все просто. При отправке формы, сообщения/их статус «подтягиваются» через AJAX, т.е грубо говоря contact form после submit возвращает какой-то кусок html кода, который каждый раз перезаписывается, и естественно отслеживать постоянно на триггерах, когда обновится форма — неправильно. Можно конечно динамически отслеживать DOM через MutationObserver , но и он имеет свои определенные недостатки. Гораздо проще перезаписать главный скрипт cf7 плагина и уже внутри изменить js код под свои нужды.

    Меняем внешний вид

    Далее осталось только открыть скопированный js файл и внести нужные изменения. В моем случае, необходимо только добавлять/удалять классы для сообщений в зависимости от статуса — spam / mail_sent / mail_failed и т.д . Для этого в методе var ajaxSuccess = function( data, status, xhr, $form ) {  в case выборке просто манипулируем нужными классами.  В итоге при отправке формы, получаем красивые стилизованные сообщения:

    Стилизованные сообщения

    ziscod.com


You May Also Like

About the Author: admind

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.