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

Рубрика: wordpress, Дата: 27 March, 2016, Автор:

Разберем плагин для создания форм на сайте wordpress.
С этим плагином легко создаются формы. Вот его официальный сайт там можно почитать все как ее устанавливать и т.д. А мы просто разберем поверхностно как создавать простую форму и чуть ее поднастроить

Создание формы

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

Например можно добавить чекбокс:

[checkbox* checkbox-623 class:my_class use_label_element "one" "two" "three"]

Добавит обязательно выбор чекбокса одного из трех с именами one two и three
И еще один добавим для выбора одного чекбокса

весь код »

<p>Ваше имя (обязательно)<br />
    [text* your-name] </p>

<p>Ваш e-mail (обязательно)<br />
    [email* your-email] </p>

<p>Тема<br />
    [text your-subject] </p>
<p>first group</p>
[checkbox* checkbox-623 class:my_class use_label_element "one" "two" "three"]
<p>second group</p>
[checkbox* checkbox-625 class:my_class "one 1"]
<p>third group</p>
[checkbox* checkbox-626 class:my_class use_label_element "one" "two" "three" "four" "five" "six"]

<p>Сообщение<br />
    [textarea your-message] </p>

<p>[submit "Отправить"]</p>

Форму добавляется чере шорткод

contact-form-7-shortcodКопируем его и вставляем в любую страницу и у нас выводится наша форма
Contact-form-7-formМожно ее заполнять и отправлять, теперь чтобы настроить куда отправлять зайдем во вкладку Письмо в меню нашей созданой формы
Contact-form-7-mailТут важно поле to и поле фром в поле to вводим мэйл на который нужно отправить письмо, а в поле фром указываем мэйл с которого отправляется письмо и в форме такой From <your mail> в скобках твой мэйл
И еще выше мы видим теги. Эти теги id полей, эти теги будут заменены информацией из поля. Например в самом письме можем так добавить

Massege Body »

От: [your-name] <[your-email]>
Тема: [your-subject]

Сообщение:

mane [your-name]
email [your-email]
subject [your-subject]
checkbox1 [checkbox-623]
checkbox2 [checkbox-625]
checkbox3 [checkbox-626]
[your-message]

--
Это сообщение отправлено с сайта Kselax блог (http://www.kselax.ru)

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

Да тут была ошибка с я отправлял сообщение с одного и мейла на тот же самый, я с mail.ru отправлял и была в письме ошибка, Может у вас будет ошибка какая небудть, лучше наверно на один и тот же мейл с самого мейла не отправлять.

В самом незу этот вкладки можно еще настроить второй мейл, например через него мы можем отсылать сообщение пользователю на его mail который от ввел в форме и сообщать ему что форма его отправлена или еще что то. Там внизу есть Письмо 2 Use mail 2. Там настраивается так же как и первое.

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

screen »

Notifications

Дополнительные настройки не смотрел, читайте на офф сайте, там вроде можно javsScript как то прикручивать и еще что то делать, все это на офф сайте расписано

Изменение стиля формы

Можно стили добавить к вашей форме в общий файл сайта style.css добавив их в конец файла. А можно скачать плагин называется Contact From 7 style.  Устанавливаем его, там сразу идет несколько созданых стилей, можно использовать готовый какой то или добавляем новый. Определяем название классов у формы через Inspector браузера.

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

Да еще можно добавлять классы и Id к нашим полям формы во вкладке где мы создаем шаблон формы

[checkbox* checkbox-623 class:my_class use_label_element "one" "two" "three"]

от здесь class:my_class это добавит класс class = ” my_class” такую штуку. А дальше можно от этого класса изменять внутренние классы, например такой записью

.my_class .и какой то класс {} какой то класс это мы смотрим в инспекторе. Это обращение к внутреннему классу.

Да к стати чекбоксы они выводятся подтяд, бывает их нужно упорядочить в несколько колонок. От струкутра такая чекбоксов

<span class = "my_class">
<span class=two></span>
<span class=two></span>
<span class=two></span>
<span class=two></span>
<span class=two></span>
..
</span>

НУ и стиль .my_class .two {}чтобы был в несколько колонок указываем ширину в процентах например для 3 колонок примерно 33% или даже 30%, не понятно че стили работают, если 50% указать, бывает на 2 колонки не делит, нужно указывать 48%, так же и при 33% может не поделить на 3 нужно указать 30%
И обтекание указываем flaw: left; и все у вас в несколько колонок появятся чекбоксы.

Да еще бывает свойства темы портят display блока <span> поэтому чтобы <span> вел себя как блоковый элемент нужно бывает указывать display: inline-block; Чтобы обтекались по бокам, потому что они ведут себя без этого бывает как блоки на некоторых темах

some style »

.wpcf7-form{
    float: left;
}
.wpcf7-form-control-wrap input {
	margin: 5px auto;
}
.wpcf7-checkbox .wpcf7-list-item {
	display: inline-block;
}
.file-foto, .diplomes-scannes{
    display: inline-block;
}
.threek .wpcf7-list-item {
	width: 48%;
}
.three .wpcf7-list-item {
	width: 22%;
}

Еще один пример шаблона формы »

<b>PERSONNE</b>
<p></p>
[text* non placeholder "*nom"]
[text* prenon placeholder "*prenom"]
[text* adresse placeholder "*adresse"]
[text* code-postal placeholder "*code postal"]
[text* lieu placeholder "*lieu"]
[email* adresse-email placeholder "*adresse email"]
[text* numero-portable placeholder "*numero-portable"]
[text* numero-social placeholder "*numero-social"]
<span class="one">*langue maternelle: </span>[checkbox* langue-maternelle use_label_element "francais" "allemand" "anglais" "italien" "espagnol"]
[text* ecoles placeholder "*ecoles"]
[text* universite-branche placeholder "*universite(s)+branche"]
[text* diplome placeholder "*diplome(s)"]
[text* date-de-naissance placeholder "*date de naissance"]
[text* date-de-postulation placeholder "*date de postulation"]
<span class="one">*sex: </span> [checkbox* sex use_label_element "homme" "femme"]

<span class="one">*voiture: </span>[checkbox* voiture use_label_element "oui" "non"]
[text* etat-civil placeholder "*etat civil"]
[text* enfant placeholder "*enfant(s)"]
[text* banque placeholder "*banque"]
[text* IBAN placeholder "*IBAN"]
[text* personalite placeholder "*personalite"]
[text* motivation placeholder "*motivation "]

<b>SOUTIEN</b>

<span class="one">*region(s) d'activite: </span>
[checkbox* region-de-activite class:three use_label_element  "Blonay" "Mont-sur-Lasanne" "Lausanne" "Etoy" "Gland" "Grand-Saconnex" "Collonge-Bellerive" "La Tour-de-Peilz" "Echallens" "Ecublens" "Aubonne" "Nyon" "Geneve" "Vevey Lavaux" "Cossanay" "St. Sulpice" "Rolle" "Coppet" "Vernier" "Pully" "Crissier" "Saint-Prex" "Le Vaud" "Versoix" "Lancy"]

<span class="one">*niveau du soutien: </span>[checkbox* niveau-du-soutien use_label_element "prim" "sec" "coll" "gymn" "uni"]

<p>*matieres: </p>
[checkbox* matieres class:three use_label_element "francais" "allemand" "anglais" "italien" "espagnol" "mathematiques" "physique" "chimie"  "geographie" "histoire" "comptabilite" "gestion" "mechanique" "electrique"]

<span class="one">*langue de soutien:</span>[checkbox* langue-de-soutien use_label_element "francais" "allemand" "anglais" "italien" "espagnol"]
(langues etrangeres au moins niveau B2)

<span class="one">*disponibilite:</span>
[checkbox* disponibilite class:threek use_label_element  "lundi apres-midi" "mardi apres-midi" "mercredi apres-midi" "jeudi apres-midi" "vendredi apres-midi" "samedi apres-midi" "dimanche apres-midi" "lundi soir" "mardi soir" "mercredi soir" "jeudi soir" "vendredi soir" "samedi soir" "dimanche soir"]


<p>*photo (attachee):</p>
[file* file-foto class:file limit:500000]
<p>*diplomes scannes (attaches):</p>
[file* diplomes-scannes class:file limit:500000]
<p></p>
<p></p>
<p></p>
[submit "ENVOYER"]

Комментарии:


Оставить комментарий

Your email address will not be published. Required fields are marked *