Формата за контакт 7 е плъгин WordPress невероятно популярен за създаване на формуляри за контакт. Тя ви позволява да създавате форми без кодиране с HTML. тези форми може да предложи функции като CAPTCHA, изтегляне на файлове, огледални полета и др ...

Въпреки че по подразбиране 7 Contact Form е достатъчен за повечето основни форми за контакт, често се налага да го променяте.

Това променя структурата на формата по подразбиране, за да я направи по-достъпна. Той също така добавя Кратък [отзивчив] над формуляра, така че ако има грешка при подаване на формуляра, това се посочва във формуляра.

Ако никога не сте създавали уебсайт на WordPress, разберете Как да инсталирате WordPress блог с FTP клиент

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

[отговор] Вашето име (задължително) [текст * име на вашето име: вашето име] Вашето имейл (задължително) [имейл * вашето имейл имейл: вашето имейл] Вашето обект [текст вашето име: вашето обект] Вашето съобщение [textarea your-message id: your-message] [изпрати „Изпращане“]

Някои приставки за персонализиране на формата за контакт 7

1. Форма за контакт 7 Style

приставката Форма за контакт 7 Style има редица стилове, от които да избирате.

За потребителите на темата Twenty Fifteen има и съвместим стил.

За да приложите стил, отидете на „ Стилове за контакти> Бързо редактиране Проверете формата, в която искате да приложите стила, след което кликнете върху „ Актуализация ".

Пример за форма за контакт в wordpress
2. Форма за контакт 7 Skins

За да използвате Скините на Форма за обратна връзка 7, създайте нов Формуляр за връзка и превъртете надолу страницата до секцията Кожи. Можете да изберете шаблон и стил за вашата форма.

Ще намерите модели, посветени на формите насъбития, регистрация и известие.

Ето как изглежда формулярът за анкета със стила Topaz, използвайки темата Twenty Fifteen.

Пример за формуляр за контакт 7 формуляр за запитване

3. Материален дизайн за контактна форма

Тези стилове се основават на стила на Материал Design.

Този плъгин предлага да изтриете формуляра по подразбиране и да използвате неговите шорткодове.

Ето пример с темата Hestia. Обърнете внимание на плаващия етикет, когато указателят се премести в поле на формуляра.

Пример за дизайн на материал за контакт 7
Тест на формуляр за контакт 7 на някои Теми на WordPress

Форма за контакт с темата ColorMag WordPress

През повечето време Контактната форма 7 ще наследи стила на вашата WordPress тема. Такъв е случаят с темата Тъмният корал.

Корална тъмна контактна форма

Форма за контакт с темата WordPress ColorMag

Ето формата без персонализиран стил. Той наследява цвета на синия бутон Тема на ColorMag WordPress.

Започнах с качване на снимка, която да се използва като фоново изображение за формуляра, и промяна на кода на етикетите на формуляра от сиво на бяло със синя сянка върху текста.

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

Показването на съобщения за грешка / успех при подаване на формуляра също трябва да се промени, така че да се показват правилно.

GIF, въртящ се при изпращане на формуляра, не се показва правилно, намерих алтернатива на Loading.io и го препратих с CSS.

Ето получената форма:

Ето кода:

div.wpcf7 {марж: 0; подложка: 1.5em; фон: url ('your_background_image_url_here'); -webkit-border-radius: 3px; -moz-border-radius: 3px; граничен радиус: 3px; } .wpcf7 етикет, .wpcf7-submit {цвят: бял; text-shadow: 1px 1px 0px rgba (40, 157, 204, 1); } .wpcf7 .wpcf7-форма за контрол {10px 0 20px 0; } .wpcf7 .wpcf7-submit: hover {фон: #186d8e; } .wpcf7-форма-контрол: фокус {border: 2px solid #289dcc; } div.wpcf7-отговор-изход {фон: #F8F8F8; text-align: center; ширина: 92.5%; марж: 1em 0em 1em 0em; -webkit-border-radius: 3px; -moz-border-radius: 3px; граничен радиус: 3px; } span.wpcf7-не-валиден-съвет {фон: #F8F8F8; дисплей: вграден блок; ширина: авто; пълнеж: 1%; -webkit-border-radius: 3px; -moz-border-radius: 3px; граничен радиус: 3px; } div.wpcf7 .ajax-loader {background-image: url ('your_loading_image_url_here'); ширина: 50px; височина: 50px; }

Ако не е нужно да драскате в кода, предлагаме ви да разгледате нашия 10 WordPress плъгини, за да създадете контактна форма във вашия блог

Открийте и първокласни алтернативи на 3, които ще ви помогнат да създадете вашите форми за контакт. 

1. Формуляр за връзка с W8

W8 Форма за контакт е един от плъгините на Формуляр за връзка най-популярните в WordPress. Той предлага много функции като изпращане до множество получатели, поддръжка за анимации, неограничено създаване на формуляри, различни стилове и голямо разнообразие от допълнителни опции за персонализиране.

Освен това дава на вашия уебсайт или блог професионална система, която улеснява влизането във връзка с вашите клиенти. Ще можете да персонализирате всичките си формуляри според вашите нужди и вкусове.

Изтегляне | демонстрация | уеб хостинг

2. Форма за връзка с нас

Формуляр за връзка с нас е адаптивна приставка за WordPress и прост инструмент, но богат на опции за персонализиране, който ви позволява да покажете ясна и обнадеждаваща форма, на която посетителите ви могат да се свържат с вас, като оставят своето съобщение.

Ще можете да определите необходимите полета, да изберете най-доброто оформление на полетата и да го персонализирате напълно, за да насърчите вашите клиенти или посетители да оставят своите предложения или съобщения.

Трябва само да настроите имейл адреса, на който искате да получавате съобщенията, и да го използвате, за да развиете бизнеса си в най-печелившата посока.

Изтегляне | демонстрация | уеб хостинг

3. Slick Popup Pro

Slick Popup Pro е a Разширение WordPress доста прост и лек, който преобразува всяка форма, създадена от плъгина Форма за обратна връзка 7 в изскачащ прозорец. Тя използва формата и я превръща в красиво и съвършено отзивчиво изскачащо.

Изскачащият формуляр може да има няколко приложения, включително: формуляр за събиране на информация, a Формуляр за връзка, регистрационен формуляр, формуляр за оферта, формуляр за предложение / жалба и други.

Изтегляне | демонстрация | уеб хостинг

Препоръчителни ресурси

Вижте други препоръчани ресурси, които ще ви помогнат по-добре да създавате и управлявате формуляри за контакт на вашия уебсайт или блог. 

Заключение

Voila! Това е всичко за този урок, надявам се да имате още идеи, за да персонализирате формата си за контакт. Не се колебайте споделяйте с приятелите си в любимите си социални мрежи

Ще можете обаче да се консултирате с нас грабене на ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress.

Но междувременно ни кажете за вашите Връзка и предложения в специалния раздел.

...  

Тя ПИН на Pinterest