Начало > Помощен център > Други > Mailchimp - създаване на формуляр за регистрация

Mailchimp - създаване на формуляр за регистрация

Помощен център

Mailchimp - създаване на формуляр за регистрация

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

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

Най-напред нека прегледаме панела с основните настройки. За да го достъпите кликнете Audience > Manage Audience > Settings:

Достъп до Mailchimp Settings

След това кликнете линка в падащото меню Settings > Audience name and defaults или линка Audience name and defaults както е показано на изображението:

Достъп до страницата Audience name and defaults

Секция Audience name and campaign defaults съдържа следните настройки:

Настройки на страницата Audience name and defaults

  • Audience name - в това поле трябва да въведете заглавието на вашата форма за регистрация (по подразбиране се зарежда името на бюлетина, което може да промените).
  • Audience ID - някои плъгини или приложения може да изискат идентификационния номер Audience ID, който трябва да копирате оттук.

Form settings - в тази секция има три важни настройки, които препоръчаме да маркирате с отметка:

Настройки в секция Form settings

  • Enable double opt-in - системата изпраща имейл за потвърждение на контактите, когато се абонират за вашия бюлетин.
  • Enable reCAPTCHA - проверката с reCAPTCHA предотвратява автоматичното добавяне на спам-ботове към вашата аудитория.
  • Enable GDPR fields - персонализиране на формулярите за регистрация за да отговарят на изискванията на GDPR. Когато е активиран GDPR, формулярът показва юридически текст по подразбиране. Вие може да промените правния текст и наличните опции през Form Builder.

В секция Campaign defaults имате достъп до следните настройки:

Настройки в секция Campaign defaults

  • Default From name - името, от което се изпращат имейлите ви. Използвайте име, което вашите абонатите ще разпознават лесно.
  • Default From email address - съдържа вашия имейл адрес, който може да получава отговори на имейли. Проверявайте го редовно, за да поддържате връзка с аудиторията си.
  • Default Email subject (Optional) - вие ще създавате персонализирана тема на всяка отделна кампания, затова полето може да остане празно.
  • Campaign URL settings - опцията е налична само за платените планове на Mailchimp.
  • Send a final welcome email - изпратете автоматичен имейл, който да приветства новите контакти, които се добавят към аудиторията ви. Съдържанието на този имейл може да се редактира в forms designer.
  • Let users pick plain-text or HTML emails - опцията позволява на контактите да посочат при регистрацията в какъв формат (обикновен текст или HTML) желаят да получават вашите имейли.
  • Send unsubscribe confirmations to subscribers - при маркиране на опцията, системата изпраща последен имейл за да уведоми контактите, че са се отписали от вашия бюлетин. Съобщенията са полезни в случаите, когато абонатите случайно бъде отписан от някого, на когото са препратили кампания, например.

Секция New subscriber notifications:

Настройки в секция New subscriber notifications

Системата изпраща автоматични съобщения до посочен от вас имейл/и за да ви информира при записване или отписване на абонат.

В полето Email subscribe/unsubscribe notifications to: въведете един или повече имейл адреси, за да получавате тези съобщения. Ще получавате отделно съобщение за всеки записан/отписан абонат.

Ако желаете да получавате обобщено съобщение за същите активности веднъж дневно, въведете имейл адрес/и в полето Summary.

Кликнете бутона Save Audience and Campaign Defaults за да запазите настройките.

Кликнете линка Signup forms за да достъпите интерфейса с инструментите за създаване на формуляри за регистрации в Mailchimp:

Изглед на страница Signup forms

  • Form builder - създавайте, проектирайте и превеждайте формуляри за регистрация и имейлите за отговор; управлявайте вашите GDPR настройки.
  • Embedded forms - генерирайте HTML код за вграждане на формуляр за регистрация във вашия сайт или блог.
  • Subscriber pop-up - проектирайте формуляр за регистрация в изскачащ (pop-up) прозорец за вашия сайт или блог.
  • Form integrations - създайте регистрационни форми като използвате инструментите за интегриране.

Form builder

Общ изглед на Form builder

Ще разгледаме до какви инструменти имаме достъп в интерфейса Form builder.

От менюто Forms and response emails трябва да изберете типа на формуляра, който създавате, в примера ние избираме формуляр за регистрация (Signup form).

Ако поставите отметка в полето Let subscribers pick email format (Plain-text or HTML) абонатите ще могат да избират в какъв формат да получават вашия бюлетин - обикновен текст или HTML (може да показва заглавия, изображения, линкове...).

Signup form URL в това поле Mailchimp записва автоматично генериран URL, на който текущия формуляр ще се зарежда. Може да споделяте този линк в социалните си акаунти и през мобилни устройства (QR).

Стигнахме до генериране на самата форма за регистрация. Най-отгоре имаме достъп до три различни интерфейса:

  • Build it - създаване структура на формуляра;
  • Design it - създаване на персонализиран дизайн;
  • Translate it - интерфейс за автоматичен превод;

Build it

Най-отгоре се зарежда заглавието на нашия бюлетин, което сме запазили в Audience name and defaults. Като посочим заглавието с мишката, отдясно се зареждат три линка, чрез които можем да:

  • edit - редактираме заглавието;
  • remove - да премахнем заглавието; ако погрешка кликнете линка заглавието се изтрива веднага, но може да го възстановите от следващия интерфейс като кликнете линка use text;
  • use image - интерфейс за вмъкване на изображение; при кликане се отваря интерфейс за качване (upload) на вашето изображение. Трябва да маркирате изображение и да го вмъкнете (insert) във формуляра. Може да отворите маркираното изображение в редактор и да добавите текст, фон или да промените размерите на изображението. След добавянето на изображението към формуляра имате достъп до същия инструмент за редактиране през линка change:

Изглед на редактора за изображения

В следващото поле може да въведете кратко описание на бюлетина като кликнете в полето и въведете подходящия текст в pop-up редактора.

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

За да премахнете поле кликнете върху етикета или в полето - ще се заредят две икони плюс (+) и минус (-):

Премахване на поле от формуляра

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

Потвърждение на премахването

При кликане върху иконата плюс (+) полето се дублира.

Ако кликнете в дублираното поле и след това кликнете линка Field settings в десния панел, може да промените името на полето и неговите настройки - да стане невидимо, да бъде задължително и т.н.

Настройки на поле Field settings

При настройване на GDPR полета трябва да създадете поне едно поле и да поставите отметка пред настройката Require at least one option.

За да запазите настройките на новото поле кликнете бутона Save Field.

Design it

В следващия раздел имаме на разположение няколко дизайн инструмента, с които да променим скучния дизайн по подразбиране в четири основни области - Page, Body, Forms и MonkeyRewards. Като кликнем върху една от областите на следващия ред се зарежда елемент от дизайна, чиито CSS атрибути може да променяме.

В примера променихме големината и цвета на описанието, както и фона на страницата с формуляра:

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

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

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

Translate it

Интерфейсът за превеждане на формуляри предлага частичен превод на български, който може да активирате през падащото меню Set default language и кликнете бутона Save Translation Settings. От всички полета във формуляра само текста на бутона Абониране ще се промени ако извършите промяната на езика по този начин:

Изглед на инструмента Translate it

За да промените почти целия текст във формуляра препоръчаме да го направите от полетата в панела Field settings в интерфейса Build it:

Промяна на текст през Field settings

По същия начин изглежда регистрационния формуляр като се зареди през браузър с посочения в секция Signup form URL адрес:

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

Дотук разгледахме как може да създадем регистрационна форма през интерфейса Form builder, как да приложим различни дизайн техники за да изглежда по желания от нас начин и как да заредим формулярa в браузър.

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

Embedded forms

Mailchimp предлага четири вградени опции за проектиране на формуляри за регистрация:

  • Classic Form - класическия формуляр показва всички видими полета;
  • Condensed Form - кондензирания формуляр показва само полето Email адрес и е подходящ за ограничени пространства;
  • Horizontal Form - хоризонталния формуляр подрежда поле Email адрес и бутон Subscribe в хоризонтален ред;
  • Unstyled Form - нестилизирания формуляр показва само суров HTML код без CSS или JavaScript. За да съчетаете визуалните елементи на формуляра с точния дизайн на уебсайта си, трябва да промените кода на формуляра, след като го добавите към сайта.

Нека първо разгледаме наличните опции в левия панел.

Общ изглед на Embedded forms

  • Include form title - въведете името на бюлетина.
  • Show only required fields - показване само на задължителните полета. Може да редактирате настройките на полетата в интерфейса form builder.
  • Show all fields - показване на всички полета.
  • Show interest group fields - показва наличните групи в аудиторията за да избере абоната към коя група да се присъедини (препоръчаме да изключите опцията).
  • Show required field indicators - показване на звездичка до задължителните полета.
  • Show format options - дава възможност на потребителите да избират формата на имейлите.
  • GDPR Fields Enabled - показва статуса на GDPR настройките.
  • Form width - настройка за ширината на формуляра, препоръчаме да оставите полето празно.
  • Disable all JavaScript - премахва валидиране на полетата (не маркирайте).
  • Include archive link - показва архивни страници на вашите кампании (не маркирайте).
  • Include MonkeyRewards link - MonkeyRewards са кредити, които печелите, когато насочвате нови клиенти към Mailchimp. Mailchimp изисква всички безплатни профили да включват MonkeyRewards в имейл кампании и формуляри за регистрация (маркирайте това поле).

За да добавим кода на формуляра в нашия сайт трябва да кликнем в полето Copy/paste onto your site и да копираме кода в клипборда. След това в страницата на сайта трябва да поставим (paste) същия код.

В примера използваме статичен Bootstrap 4 HTML сайт и във файла contacts.html поставяме кода от Mailchimp. Тъй като имаме достъп до целия код тук може да преведем целия текст във формуляра.

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

Създаване на тестова регистрация

Mailchimp e изпратил писмо в контактната поща на абоната и той трябва да потвърди абонамента като кликне линка в писмото:

Изпратено писмо на пощата на абоната

Абоната трябва да кликне бутона Да, включи ме в този списък:

Потвърждение на регистрацията от писмото

Следва проверка в reCaptcha за предотвратяване на автоматични регистрации на ботове:

Проверка от reCaptcha

Потвърждение за успешно завършен абонамент:

Потвърждение за успешен абонамент

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

Създаваме нова публикация и поставяме същия код от Mailchimp директно в редактора Gutenberg. Ако ползвате класическия редактор трябва да превключите в текстов режим преди да поставите кода.

Публикуваме и зареждаме страницата в браузър, кода се визуализира коректно:

Регистрация от публикация в WordPress

Извършваме нова регистрация през WordPress, която също завършва с успех:

Новите потребители са в Mailchimp

Subscriber pop-up

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

За да достъпите Subscriber pop-up влезте във вашия Mailchimp акаунт, кликнете Audience > Manage Audience > Signup forms > Subscriber pop-up.

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

Общ изглед на Subscriber pop-up

В десния панел различаваме три главни раздела:

  • Design – тук персонализирате изгледа на pop-up формуляра;
  • Fields – оттук управлявате настройките на полетата;
  • Content – добавяте съдържание към формуляра;

Разделът Design съдържа следните настройки.

В секция Format може да избирате между три типа pop-up формуляр:

  • Modal - затъмнява останалата част от екрана;
  • Slide - прозореца се плъзга на екрана;
  • Fixed - позицията на формуляра е фиксирана на екрана;

В секция Display от падащото меню трябва да изберете момента на появяване на pop-up формулярa (за примера избираме закъснение 5 секунди).

В секция Image alignment трябва да изберете структурата на pop-up формулярa като кликнете някоя от четирите икони. GDPR полетата са съвместими само с изгледите None и Top.

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

В раздел Fields трябва да маркирате полетата, които желаете да се зареждат, както и GDPR полетата:

Изглед на раздел Fields

В раздел Content имате достъп до познатия редактор на изображения ако желаете да добавите такова в pop-up формуляра:

Изглед на раздел Content

Двата редактора в секции Body и Footer позволяват да добавите текст в съответните секции на pop-up формуляра.

След като изберем дизайн, настроим полетата и въведем желания текст, кликаме бутона Generate Code. Зарежда се прозорец, от който копираме кода за добавяне:

Прозорец за копиране на кода

След като добавите кода в сайта си, всички промени, които правите във формуляра, могат да бъдат публикувани директно от редактора тъй като оригиналния бутон Generate Code сега е променен в бутон Publish.

Поставяме кода в HTML сайта, зареждаме страницата и след 5 секунди (посоченият от нас интервал) формуляра се зарежда коректно:

Зареждане на Modal pop-up формуляр

Нека сега да редактираме типа на pop-up формуляра и вместо Modal да заредим Slide. Правим промяната в настройките, кликаме бутона Publish и в следващия прозорец Publish Form кликаме бутона Publish:

Редактиране и публикуване на формуляр

Рефрешваме страницата, но формата не се зарежда. При първото зареждане на pop-up (Modal) Mailchimp е създал бисквитка (cookie) MCPopupClosed в браузъра (Firefox), което може да видим ако кликнем с десен бутон в сайта и в менюто изберем Inspect Element > Storage > Cookies. Маркираме реда с бисквитката, кликаме с десния бутон и избираме някоя от опциите Delete:

Изтриване на бисквитката в браузъра

След изтриването на бисквитката, рефрешваме страницата и pop-up формуляра се плъзга в долния десен ъгъл на екрана:

Зареждане на Slide pop-up формуляр

При затваряне на формуляра той се плъзга обратно извън екрана.

Последният тип на формуляра Fixed застава след посочения интервал в долната част на екрана и не се премества дори да скролвате съдържанието на страницата:

Зареждане на Fixed pop-up формуляр

Form integrations

Останалите инструменти в панела Form integrations са специфични за доставчиците Wufoo, Squarespace и Facebook.