Как да добавите формуляр за контакт към вашия уебсайт или блог на WordPress


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


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

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

Може да звучи много, но не се притеснявайте – ще го поддържаме просто!

Contents

Защо трябва да използвате формуляр за контакт на вашия сайт WordPress?

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

  • Защита от електронна поща – Спамът е вредител. Ще го забележите бързо, когато имате уебсайт на WordPress, който използва коментари в блога. Едно нещо, което спамерите правят, е автоматично сканиране на уебсайтове за незащитени имейл адреси, така че те да могат да ги добавят в своите пощенски списъци. Формите за контакт не позволяват това да се случи, като дава шанс на посетителите да се свържат, без да публикуват адреса си онлайн.
  • Поискайте правилната информация – Хората, които се свързват с вас, не винаги изпращат цялата необходима информация. С формуляр за контакт можете конкретно да го поискате предварително. Също така ви дава начин да филтрирате запитвания, например по тип. Това улеснява живота ви и намалява много напред-назад.
  • Информирайте клиентите си – Обратно, формулярите за контакт също могат да действат като първа точка на информация. Можете да включите информация за обаждащите се, за да ги уведомите за очакваното време за отговор и стъпките, които могат да предприемат предварително, за да отговорят на запитването си. Това намалява вероятността от множество имейли от един и същи нетърпелив човек.

Убедени, че формулярите за контакт са полезни? Тогава да преминем към практическата част на този урок.

Как да добавите формуляр за контакт в WordPress с формуляр за контакт 7

Има много WordPress плъгини, за да добавите контактна форма към вашия сайт, безплатна и премия. Ще поговорим за няколко от тях по-късно в тази статия. За следващия урок ще използваме Форма за контакт 7.

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

Ето защо ние го избираме, за да ви научим как да добавите контактна форма в WordPress.

Стъпка 1. Инсталирайте контактната форма 7 Plugin

Инсталирането на Contact Form 7 е толкова лесно, колкото всеки друг WordPress плъгин. Просто влезте в сайта си, отидете на Приставки> Добавяне на нови и въведете името му в полето за търсене.

инсталирайте контактна форма 7, за да добавите контактна форма в wordpress

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

Стъпка 2. Създайте своя нов формуляр за контакт

След инсталирането ще намерите нов елемент от менюто контакт в страничната лента на WordPress. Щракването върху него ще ви отведе до този екран.

контактна форма 7 главно меню

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

По-важното е, че ще намерите списък на всички форми за контакт на вашия сайт. Тя включва примерна форма, която теоретично можете да използвате веднага. Или щракнете върху него, за да започнете редактиране, или натиснете Добави нов в горната част на екрана. И двете ще ви докарат тук:

как да добавите контактна форма към wordpress с формуляр за контакт 7

Изглежда малко гадно в началото, но не се притеснявайте – скоро ще го разберете.

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

Формата за контакт 7 създава тези с малко HTML плюс персонализирани маркери. Всичко между тях обозначава едно поле от вашата форма за контакт плюс текстовото описание, което му принадлежи. Действителните полета се създават от това, което е между квадратните скоби.

Това означава ли, че за да създадете форма за контакт, трябва да научите езици за програмиране? За щастие, плъгинът идва с инструменти за генериране на автоматично.

Стъпка 3. Конфигурирайте формата си

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

Конфигурация на формуляра за контакт
Пример за формуляр „добавете контактна форма в WordPress“

Всичко е стандартно. Нека да кажем, че искате да добавите падащо меню, за да изберете целта да се свържете с вас. По този начин можете да видите веднага съобщенията, на които да дадете приоритет.

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

Кликнете върху падащото меню в лентата с инструменти отгоре. Преминава ви към това меню:

контактна форма 7 създаване на падащо меню

Ето как да попълните различни полета:

  • Тип на полето – Изберете дали полето е необходимо за изпращане на формата за контакт или не.
  • име – Това означава името, използвано в маркера. Той няма да се показва за посетители, но ви улеснява да запомните целта на маркера и също да конфигурирате имейла, изпратен до вашия акаунт по-късно.
  • Настроики – Въведете опциите, достъпни за посетителите, използвайки падащото меню. Поставете по един на ред. Освен това имате възможност да разрешите множество селекции и да използвате празен елемент по подразбиране.
  • Атрибут Id / Class – На това място можете да зададете CSS клас или ID на полето. Това е много полезно за персонализиран стайлинг. Ще поговорим за това по-късно.

Ето как го попълнихме:

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

Когато сте доволни, кликнете върху Вмъкване на маркер за да го поставите във формата.

добавете маркери на формуляри за падащото меню към контакт 7

Имайте предвид, че след като разберете как работят маркерите, можете също да ги създадете или да направите промени в текстовото поле. Например, за да направите новото падащо меню не задължително поле, можете просто да изтриете звездичката след изберете. Колкото повече използвате приставката, толкова по-добре разбирате как работи.

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

добавете html код, за да формирате маркери във формата за контакт 7

Стъпка 4. Редактиране на настройките за имейл

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

конфигуриране на формуляра за връзка 7 поща

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

Ето какво означава всяко поле:

  • Да се – имейл адресът, на който ще бъдат изпращани съобщенията. Обикновено можете да оставите това, каквото е.
  • от – Изпращач на имейла. По подразбиране е зададено на името на лицето, използващо вашата форма за контакт.
  • Допълнителни заглавки – Място за допълнителни полета за заглавие на съобщението. Стандартните настройки изпращат вашия отговор на имейла на човека, който се свързва с вас, а не на имейла, от който е дошъл (т.е. вашия сайт), когато натиснете Отговор. Възможно е също така да поставете адресатите в CC или BCC там.
  • Съобщение – Тялото на имейла, който ще получите.
  • Изключете редовете с празни пощенски маркери от изхода – Когато проверите това, ако някой от използваните маркери е празен, приставката ще ги изключи от съобщението.
  • Използвайте HTML тип съдържание – По подразбиране съобщението се изпраща в обикновен текст. Поставете отметка в това поле, за да използвате HTML вместо него.
  • Прикачени файлове – Ако формата ви позволява качване на файлове, маркерите за тези файлове принадлежат тук. Можете да го използвате и за прикачете файлове, хоствани на вашия сървър.
  • Поща (2) – Допълнителен шаблон за електронна поща, често използван като автоматичен отговор. Поставете отметка, за да активирате.

Стандартните опции са доста добри. Единственото, което трябва да променим за нашия пример, е темата.

настройте филтър в вашата пощенска програма

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

Стъпка 5. Добавете формуляр съобщения

На следващо място е Съобщения раздел. Имате възможност да конфигурирате съобщенията, които посетителите ви могат да срещнат, докато използват формата.

конфигурирайте формулярните съобщения за формуляр за контакт 7

Това са съобщения за грешки, съобщения за успех или просто намеци за правилното използване на формата. Откриваме, че те вече са доста добри, така че обикновено оставяме всичко такова, каквото е. Ако имате причина да промените някое от тях (например, за да съответствате на тона на вашия уебсайт), не се колебайте да го направите.

Стъпка 6. Персонализирайте допълнителни настройки

Накрая стигате до допълнителните настройки.

контактна форма 7 допълнителни настройки

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

Стъпка 7. Добавете формуляра към вашия уебсайт

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

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

След като запазите формата си, на екрана ще се появи кратък код:

контактна форма 7 кратък код, за да добавите форма за контакт към wordpress

Ще го използвате, за да поставите формата, където искате. Първото нещо, което искате да направите, е да го маркирате и копирате. След като свършите, отидете на страницата, където искате да поставите формуляра. Например, можете просто да създадете нова страница и да я кръстите контакт. Поставете краткия код в редактора на WordPress.

контактна форма 7 кратък код в редактор на wordpress

Когато вече публикувате страницата и отидете на предния край:

Форма за контакт 7 форма на страница

Ето го. Забележете падащото меню, което създадохме по-рано. Вече е част от формата за контакт, ако е необходимо.

Просто, нали? Плюс това можете да използвате същия метод, за да поставите формата навсякъде другаде.

Стъпка 8. Включете контактна форма в странична лента (незадължително)

Няма нищо по-лесно от поставянето на формата за контакт в странична лента. Просто отидете на Външен вид> Джаджи. Добавете текстова джаджа във всяка област, която искате да се покаже, и поставете краткия код.

добавете формуляр за контакт към WordPress джаджа

Не забравяйте да запазите джаджата! Когато се върнете в предния край на вашия сайт, ето:

форма за контакт в WordPress джаджа

Току-що сте усвоили основите на добавяне на контактна форма в WordPress. Все още не сме в края. Има още куп неща, които трябва да направите, за да подобрите допълнително формулярите си.

Форми за контакт в WordPress – Следващи стъпки

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

Промяна на дизайна на формата

В идеалния случай няма нужда да променяте стила на вашата форма за контакт. Това е вероятно в нашия случай, защото формуляр за контакт 7 използва стандартен HTML код като етикет или вход [тип = "текст"] за да създадете формулярни полета.

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

Както бе споменато, формулярите за контакт 7 имат стандартна HTML маркировка. Можете просто да промените свързания CSS и по този начин изглеждат формулярите. Само имайте предвид, че това има последствия и за други полета за въвеждане на вашия сайт, които споделят същата маркировка.

Освен това всеки формуляр, създаден с Contact Form 7, се предлага с специфичен за приставката код. Можете да намерите кода, като използвате инструментите за програмисти във вашия браузър.

променете дизайна на формата за контакт чрез css

Например, можете да направите промени в стила на цялата форма, като използвате .wpc7 форма CSS клас. Имайте предвид, че има последици за всички формуляри, създадени с Формуляр за контакт 7, но оставя други полета за въвеждане на вашия сайт недокоснати.

Ако искате да получите още по-конкретни и да промените стила само за конкретни форми, имате късмет. Както можете да видите от екранната снимка по-горе, всеки формуляр за контакт 7 получава собствен CSS идентификатор.

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

добавете css class и id към формуляр за контакт 7

С тях можете да ги насочите още по-конкретно.

Накратко, каквото и да искате да промените дизайна на формулярите си, имате всички инструменти за това.

Прилагане на защита от спам

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

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

За щастие, Контакт формуляр 7 предлага лесни начини за предотвратяване на това. Една от тях е проста: включете тест във формата си, на която ботовете не могат да отговорят, като обикновено уравнение.

контактна форма 7 защита срещу спам чрез тест

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

Освен това има и reCAPTCHA. Това е услуга на Google за борба със спама. Нуждаете се от ключ за API и го интегрирате с формуляр за контакт 7. Намерете инструкции тук. Това може да има последици за защитата на личната информация. Повече за това в следващия раздел.

Можете да използвате маркера reCAPTCHA, за да го добавите към формата си. Производителят на Contact Form 7 също има приставка Captcha, наречена Наистина проста CAPTCHA които можете да използвате за същата цел.

Освен това имате възможност да използвате приставки за трети страни за защита от спам. Най-известният е, разбира се, Akismet и Контакт формуляр 7 предлага подробни инструкции за как да използваме двете заедно.

Има и други, напр Форма за контакт 7 Honeypot или WPBruiser. За последното ви трябва а платено разширение за да работи с Форма за контакт 7. Има и още опции, които лесно можете да намерите.

Важна странична бележка: Форми за контакт и GDPR

Може би сте наясно, че наскоро в Европа има някои промени в законите за поверителност на интернет. На 25 май 2018 г. Общ регламент за защита на данните (GDPR) влезе в сила.

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

Защо това е важно? Формулярите за контакт събират лични данни. Поради тази причина, ако попадате под юрисдикцията на регламентите (и повечето хора правят сега), трябва да обърнете внимание на някои неща.

Първи неща първо: Ние не сме адвокатска кантора!

По-долу ще намерите редица съвети как да направите вашата форма за контакт GDPR съвместима. Тези съвети са съставени според възможностите ни.

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

Добре, толкова за частта „ако се затруднявате, моля, не се връщайте и ни съдете”. Нека да стигнем до съветите!

Съвети, за да направите Вашата форма за контакт GDPR съвместима

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

  1. Не събирайте данни, които не са ви необходими – Формите за контакт ви дават избор кои полета да включите. Ако има данни, от които всъщност не се нуждаете, спрете да ги събирате. По този начин, ако има нарушение, не можете да го загубите.
  2. Деактивира всяко проследяване – Ако използвате контактна форма, която проследява бисквитки, потребителски агенти и / или потребителски IP адреси, трябва да деактивирате това, за да отговаря на GDPR. Формата за контакт 7 на пръв поглед не прави нито едно, така че няма какво да се направи. Проверете вашата форма за контакт по избор, ако използвате нещо друго.
  3. Получете абсолютно съгласие – Добавете начин към формуляра си, за да могат хората да се съгласят да събирате техните данни. Например, Формуляр за контакт 7 предлага и кутия за приемане. Важно: не задавайте квадратчето за отметка да бъде активирано по подразбиране. Потребителите трябва да направят това сами. Също така, включете съобщение, в което се казва какво събирате и с каква цел плюс връзка към вашата политика за поверителност.
  4. Да има политика за поверителност – Като говорим за това, според GDPR всеки професионален уебсайт трябва да показва политика за поверителност, която обяснява какви данни събира и как ги използва. Също така трябва да дадете на посетителите възможност да поискат личните им данни и да ги премахнат. Това е по-сложна тема, отколкото можем да обхванем тук. Използвайте връзката по-долу, за да намерите повече информация.
  5. Внедрете HTTPS – Използването на SSL / HTTPS криптира обмена на данни между браузър и сървър. Това е важно за формулярите за контакт, за да се запазят личните данни. Сега се счита за обичайна практика. Вижте нашето ръководство за това как да го приложите.

От всичко, което прочетохме, горепосоченото трябва да е достатъчно за привеждане на формуляри за контакт в съответствие с новия закон. Разбира се, има още за тази тема за собствениците на уебсайтове. Можете да разберете повече тук и тук.

Други страхотни приставки за формуляр за WordPress

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

Форми на Jetpack (Безплатно)

форми на джетпак

Jetpack е набор от мощни приставки, произведени от WordPress.com (вижте нашето сравнение на WordPress.org с WordPress.com). Те включват модул за създаване на формуляри за контакт. Когато го включите, можете да започнете да въвеждате формуляри в уебсайта си WordPress направо от редактора на публикации и страници.

Ето някои отличителни функции:

  • Бърз и лесен за използване
  • Известия по имейл, за да ви уведомите за изпращането на формуляри
  • Направете всякакви корекции от редактора на WordPress
  • Чудесно решение за създаване на прости форми

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

HappyForms (Безплатно)

Лого на HappyFormHappyForms е сравнително ново на пазара. Той се интегрира с персонализатора на WordPress, което прави старта наистина лесен. Освен това, той има следните характеристики:

  • Лек и бърз
  • Напълно безплатен за използване (но идва с марка)
  • Позволява ви да създавате формуляри чрез влачене и пускане
  • Показва заявки на формуляри в таблото за управление на WordPress
  • Предлага се с вградена защита от спам

Форма за контакт 7 (Безплатно)

Форма за контакт 7

С Contact Form 7 можете да управлявате множество различни форми за контакт с основен лесен за използване интерфейс. Те също имат премиум версия, но това е замислено като дарение. Премията всъщност не прави или дава нищо (освен нова анимация за зареждане с мишка).

  • Бърз и лесен за използване
  • Можете да направите корекции в WordPress
  • Условна логика за формуляри за контакт

Страхотна безплатна опция.

Форми на нинджа (Freemium)

Форми на нинджа

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

  • Лесно се свързвайте с общи услуги за имейл маркетинг
  • Възможност за приемане на плащания чрез вашите формуляри
  • Синхронизирайте формуляри с CRM като Salesforce

Членствата за Ninja Forms струват $ 99 / година и нагоре.

Гравитационни форми (Премия)

гравитационно лого

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

  • Повече от 30 вида полета за формуляри
  • Голямо разнообразие от добавки
  • Качване на файлове
  • Възможността на потребителските изявления да се показват в предния край
  • Форми на много страници
  • Условна логика и усъвършенствани изчисления

Ако се интересувате от Gravity Forms, техните планове започват от $ 59 / година.

Форми на Калдера (Freemium)

форми калдера

Окончателният запис в този списък също ви позволява да създавате форми с графичен интерфейс. Освен това, той има следните характеристики:

  • Дайте възможност на посетителите да изпращат свои собствени публикации
  • Автоматично отговарящи
  • Функции против спам
  • Напълно отзивчиви уеб формуляри

Освен безплатната версия, има и a стартерно издание започвайки от $ 6.24 / месец – $ 74.99 / година.

Форми за контакт с WordPress накратко

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

В тази статия сме разгледали как да добавите контактна форма към WordPress, като използвате Форма за контакт 7. Преминахме над усъвършенствания стил и защита от спам за вашата форма. Освен това, постът обхвана важната тема за спазването на GDPR за формулярите за контакт и съвети как да го постигнем. Накрая разгледахме и редица други отлични плъгини, които можете да използвате, за да добавите контактна форма към вашия WordPress сайт.

Досега знаете всичко необходимо, за да добавите формуляр към собствения си уебсайт. Надяваме се, че това ще доведе до големи възможности и интересни нови контакти.

Имате ли въпроси как да добавите контактна форма към вашия сайт? Ако е така, моля, уведомете ни в секцията за коментари по-долу.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map