Разное

Стили contact form 7: Сontact form 7 настройка внешнего вида. Изменяем дизайн форм

17.07.2019

Содержание

Сontact form 7 настройка внешнего вида. Изменяем дизайн форм

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

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

Для начала нам нужен доступ к админке и файлу style.css, его можно найти во вкладке “Внешний вид”/”Редактор”. По умолчанию, именно нужный файл вам и откроется. Рекомендую открыть несколько вкладок в браузере:

  1. Вкладка Contact Form 7 для правки формы.
  2. Страницу на сайте с формой обратной связи.
  3. Редактор с открытым файлом CSS.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ну что, очередной шаг сделан, мы определили 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 — как изменить внешний вид формы

Плагин 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, я его уже упоминала в предыдущей статье, так же очень хорошо и быстро меняет внешний вид формы

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

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

Стили для контактной формы плагина Contact Form 7

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

И сегодня рассмотрим плагин Contact Form 7 Style, который предназначен для того, чтобы визуально создавать стили для Contact Form 7. Изначально, кроме своего оформления, у плагина есть готовые стили формы в виде шаблонов. Где вы просто выбираете вариант шаблона и ставите галочку какой форме, созданной вами ранее, применить это оформление. Давайте разберем это на деле.

Настройка плагина Contact Form 7 Style

Пропускаем часть объяснения установки модуля и создание форм, так как тема обзора направлена именно на стилизацию формы. Для этого, как говорилось выше, мы воспользуемся специальным плагином. После его установки в боковой панели добавится раздел «Contact Styles» с пяти подразделами.

В первом разделе «All Styles» находится уже готовые шаблоны стилей формы, и тут же будут сохраняться стили созданными вами.

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

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

В разделе «CSS Editor» присутствует редактор для пользовательских стилей. Это на случай если невозможно что-то сделать в визуальном редакторе.

Contact Form 7 Style

Contact Form 7 Skins — Плагин для WordPress

  1. Visit Plugins > Add New in your WordPress admin area and search for Contact Form 7 Skins.
  2. Locate the plugin in search results.
  3. Click on the Install button to download and install the plugin.
  4. Activate the plugin.

Alternate Installation Method

  1. Download the plugin’s zip file and visit Plugins > Add New in your WordPress admin area.
  2. Click on the Upload Plugin button and then simply upload the zip file.
  3. WordPress will now upload the zip file from your computer to your website, extract it, and install the plugin.
  4. Click on the Activate link to start using the plugin.

Having trouble? Learn more about how to install plugins on WordPress Codex.

Website | Documentation | FAQ | Add-ons

What does CF7 Skins do?

CF7 Skins is an add-on plugin for Contact Form 7. It extends the functionality of Contact Form 7 by adding a

drag & drop Visual Editor together with range of compatible Templates and Styles. You can learn more by visiting cf7skins.com

Is there Documentation available?

Yes, our in-depth Documentation is a great place to find detailed answers. It covers how to get started, how to customize your forms with CF7 Skins and everything else in between.

Many questions have been answered on the CF7 Skins FAQ.

Website | Documentation | FAQ | Add-ons

How do I get started?

There is a range of Tutorials available to help you get started using CF7 Skins.

Where can I get support?

Add-ons — if you have a current license you can post your questions to our Premium Email Support.

Free Version — you can use the WordPress Support forum. This is community based support offered by other CF7 Skin users (we visit the forum intermittently to assist with plugin bugs only).

What users have to say

Read testimonials from CF7 Skins users.

Do I need to have coding skills to use CF7 Skins?

Absolutely not. You can create and manage Contact Form 7 forms without any coding knowledge (100% drag & drop form builder).

Переводы

  • Indonesian (Bahasa Indonesia; id_ID) — Sastra Manurung

Website | Documentation | FAQ | Add-ons

The drag and drop function doesn’t show anything, templates and skins are uglier than simple HTML ones

Tested this and it seems to work just fine, however its quite complicated to set up and, for me, was slower than using the default Contact Form 7 editor. It does help if you want to change the style of the forms on your site and don’t know html but if you are looking for a simple drag and drop try interface such as you may have come across on other form plugins then this may confuse you. I was looking at it for a clients site but I don’t think they would be able to work out how to use it.

I have found the skins great for appearance, but cannot find enough help to know how to use is correctly and my whole form keeps getting messed up :(. REALLY disappointed in the support for this and for CF7. Almost every tutorial is done by someone who is ESL and is not understandable. 🙁

The plugin does not support AMP, AMP for WP. My support ticket was closed today without any explanation. Also a year ago there was another problem with the radio checkboxes. Until now I didn’t receive any news. They told me that CF7 changed their code and the logic with radio checkboxes do not work as expected.

Has broken the design of the form page and we had to restore a backup

The templates are pretty good. Maybe to modernize a little bit to make them more modern (2018) Works well. The support is very responsive and kind. Works with a lot of CF7 plugin, and does not crash or crush, the other CF7 plugins, which is rare. $ Other CF7 design plugins, overwrites the main CF7 plugins. This one is not 🙂 I will take pro version, I finished test with free version. thank you for your kindness

Посмотреть все 18 отзывов

«Contact Form 7 Skins» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

Участники
2.4.1 — 2020-12-11

FIX: Support WP 5.6 jQuery changes — replace jQuery tipsy with balloon-css

2.4 — 2020-08-11

FEATURE: Add Templates
FEATURE: Add support for Other field in CF7 Skins Visual Editor
FIX: Support WP 5.5 changes

2.3.3 — 2020-07-07
  • TWEAK: Update software licenser
2.3.2 — 2020-06-30
  • TWEAK: Enable translation of Pro Tips
2.3.1 — 2020-06-18
  • FIX: Ensure Save Visual saves changed forms
2.3 — 2020-05-20
  • FEATURE: Make adding asterisk to required fields optional
  • TWEAK: Make CF7 Skins Settings clearer for users
  • TWEAK: Enable translation of all JavaScript
  • TWEAK: Minimize built JS & CSS files
2.
2.2 — 2020-03-11
  • FIX: Checkboxes not displayed in style
2.2.1 — 2020-01-14
  • FIX: Improve getting list of all CF7 shortcode tags in CF7 form content
2.2 — 2020-01-07
2.1.4 — 2019-10-02
  • FIX: Remove & replace clearfix removed/deprecated in WordPress 5.0 — had conflict with some other WP plugins.
2.1.3 — 2019-07-03
  • TWEAK: Enable export of individual form.
2.1.2 — 2019-04-11
  • FIX: Encode to UTF-8 when loading HTML
2.1.1 — 2019-03-04
  • FIX: Remove opt-in data collection — security fix
2.1 — 2019-02-25
  • FEATURE: Change type of CF7 Tag
  • FEATURE: Copy visual form data option
  • FIX: Remove duplicate from ReCAPTCHA and Submit fields
  • TWEAK: CF7 acceptance tag options modified
  • TWEAK: Add surrounding LIST-LI to additional CF7 Tag
  • TWEAK: Visual form tab expandable
  • TWEAK: Pro Tips added
2.
0.2 — 2019-02-08
  • FIX: Ensure Visual editor shown when add new form if have CF7 configuration error in CF7 5.1+
  • TWEAK: Add minimum required PHP & CF7 versions
2.0.1 — 2018-08-13
  • FIX: Prevent JavaScript conflict with Yoast SEO
2.0 — 2018-06-19
  • FEATURE: Add drag & drop Visual Editor
  • FEATURE: Display Notices when update plugin
  • FIX: Update template files to match visual files
  • FIX: Ensure CF7 Skins connects to CF7 Form section
  • TWEAK: Show Getting Started Tab when activate plugin
  • TWEAK: Ensure deselecting within Template or Style List also deselects in Details or Expanded View
1.2.2 — 2018-01-11
  • FEATURE: Add opt-in data collection
  • FIX: Improve context and conjugation issues for non-Roman languages
  • FIX: Ensure CF7 Skins scripts are loaded if CF7 default script de-registered
  • TWEAK: Hide Info Tabs at WordPress Small screen: 850px
  • TWEAK: Ensure active Tab is highlighted
  • TWEAK: Remove WP hidden class
1.
2.1 — 2017-06-07
  • FIX: WPCF7_Shortcode & WPCF7_ShortcodeManager deprecated in CF7 4.6
  • FIX: Ensure key input exists when activating license
  • FIX: Remove locale parameter for CF7 >= 4.4
  • FIX: Display activation log data
  • FIX: Stop default Ready CSS over-writing selected Style CSS
  • TWEAK: Add JS trigger for React components
  • TWEAK: Add Skins Tabs via filter
  • TWEAK: Remove Default CF7 form Template
  • TWEAK: Include typicons
  • TWEAK: Save version installed when update
  • TWEAK: Correct Info Tabs text
1.2 — 2016-04-08
  • FEATURE: Show Template & Style selected in Skin Info Area
  • FEATURE: Info Tabs in Skins Meta box & CF7 Skins Settings
  • FEATURE: Add Styles
  • FIX: Copy CF7 Skins data when CF7 Duplicate used
  • FIX: Deselect Template & Style
  • TWEAK: Check CF7 User Permissions
  • TWEAK: Update colors on Admin messages
  • TWEAK: Suitable for wordpress. org translation
1.1.2 — 2016-03-10
  • FIX: Ensure CF7 Skins Styles are enqueued if Contact Form 7 styles are de-registered
  • FIX: Ensure update version checking is operating
  • FIX: Remove undefined index notice when updating multiple plugins
  • FIX: Skins Metabox toggle not sticking
1.1.1 — 2015-09-21
  • FEATURE: Add support for Ready styles
  • FIX: Enqueue styles for non-content shortcodes
  • TWEAK: Add tabs & consistent spacing to templates
  • TWEAK: Improve readability of Logs tab
1.1 — 2015-06-30
  • FEATURE: Add Styles
  • FIX: Ensure all plugin data is deleted
  • TWEAK: Enqueue only where necessary within Contact Form 7
  • TWEAK: Update Help Ballons
1.0.2 — 2015-05-29
  • FIX: wpcf7_add_meta_boxes action removed in Contact Form 7 4.2
  • FIX: Parse the CF7 shortcode ID in single or nested shortcodes
  • FIX: Ensure JavaScript finds active textarea
  • TWEAK: Add cf7skins_form_classes filter hook
1.
0.1 — 2015-05-06
  • FIX: Default CSS overriding input & textarea Styles
1.0 — 2015-04-09

Material Design for Contact Form 7 — Плагин для WordPress

Контактные формы в Contact Form 7 могут стать такими интерактивными, как в мобильном приложении. Стоит только добавить тему Google «Материальный дизайн».

Стиль Contact Form 7

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

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

Уделите 30 секунд своего времени и посмотрите как могли бы выглядеть Ваши контактные формы. Посмотрите видео ниже и/или попробуйте интерактивную демоверсию.

Что нового в версии 2.
0?
  • Используется новый материальный дизайн. Текстовые поля и выпадающие списки теперь доступны в подчеркнутом (boxed) и обведенном (outlined) вариантах. Текстовые поля теперь имеют внутренний шаблон. Посмотрите скриншоты ниже.
  • Новые типы кнопок. Приподнятая (elevated — по умолчанию), неприподнятая (unelevated) и обведенная (outlined).
  • Улучшенная поддержка браузеров. IE11, iOS8+ и все современные браузеры.
  • Для пользовательского CSS теперь доступно выделение синтаксиса
  • Вы можете продолжить использование оригинальных стилей, если хотите.
Формы Contact Form 7 могут стать более интерактивными

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

В настоящее время поддерживается:
  • Светлая и темная темы оформления
  • Доступны подчеркнутый и обведенный вид для текстовых полей (включая текст, e-mail, URL-адрес, номер телефона, дату)
  • Текстовые поля с возможностью включения автоматического изменения размера
  • Доступны подчеркнутый (boxed) и обведенный (outlined) вид для выпадающих списков
  • Чекбоксы (флажки)
  • Радиокнопки
  • Флажки согласия / принятия
  • Поле загрузки файла
  • Кнопка подтверждения (включая колесо загрузки)
  • Тесты (викторины)
  • ReCaptcha
  • Другое (подтверждение / сообщения об успехе и т. д.)
Pro-версия:
  • Производите пользовательскую настройку цветов и шрифтов
  • Выстраивайте поля в столбцы
  • Превращайте радиокнопки и чекбоксы (флажки) в переключатели
  • Добавляйте иконки для текста и выпадающих списков
  • Группируйте поля в разделы с помощью карточек
  • Прямая поддержка по электронной почте

Вы можете обновить плагин до pro-версии, не покидая WordPress.

Высокая совместимость с этими плагинами:
Гибкие контактные формы

Материальный дизайн для Contact Form 7 — это полностью гибкая тема для Contact Form 7. Она адаптируется под размер экрана и работает на любом устройстве.

Стиль контактных форм

Плагин «Материальный дизайн для Contact Form 7» по умолчанию устанавливает стандартные цвета и шрифты материального дизайна Google. Но вы можете использовать кастомизатор WordPress для изменения шрифтов и цветов на Ваш вкус, если Вы являетесь пользователем Pro-версии.

  1. Загрузите zip-файл в каталог /wp-content/plugins/ и распакуйте его
  2. Активируйте плагин через меню «Плагины» в WordPress

ИЛИ перейдите в «Плагины» > «Добавить новый», и выполните поиск «материальный дизайн для contact form 7» для установки через панель управления WordPress.

Что такое материальный дизайн?

Материальный дизайн (Material Design) — это разработанный Google набор рекомендаций, который описывает как должен выглядеть и вести себя Ваш сайт или приложение. Материальный дизайн используется в большей части приложений Google, включая саму ОС Android.

Нужна ли тема Material Design?

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

For more ways to add Material Design to your WordPress site (without changing your theme), see WordPress Material Design.

Как пользоваться этим плагином?

Всю документацию можно найти, нажав на «Помощь» (в правой верхней части экрана) и затем на «Материальный дизайн» на экране редактирования форм CF7.

Для более подробного руководства, посмотрите Как установить материальный дизайн для Contact Form 7.

У меня все это выглядит по-другому!

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

The labels are tiny

Some themes have CSS that makes the labels really small. You can fix this in the customizer (Appearance > Customize > Material Design Forms) by setting the option to force default font sizes.

Angus went beyond the call of duty. The level of support was superb. Got the forms working precisely to our needs. Friendly and professionally accomplished. Many thanks!

I love it. I was a bit reluctant to use it, but after installing it, got the way the shortcodes need to be implemented, and it is pretty straightforward. I just used the basics, and it works cool right out of the box.

Just purchased the PRO version and it is a really good one. Instead to spend lots of time coding to implement material forms, I nade it in minutes. If you deal with forms to collect leads, this plugin is a must have.

Really love the plugin, has taken all of my contact forms to the next level. Since I have moved to the pro version the support from Angus has been truly incredible and helped me out a lot. Thanks man!

Such a crazy stuff. I feel sorry for those users who increase their website-size only for a form

I went with Material Design to make our website appear really professional, and the Documentation was good. We needed some advanced CSS customizations for our specific theme, and we received fast support from the Material Design team that solved exactly what we needed. Great experience.

Посмотреть все 66 отзывов

«Material Design for Contact Form 7» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:

Участники

Contact Form 7 — стартовые стили для форм + експорт форм

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

RU_UK_EN_DE_ContactForm7.wordpress.2018-06-04.zip

После того как импортируете формы не забудьте заменить на вкладке формы «Письмо» в поле «Кому» [email protected] на ваш Email, в поле «От кого» место [email protected] укажите адрес с Email с Вашего домена. Так же замените <img src=»/Logo-150×150. png» style=»width: 116px;»> на Ваш полный путь к логотипу, то есть как пример укажите:  <img style=»max-width: 150px !important;» src=»https://DomenSKotorogoIdetOtpravkaPisma.com/wp-content/uploads/2018/02/Logo-150×150.png»>

Файл экспорта импортируем обычным способом WordPress:

Далее скопируйте стили ниже и разместите их в style.css.

CSS Стили:



div.wpcf7-response-output {
    margin-top: -30px;
}

span.wpcf7-not-valid-tip {
    margin-top: -14px;
    margin-bottom: -10px;
    text-align: center;
}

span.wpcf7-not-valid-tip {
  color: #a01414;
      font-size: 1em;
      
      display: block;
      font-weight: 700 !IMPORTANT;
}


@media screen and (max-width:768px){
span.wpcf7-not-valid-tip {
    margin-bottom: 15px;
}
input.wpcf7-form-control.wpcf7-text {
    max-height: 30px;
}
}






.wpcf7-response-output.wpcf7-display-none.wpcf7-validation-errors {
    color: aliceblue;
    font-weight: 800;
}

span. wpcf7-not-valid-tip {
    font-weight: 900;
    background-color: antiquewhite;
}

textarea {
    height:150px !Important;
}


.screen-reader-response ul {
    display: none;
}
.wpcf7-response-output.wpcf7-display-none.wpcf7-mail-sent-ok {
    display: none !important;
}
.wpcf7-response-output.wpcf7-display-none.wpcf7-validation-errors {
    display: none !important;
}


.screen-reader-response {
    color: white;
    margin-bottom: 10px;
}





.wpcf7-response-output.wpcf7-display-none.wpcf7-validation-errors {
    margin-top: -60px;
}


input.wpcf7-form-control,
textarea#TextareaJA,
input.wpcf7-form-control.wpcf7-submit {
    font-family: "Open Sans";
    font-size: 15px;
    
    line-height: 30px;
    font-weight: 700;
}
}


input.wpcf7-form-control.wpcf7-submit {
    margin-top: -15px;
}








form.wpcf7-form input:focus,
 form.wpcf7-form textarea:focus,
 form.wpcf7-form input[type="text"]:focus {
     border-color: #709242;
 }


span.ajax-loader {
   margin-left: auto !important;
   margin-right: auto !important;
   float: inherit !important;
   width: 15px !important;
   display: block !important;
   margin-top: 10px !important;
   margin-bottom: -15px !important;
}


. wpcf7-form-control-wrap {
    width: 100%;
}
.wpcf7-form-control.g-recaptcha.wpcf7-recaptcha {
    margin-top: -28px;
    margin-left: auto;
    margin-right: auto;
    
    width: 300px;
}
div#recapcha-popups .wpcf7-form-control-wrap {
  padding-top: 25px;
      margin-left: -11px;
      padding-bottom: 38px;
}


span.wpcf7-form-control-wrap input#Email,
span.wpcf7-form-control-wrap input#PhoneJA,
input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
    text-align: center;
}


input.wpcf7-form-control.wpcf7-submit {
    color: #ffffff;
    background: #5a8f2b;
    font-weight: 600;
    border: 2px dashed #ffffff;
    margin-top: -25px;
    font-family: FuturaDemiC !Important;
    padding: 10px 30px;
    color: #fff;
    border-radius: 0px;
    position: relative;
    
    transition: all .3s ease 0s;
    }

input.wpcf7-form-control.wpcf7-submit:hover {
    background: #ffffff;
    color: #5a8f2b;

    border: 2px dashed #5a8f2b;
}


textarea#TextareaJA::-webkit-input-placeholder {
text-align: center;
}
textarea#TextareaJA:-moz-placeholder { 
text-align: center;
}
textarea#TextareaJA::-moz-placeholder {  
text-align: center;
}
textarea#TextareaJA:-ms-input-placeholder {
text-align: center;
}

Полезности:

Заполнение вкладки Email письма:
Если Вам необходимы дополнительные теги для использования в письме, вы всегда можете их узнать здесь:

Загрузка файлов плагина CF7 только на определенных страницах:

Почтовая навигация

Источник записи: https://mediadoma. com

Оптимизация плагина Contact Form 7 с помощью Assets manager | Clearfy

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

ПРИМЕЧАНИЕ. Если вы используете контактные формы на каждой странице веб-сайта, можете пропустить этот урок. Однако у вас также могут быть некоторые страницы без CF7, в этом случае эта статья может быть для вас полезной.

Почему нужно оптимизировать Contact Form 7?

К сожалению, в плагине присутствует один значительный недостаток: при создании сайта (например, многостраничного) и размещении контактной информации лишь на одной странице, Contact Form 7 загружает свои скрипты и стили на всех страницах сайта или блога. Это можно проверить, если нажать на странице сочетание клавиш Сtrl+ U и найти Contact Form 7 в исходном коде. Мы увидим, что Contact Form 7 загружает на главной странице style. css:

К тому же, загружается еще и скрипт Contact Form 7 includes/script/js

При этом самой формы на главной странице нет.

Давайте разберемся, почему это плохо. Для этого зайдем в файловый менеджер и найдем там Contact Form 7:

Зайдем в папку Includes, далее в css, где увидим файл style.css весом 16 килобайт:

Файл script в папке js весит 14, 2 килобайта.

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

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

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

Оптимизируйте Contact Form 7, если вы используете ее только на одной странице (например, Контакты).

Тестирование через сервис GTmetrix до оптимизации

Для того, чтобы увидеть разницу, скопируем ссылку в сервис GTmetrix и нажмем Analyze. Изучим результат. Повторим анализ заново. Мы получим следующие данные:

5.9 секунд загрузки, размер страницы 1,73 мб и 70 запросов.

Оптимизация Contact Form 7 с помощью нашего плагина Clearfy

Clearfy выполняет не только оптимизацию Contact Form 7, но и ряд других полезных функций. Но в данной статье речь пойдет именно об оптимизации Contact Form 7.

Установите и активируйте бесплатный плагин Clearfy. Переходим в его меню:

Для работы нам понадобится менеджер скриптов.

По умолчанию менеджер скриптов будет активен. Но если у вас он неактивен, то перейдите во вкладку Производительность -> Менеджер скриптов и убедитесь, что настройки выглядят следующим образом:

Если настройки в порядке, вы должны перейти на страницу с контактной формой (например, Контакты).

В верхней панели администратора необходимо нажать на ссылку «Script manager», при этом вы должны находится на странице, где у вас расположена контактная форма.

После перехода по ссылке, вы увидите «Менеджер скриптов».

Находим нужные нам скрипты, а в колонке Отключить выбираем Повсюду и ставим текущие URL. Таким образом мы отключили загрузку скриптов и стилей Contact form 7 на всех страницах сайта, кроме текущей (страница с формой контактов):

Нажимаем Сохранить, выходим из менеджера скриптов и попадаем на страницу контактов.

Для того, чтобы убедиться в отключении скриптов переходим на главную страницу, нажимаем Ctrl+U, Ctrl+F для поиска Contact Form 7:

Мы можем видеть только строки Contact Form 7 и reCaptcha API, но не скрипты и стили.

Тестирование через сервис GTmetrix после оптимизации

Протестируем изменения с помощью GTmetrix: для этого дважды кликнем на Re-Test. Результаты следующие:

Страница весила 1,73 мб, а стала 1,72. Количество запросов было 70, стало – 68 (запросы уменьшились за счет отключения скриптов и стилей Contact form 7).

Clearfy Assets Manager может оптимизировать любые плагины и темы

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

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

Менеджер скриптов отдельным плагином

Для настройки оптимизации вы можете пользоваться как универсальным плагином Clearfy, так и отдельным плагином WordPress Assets Manager:

Он выполняет одну конкретную функцию менеджера скриптов. В нем не будет дополнительных разделов для оптимизации.

Вывод

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

Пробуйте и экспериментируйте с нашим Менеджером скриптов, чтобы оптимизировать свои сайты.

Форма обратной связи по стайлингу | Контактная форма 7

Как оформить контактную форму? Это частый вопрос на форуме поддержки. Контактная форма 7 не позволяет настраивать стиль. Редактирование таблиц стилей CSS — лучший способ стилизации контактных форм. В этой статье я покажу вам несколько важных шагов по оформлению ваших контактных форм. Если вы знаете о CSS, мое объяснение простое. Если вы не знакомы с CSS, сначала изучите CSS на этих информационных сайтах:

Какую таблицу стилей мне следует редактировать?

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

Вы также можете использовать Additional CSS , и он имеет несколько преимуществ по сравнению с непосредственным изменением таблиц стилей темы.

Стилизация полей контактной формы

Давайте посмотрим, как мы можем стилизовать отдельные поля в контактной форме.Есть несколько типов полей ввода. Наиболее распространенное поле — это однострочное текстовое поле ввода, поэтому давайте добавим для него правило стиля:

ввод [тип = "текст"]
{
    цвет фона: #fff;
    цвет: # 000;
    ширина: 50%;
}
 

Этот селектор соответствует всем input элементам, чей атрибут type имеет в точности значение text (т. е. однострочные поля ввода текста). Кроме того, это правило стиля имеет три свойства, определяющих белый цвет как цвет фона, черный как цвет переднего плана (текста) и 50% как ширину поля.

Вы можете применить это правило стиля к другим типам полей. Давайте добавим селекторы для поля ввода адреса электронной почты и области ввода многострочного текста:

input [type = "text"],
input [type = "email"],
textarea
{
    цвет фона: #fff;
    цвет: # 000;
    ширина: 50%;
}
 

Теперь этот стиль применяется ко всем частям вашего сайта. Вы можете ограничиться контактными формами. Форма Contact Form 7 содержит элемент-оболочку с классом wpcf7 . Вы можете ограничить объем цели, добавив селекторы предков:

.wpcf7 input [type = "text"],
.wpcf7 input [type = "email"],
.wpcf7 текстовое поле
{
    цвет фона: #fff;
    цвет: # 000;
    ширина: 50%;
}
 

См. Также:

Стилизация специальных полей

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

 [text text-123 id: очень-особенное-поле] 

Затем добавьте правила стиля, используя идентификатор или класс:

# очень-особенное-поле
{
    цвет: # f00;
    граница: 1px solid # f00;
}
 
Стилизация всей контактной формы

Как я упоминал ранее, элемент верхнего уровня контактной формы имеет класс wpcf7 .Чтобы стилизовать всю контактную форму, добавьте правила стиля для селектора класса:

.wpcf7
{
    цвет фона: # f7f7f7;
    граница: 2px solid # 0f0;
}
 

Это правило стиля дает вашим контактным формам светло-серый фон и зеленую рамку.

См. Также: Могу ли я добавить атрибуты id и class к элементу формы?

Стиль ответных сообщений

Ответное сообщение в нижней части контактной формы по умолчанию имеет класс wpcf7-response-output , поэтому вы можете применить правило стиля к этому классу, чтобы оформить ответное сообщение.

Чтобы выбрать стиль на основе статуса контактной формы, обратитесь к атрибуту class элемента form . У него должен быть класс, отражающий текущий статус. Возможные значения: init , отправлено , не удалось , прервано , спам , недопустимый или непринято .

Для примера стиля см. Следующие правила стиля по умолчанию, которые Контактная форма 7 5.2.2 применяет к ответному сообщению:

.wpcf7 form .wpcf7-response-output {
    маржа: 2em 0,5em 1em;
    заполнение: 0.2em 1em;
    граница: 2px solid # 00a0d2; /* Синий */
}

.wpcf7 form.init .wpcf7-response-output {
    дисплей: нет;
}

.wpcf7 form.sent .wpcf7-response-output {
    цвет границы: # 46b450; /* Зеленый */
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
    цвет границы: # dc3232; /* Красный */
}

.wpcf7 form.spam .wpcf7-response-output {
    цвет границы: # f56e28; /* Апельсин */
}

Форма . wpcf7.недопустимый .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
    цвет границы: # ffb900; /* Желтый */
}
 

См. Также: Размещение окна сообщения с ответом в любом месте

Сообщения об ошибках проверки стиля

Если поле имеет недопустимое значение, под полем появляется сообщение об ошибке проверки. Поскольку элемент сообщения об ошибке проверки имеет класс wpcf7-not-valid-tip , вы можете использовать этот класс для оформления сообщений об ошибках проверки.

Contact Form 7 5.2.2 по умолчанию применяет следующее правило стиля:

.wpcf7-not-valid-tip {
    цвет: # dc3232;
    размер шрифта: 1em;
    font-weight: нормальный;
    дисплей: блок;
}
 

См. Также: Настройка сообщений об ошибках проверки

Как это:

Нравится Загрузка …

WOW Styler: WordPress WOW Style Contact Form 7 Plugin — плагин WordPress

Цель этого плагина: вы можете стилизовать формы Contact Form 7, например изменять цвета, формы, тени, фон… без каких-либо знаний CSS.
Как добавить стиль в контактную форму 7, чтобы он соответствовал вашему дизайну? С WOW Styler.


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

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

Это история о том, как добавить стиль в контактную форму 7 с помощью нашего нового плагина

Мелани и Тобиас (я) начали использовать формы CF7, и мы спросили себя, как добавить стиль в контактную форму 7? Мы провели небольшое исследование существующих плагинов для стилей контактной формы 7 для WordPress, таких как Contact Form 7 Skins, Contact Form 7 Style. Нашей основной целью было разработать контактную форму и использовать этот дизайн для других форм, начиная с шаблона по умолчанию или с нуля.
То, что мы видели, нас расстроило.Мы подумали, что должны быть лучшие способы стилизации контактных форм, и поэтому изобрели гораздо более простой стайлер контактной формы 7.
Это начало истории о том, как у нас появилась идея создать новый плагин для добавления стилей в контактную форму 7.

Как я превратил Мелани, старую программиста CSS Contact Form 7, в использование WOW Styler для CF7

Она сказала

«Почему мне нужно платить за лицензию на плагин или разрабатывать ее, если вы можете стилизовать все в браузере, а затем скопировать код на страницу с формой CF7?»

А вот почему:

  • Вам нужен плагин CSS, чтобы добавить контактную форму 7 css на страницу, а не стилизовать и заставить все формы выглядеть одинаково на всем веб-сайте.
  • А на одной странице / посте нельзя размещать две формы с разными стилями.
  • Когда дело доходит до установки фонового изображения и выравнивания его по правому верхнему углу, для этого требуются знания CSS. У тебя есть это?
  • Стилизация становится еще сложнее, когда вы стилизуете форму, которая находится внутри конструктора страниц, поскольку это может удалить весь ваш собственный CSS.

Теперь Мелани решила оплатить часть разработки стайлера WOW и теперь использует его на всех своих сайтах и ​​сайтах своих клиентов.

Вы хотите знать, как БЕСПЛАТНО добавить стиль в контактную форму 7?

Вы можете использовать бесплатную пробную версию со всеми функциями!
ИЛИ вы делаете это, как Мелани и ее клиенты, поскольку они используют премиум-версию бесплатно, потому что Styler Premium предоставляется бесплатно при работе на веб-сайте с активной версией WP2LEADS Pro.

Теперь вы знаете нашу историю и как пользоваться ею бесплатно
НАЧИНАЕМ С ЗАГРУЗКИ ПЛАГИНА ИЛИ ПОИСКА «WOW STYLER» В ВАШИХ ПЛАГИНАХ WP РАЗДЕЛ

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

Характеристики
  • Стиль, независимый от темы, изменение темы не приведет к сбросу стиля
  • Совместимость с широкими темами, компоновщиком страниц и браузерами
  • Предварительный просмотр вашего стиля формы в режиме реального времени во время его разработки. Вы можете видеть свою тематическую форму и живую форму одновременно в разделенном представлении
  • Если ваша тема содержит стили CF7, вы можете дополнительно создать форму с помощью стилизатора
  • Плагин стиля Contact Form 7 постоянно совершенствуется и поддерживается.Не стесняйтесь присылать нам свои пожелания!
  • Поставляется для всех форм с красивой схемой стилей по умолчанию (спасибо Владу)
  • WOW Styler, вы просто включаете «загрузку в теле», чтобы активировать стиль, особенно в конструкторе страниц / темах, которые удаляют ваш CSS. Поэтому он работает со всеми темами и компоновщиками страниц.
  • Создайте стиль для всех форм с нуля или измените схему по умолчанию с множеством настроек (все настройки перечислены ниже)
ФУНКЦИИ в ПОЖИЗНЕННОМ ПРЕМИУМЕ ИЛИ с АКТИВНОЙ ВЕРСИЕЙ WP2LEADS PRO

Спасибо, Мелани, за идею бесплатно оформить контактную форму 7 с активной лицензией WP2LEADS:

  • Создайте индивидуальный стиль для каждой формы и придайте стиль любой форме
  • Совместите переключатели и флажки
  • Добавьте различный фон для каждой формы
  • Создайте столько схем стилей в CF7, сколько необходимо.
  • Загрузите стили в тег тела, чтобы показать стиль, когда CSS удаляется конструктором / темой страницы. Это позволяет стилизовать формы CF7 практически в любом месте.
Идеи для быстрого старта, как добавить стиль в контактную форму 7 формы
  • Измените цвета стандартной схемы в соответствии с вашим фирменным стилем
  • Измените фон каждой формы и сохраните его как другую схему, например «схема по умолчанию + улыбающееся солнце»
  • Воспользуйтесь 14-дневной пробной версией Pro, со всеми функциями, несколькими щелчками мыши, доступными в плагине через подменю.
ПРЕИМУЩЕСТВА, КОТОРЫЕ ВЫ СОБИРАЕТЕ ФОРМУ 7 КОНТАКТА с WOW STYLER
  • Измените 7 шаблонов контактной формы с легкостью.
  • С помощью этого настройщика CF7 вы можете легко создать индивидуальный дизайн для своей регистрационной формы или контактной формы всего за несколько кликов.
  • Стилер Contact Form 7 работает со стилями контактной формы, входящими в вашу тему. Это означает, что вы можете быть уверены, что дизайн WOW Stylers действительно работает во всех темах и компоновщиках страниц.
  • Если вы хотите иметь индивидуальный стилизатор контактной формы 7, который будет предоставлять вам предварительный просмотр контактной формы 7 в реальном времени, то скин CF7 этого настройщика формы вдохновит вас.
  • Плагин стиля
  • Contact Form 7 — это настройщик контактной формы, который прекрасно работает с другими надстройками контактной формы 7. Идеальное взаимодействие между настройщиком форм WordPress и шаблонами контактных форм.
  • По какой-то причине вам может не нравиться ваш текущий стиль CF7, вы можете легко вернуть его к стандарту ваших шаблонов CF7 одним щелчком мыши.
  • Дизайнер контактной формы 7 как кастомайзер CF7 выполняет любое желание
  • Сохранение ваших дизайнов в форме обратной связи 7 шаблонов сэкономит вам много времени.
  • Мгновенная обратная связь экономит ваше время. Живое разделенное представление делает его интуитивно понятным и простым в использовании.
  • Если вы искали красивый дизайн контактной формы, но не смогли найти что-то, что можно было бы быстро адаптировать к стилю своего веб-сайта, возможно, вы найдете здесь то, что ищете. Просто измените стиль по умолчанию, изменив цвета, чтобы они соответствовали дизайну вашего веб-сайта.
  • А с премиум-версией вы также можете использовать скин для всех форм с одним и тем же шаблоном, и вы можете изменять только фоновые изображения для каждой формы, чтобы создать контактную форму 7 в стиле привлекающего внимание и просто сохранить новую созданную схему стиля с новым именем, например « default CI + teddy bear background », и все готово.
Позвольте мне подвести итог.

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

Мой любимый функционал

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

73 возможных настроек формы в 12 категориях:

1.Форма текста
2.Фоновое изображение и цвета формы
3.Заполнение, поля и граница формы (настраиваемые отступы, поля и границы)
4. Текст и цвета входных полей
5. Заполнение и поля входных полей
6.Пометки & Radiobuttons
7. Размер, текст и цвета кнопки (стиль кнопки)
8. Граница и тень кнопки
9. Пользовательский CSS
10. Заголовки стиля
11. Добавьте изображение в форму
12. Контактная форма 7 полей два столбца

Чтобы узнать больше, просто спросите нас на форуме поддержки
Для всех 73 настроек стиля смотрите раздел FAQ

Давайте стилизуем ваши формы

  • Шаг 1. Установите / активируйте плагин стиля Contact Form 7
  • Шаг 2: Перейдите к CF7 Styler, который находится в подменю «Контакт».

** Pst.Если вам нравятся некоторые примеры форм, которые уже подключены к [Klick Tipp, немецкий поставщик услуг электронной почты и SMS] (https://www. klick-tipp.com/15194), получите также WP2LEADS.

Если вы используете WP2LEADS с активной версией Pro, версия Contact Form 7 Styler Premium бесплатна для вас.

Могу ли я протестировать версию Pro бесплатно?

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

Почему есть премиум-версия?

Мы любим создавать и поддерживать стайлер.
Премиум-версия предназначена для того, чтобы поблагодарить вас и гарантировать, что этот стайлер будет служить вечно.

Как я могу сообщить об ошибке или запросить функцию?

Мелани, Влад, Тобиас просили функции, и вы тоже можете.
Мы более чем рады настроить плагин в соответствии с вашими потребностями.

  • Создавайте видео (пожалуйста, избегайте показывать личные или пользовательские данные) с помощью бесплатного программного обеспечения для демонстрации экрана
  • Поделитесь видео на форуме поддержки или по электронной почте support @ saleswonder. бизнес
  • В большинстве случаев вы получите решение за один день

Могу ли я зарабатывать деньги с помощью плагина стиля Contact Form 7?

  • Да, у нас работает партнерская программа, которая платит вам пожизненную комиссию в размере 35%.
    Вы найдете программу в подменю плагинов в разделе «Контакты» под названием «Аффилиация».
  • Более того, когда вы напишете сообщение в блоге, вы получите профессиональную версию на 12 месяцев и пожизненный партнерский доход в размере 35% по вашей партнерской ссылке (например, 31 евро за продажу пожизненной версии).
  • Вот как получить аффилиат:
  • Другие источники, которые вы также можете использовать: