Разберем плагин для создания форм на сайте wordpress.
С этим плагином легко создаются формы. Вот его официальный сайт там можно почитать все как ее устанавливать и т.д. А мы просто разберем поверхностно как создавать простую форму и чуть ее поднастроить
Создание формы
В общем заходим в формы, добавить новую и у вас создасться такая новая форма
Во вкладке шаблоны формы можно настраивать разные формы, кнопки добавлять и прочее.
Например можно добавить чекбокс:
1 |
[checkbox* checkbox-623 class:my_class use_label_element "one" "two" "three"] |
Добавит обязательно выбор чекбокса одного из трех с именами one two и three
И еще один добавим для выбора одного чекбокса
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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> |
Форму добавляется чере шорткод
Копируем его и вставляем в любую страницу и у нас выводится наша форма
Можно ее заполнять и отправлять, теперь чтобы настроить куда отправлять зайдем во вкладку Письмо в меню нашей созданой формы
Тут важно поле to и поле фром в поле to вводим мэйл на который нужно отправить письмо, а в поле фром указываем мэйл с которого отправляется письмо и в форме такой From <your mail> в скобках твой мэйл
И еще выше мы видим теги. Эти теги id полей, эти теги будут заменены информацией из поля. Например в самом письме можем так добавить
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
От: [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) |
Там где группа тегов они заменятся на несколько значений которые вы выберете.
Можно также файлы привязывать, для них в низу есть специальное поле, туда вставляем шорткоды полей добавления файлов.
[warning]Да тут была ошибка с я отправлял сообщение с одного и мейла на тот же самый, я с mail.ru отправлял и была в письме ошибка, Может у вас будет ошибка какая небудть, лучше наверно на один и тот же мейл с самого мейла не отправлять.[/warning]
В самом незу этот вкладки можно еще настроить второй мейл, например через него мы можем отсылать сообщение пользователю на его mail который от ввел в форме и сообщать ему что форма его отправлена или еще что то. Там внизу есть Письмо 2 Use mail 2. Там настраивается так же как и первое.
На вкладке уведомление при отправки формы, настраиваются сообщения которые будут выводится например об ошибка или еще что то, их можно перевести на любой язык или изменить
Дополнительные настройки не смотрел, читайте на офф сайте, там вроде можно javsScript как то прикручивать и еще что то делать, все это на офф сайте расписано
Изменение стиля формы
Можно стили добавить к вашей форме в общий файл сайта style.css добавив их в конец файла. А можно скачать плагин называется Contact From 7 style. Устанавливаем его, там сразу идет несколько созданых стилей, можно использовать готовый какой то или добавляем новый. Определяем название классов у формы через Inspector браузера.
Добавляем новый, ставил галочку чтобы применился стиль к нашей форме.
Да еще можно добавлять классы и Id к нашим полям формы во вкладке где мы создаем шаблон формы
1 |
[checkbox* checkbox-623 class:my_class use_label_element "one" "two" "three"] |
от здесь class:my_class это добавит класс class = » my_class» такую штуку. А дальше можно от этого класса изменять внутренние классы, например такой записью
.my_class .и какой то класс {} какой то класс это мы смотрим в инспекторе. Это обращение к внутреннему классу.
Да к стати чекбоксы они выводятся подтяд, бывает их нужно упорядочить в несколько колонок. От струкутра такая чекбоксов
1 2 3 4 5 6 7 8 |
<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; Чтобы обтекались по бокам, потому что они ведут себя без этого бывает как блоки на некоторых темах
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.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%; } |
Еще один пример шаблона формы »
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<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"] |
Статью писал конченный ебаклак.