Формуляри, бутони и уиджети

Модул 4: Страници, външен вид и функции · Време за четене: 8 минути

Цел на урока: След този урок ще можете да настроите формата за контакт (получател, потвърждение, страница с благодарност, защита от спам, бюлетин и начин на изпращане), да поставите плаващи бутони за WhatsApp и за контакт, да вградите уиджет от друга услуга и ще знаете кога са подходящи Собствен код и Собствен HTML.

Основни понятия: форма за контакт, получател, имейл за потвърждение, страница с благодарност, captcha, двойно потвърждение (double opt-in), начин на изпращане, плаващ бутон, уиджет, код за вграждане, съгласие, Собствен код, Собствен HTML

Формата за контакт: две места

Формулярът на Вашия сайт се състои от две части. Самият формуляр, с полетата, които посетителят попълва, е на страница. Поставяте го със секцията Контакт (чрез Секции или Добавяне на секция) или чрез чата. Какво се случва, когато някой натисне бутона за изпращане, настройвате в Настройки > Формуляри. Този панел винаги настройвате сами; чатът не го прави.

Формулярът винаги има полетата име, имейл и съобщение. Чрез чата добавяте допълнителни полета, най-много осем: текстово поле, падащ списък (например "Вътре или отвън?"), имейл, телефон, дълго текстово поле, дата или число. Поле за изпращане на файл или снимка не съществува. Ако Schildersbedrijf Example иска да получава снимки на обекта, той пише в текста за благодарност: "Можете спокойно да изпратите снимки на нашия имейл адрес."

Важно: на безплатния сайт без пакет формулярът се вижда, но е неактивен (в сиво) и не изпраща имейл. Формулярите наистина изпращат съобщения едва когато сайтът Ви е в пакет AI Builder. Настройките по-долу обаче можете да подготвите отсега; тогава те се използват веднага.

Настройки > Формуляри

Панелът има пет блока.

Получаване на съобщения. В Изпращане на съобщенията до въвеждате имейл адреса, на който да пристигат попълнените формуляри. Ако го оставите празно, те отиват на имейл адреса на Вашия акаунт в WebOké. Попълнете го съзнателно. В Тема на имейла избирате темата (ако е празно: "Ново съобщение чрез Вашия уебсайт"). В След изпращане избирате Показване на благодарност със собствен текст или Пренасочване към страница: страница с благодарност, която създавате сами и не включвате в менюто (урок 4.1). Така по-късно можете да измервате колко често се изпраща формулярът.

Изпращане чрез. Как се изпраща имейлът. Сървър на WebOké работи веднага, с подател noreply@weboke.site. Препоръчва се Вашият собствен имейл адрес (SMTP): тогава имейлът идва от Вашия собствен домейн и по-рядко попада в спама. С Настройте го вместо мен конструкторът създава този адрес на Вашия домейн. При собствения имейл адрес можете да изберете и имейл услуга, например Postmark, Brevo, Mailgun или SendGrid. Защо подателят е толкова важен, ще прочетете в урок 5.3.

Потвърждение за посетителя. Включете Изпращане на копие на посетителя и посетителят ще получи имейл за потвърждение. Това често е първото съобщение, което някой получава от Вас. Избирате темата, Вашият текст (с {naam} за името на посетителя), Подпис и дали попълненото съобщение да бъде приложено. Конструкторът оформя текста Ви в стила на сайта, с Вашето лого. С Нека AI напише този текст получавате предложение.

Спиране на спама. Всеки формуляр винаги има невидима проверка: скрито поле и времево ограничение. Тя спира по-голямата част от спама, без посетителите да забележат нещо. Ако все пак получавате много спам, изберете допълнителна проверка, captcha: Cloudflare Turnstile или hCaptcha. За целта създавате безплатен акаунт в съответната услуга и въвеждате Site key и Secret key. Включвайте captcha само когато е необходимо: всяка допълнителна стъпка Ви струва посетители.

Бюлетин. Можете да добавите отметка във формуляра, с която посетителите се абонират в Mailchimp, Laposta, Brevo или MailerLite. Добавят се само хората, които сами поставят отметката. Винаги с двойно потвърждение: посетителят първо потвърждава чрез имейл. В Laposta и MailerLite включвате това сами в самата услуга; конструкторът Ви казва къде. Без двойно потвърждение всеки може да добави чужди адреси към Вашия списък.

Освен това: един посетител може да изпрати най-много 5 съобщения на час. Ако имате политика за поверителност, под формуляра се показва връзка към нея. Формулярът събира лични данни; какво трябва да уредите за това, ще намерите в урок 7.1.

Капан: след всяка промяна тествайте формуляра сами, от адрес, различен от адреса за получаване. Проверете и папката със спам, както и дали потвърждението стига до "посетителя".

Плаващи бутони

В Настройки > Бутони поставяте бутони, които остават видими долу на всяка страница, вдясно или вляво (Ъгъл: Долу вдясно или Долу вляво).

• Номер в WhatsApp: в международен формат, с кода на държавата (например +359 за български номер или +31 за нидерландски) и без нулата в началото. Ако го оставите празно, няма бутон за WhatsApp. Можете да добавите Предварително попълнено съобщение, например "Бих искал оферта за бояджийски работи." Бутонът отваря разговор с Вашия номер.
• Плаващ бутон за контакт: отваря формата Ви за контакт в прозорец. Съобщението пристига на същия адрес като формуляра Ви. Избирате Текст на бутона.

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

Внимание: бутонът за WhatsApp обещава бърз отговор. Ако четете WhatsApp само вечер, по-добре изберете бутона за контакт.

Уиджети от други услуги

Уиджетът е част от друга услуга на Вашата страница: видео от YouTube, карта от Google Maps, планер за срещи от Calendly, Вашият Instagram, плейлист от Spotify. За много услуги е достатъчна връзката; конструкторът сам създава плейъра или формуляра. Примери: YouTube, Vimeo, Spotify, Calendly, Google Maps (достатъчен е адресът), Google Calendar, Instagram и TikTok (достатъчно е Вашето @име) и Google Forms. За други услуги, например Salonized, Trustpilot или Bandcamp, поставяте кода за вграждане: парчето код, което получавате от съответната услуга, за да го сложите на уебсайт.

Ето как: кажете го в чата заедно с връзката ("сложете картата с маршрута под блока за контакт, адрес ул. Главна 1"), поставете кода в чата или изберете секцията Уиджет в Секции. Конструкторът разпознава услугата, предлага височина и заглавие и Ви предупреждава, ако нещо няма да работи. Ако оставите AI да го постави, това е задача и струва редакции; предварително виждате колко. Вече поставен уиджет променяте с Редактиране на кода върху блока в прегледа.

Три неща, които трябва да знаете:

1. Уиджетът се зарежда едва след съгласие. Услугите на други доставчици често поставят бисквитки или проследяват посетителите. Когато банерът за бисквитки е включен, уиджетът се зарежда едва когато посетителят даде съгласие за съответния вид бисквитки. Услугата автоматично се появява в банера за бисквитки при "Какво работи на сайта Ви сега". След това проверете и политиката си за поверителност (уроци 7.1 и 7.2).
2. Google Calendar трябва да е публичен. Личен календар не може да бъде видян от никого другиго. В Google Calendar направете публичен само отделен календар с това, което посетителите могат да виждат, никога личния си календар.
3. Небезопасен код не се поставя. Код, който може да препраща данни на посетителите, прикрива какво прави или зарежда нещо от непознат уебсайт, AI не поставя на сайта Ви. Той обяснява защо.

Собствен код и Собствен HTML накратко

За напреднали има две места.

Собствен код се намира най-долу в Настройки > Интеграции: код, който трябва да е на всяка страница, В head на всяка страница или Най-долу на всяка страница. Например скриптът за зареждане на чат услуга или на уиджет за отзиви. Този код конструкторът не проверява ("Ние не проверяваме този код"). Известните услуги банерът за бисквитки задържа, докато има съгласие. Отбелязвайте Този код е задължителен само за код, който не проследява посетители, защото тогава той се зарежда веднага. В прегледа в конструктора собственият код не се изпълнява, а на истинския Ви сайт се изпълнява. На безплатния сайт собственият код не работи. За идентификатор за измерване като Google Analytics не използвате Собствен код, а специалното поле в Интеграции (урок 7.2).

Собствен HTML е секция в Секции. Поставяте собствен HTML и евентуално CSS и по-късно го променяте с Редактиране на HTML. Цветовете и шрифтовете следват фирмения Ви стил. Скриптове, iframe и формуляри тук не работят; за тях използвайте уиджет.

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

В конструктора: ето как

1. Поставете секцията Контакт с формуляр на страницата си за контакт.
2. Отворете Настройки > Формуляри. Попълнете Изпращане на съобщенията до.
3. В Изпращане чрез изберете собствения си имейл адрес или оставете сървъра на WebOké, докато домейнът Ви е готов (урок 5.3).
4. Включете Изпращане на копие на посетителя и напишете свой текст.
5. В След изпращане изберете благодарност или страница с благодарност.
6. При нужда поставете бутон за WhatsApp или за контакт в Настройки > Бутони.
7. Публикувайте сайта си онлайн и изпратете тестово съобщение.

Обобщение

• Формулярът е на страница; какво става с него, уреждате в Настройки > Формуляри.
• Попълнете съзнателно Изпращане на съобщенията до; за подател за предпочитане изберете собствения си имейл адрес.
• На безплатния сайт формулярът не изпраща имейл; прикачване на файл никога не е възможно.
• Плаващите бутони за WhatsApp и контакт са в Настройки > Бутони.
• Уиджетите се зареждат едва след съгласие; Собствен код и Собствен HTML са за напреднали.

Тест

Задача

Задача D4.3: Вашата форма за контакт и една джаджа (widget). Настройте формуляра си изцяло и поставете един уиджет, който наистина добавя нещо.

Списък за проверка:

• [ ] секция Контакт с формуляр на страницата Ви за контакт;
• [ ] Изпращане на съобщенията до е попълнено с адрес, който четете всеки ден;
• [ ] избран е начин на изпращане и разбирате защо;
• [ ] потвърждение за посетителя със собствен текст;
• [ ] настроена е благодарност или страница с благодарност;
• [ ] поставен е един уиджет (например карта или планер за срещи) и сте видели, че е в банера за бисквитки;
• [ ] сайтът е онлайн и е изпратено тестово съобщение (само с пакет; на безплатния сайт проверявате настройките).

Въпроси:

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

След "готово" ще видите примерен отговор: Schildersbedrijf Example изпраща съобщенията до info@example.com чрез собствения имейл адрес на домейна; уиджетът е карта от Google Maps с адреса, която се зарежда едва след съгласие, а иначе показва поле с бутон за даване на съгласие; тестовото съобщение пристигна, потвърждението също, не в спама.

Прочетете още

• Контактна форма на Вашия уебсайт: изпращане на полетата по имейл и предотвратяване на спам
• Безплатен курс Имейлът в ред: настройка и добро получаване 7.3: Поща от Вашия уебсайт и формуляри
• Безплатен курс Имейлът в ред: настройка и добро получаване 7.2: Съгласие, отписване и чист списък @@ОМСКАНИЕ@@
• Използване на Click to chat (Помощен център на WhatsApp): https://faq.whatsapp.com/5913398998672934
• Create & manage a public Google calendar (Помощ за Google Calendar, на английски): https://support.google.com/calendar/answer/37083