Ghidul suprem pentru formularele interactive din e-mail

Cum să construiți un formular interactiv în e-mail

Dar cum implementați exact un formular în campaniile dvs. de e-mail HTML? Să dezvăluim metoda lui Mark pas cu pas:

1. Configurați elementele de bază

Să începem cu un cadru foarte simplu:

La cel mai elementar nivel, există două atribute care fac ca un formular să funcționeze:

• Acțiune
  Aceasta definește pagina de destinație sau destinația către care sunt trimise datele din formular.
• Metodă
  Există două modalități de a obține datele trimise către acea destinație: printr-o solicitare GET sau POST. GET are un suport mai bun în e-mail, dar trebuie să rețineți un lucru: dacă trimiteți date prin metoda GET, practic atașați acele date la o adresă URL, astfel încât datele din formularul trimis vor fi vizibile în câmpul pentru adresa paginii. .

De exemplu, trimiterea prenumelui dvs. prin intermediul formularului înseamnă că creați o adresă URL care arată astfel:

 http://example.com?Fname=Mark

2. Configurați câmpurile formularului

În continuare, va trebui să vă gândiți ce informații doriți să colectați de la abonații dvs. și cum să le traduceți în câmpuri individuale de formular.

Fiecare câmp de formular necesită o etichetă, aceasta este informația care îi spune cititorului de e-mail pentru ce este acest câmp de formular. Pentru un câmp de formular care solicită cititorului prenumele care arată astfel:

Căutați să colectați o intrare de text pentru un element cu id=”fname” – iar eticheta pentru=”fname” le conectează pe cele două. Unii clienți de webmail modifică codul și nu acceptă abordarea for & id. Le place să adauge prefixe la numele clasei și ID-ului dvs., astfel încât ID-ul dvs. ar putea fi modificat, iar atributul dvs. for nu. Rezultatul: eticheta dvs. nu se mai potrivește cu ID-ul dvs. și asta vă distruge formularul. Iată o soluție simplă pentru a preveni acest lucru: înfășurați eticheta în jurul introducerii dvs. astfel:

Veți avea câteva tipuri diferite de introduceri de text din care să alegeți, inclusiv:

 <input type="text">
<input type="email">
<input type="tel">
<input type="number">
<input type="url">
<textarea></textarea>

Selectarea tipului corect de introducere pentru fiecare câmp de formular vă ajută să faceți două lucruri: Când este vizualizat pe mobil, poate schimba aspectul tastaturii pentru a se potrivi cu introducerea necesară. În plus, acolo unde este acceptat, există o validare de bază.

Pentru fiecare informație pe care o trimitem printr-un formular, trebuie să trimitem două lucruri: un nume și o valoare.

• Nume:
  Acesta este numele definit de dezvoltator al unui câmp de formular, acesta este transmis prin șirul URL.
• Valoare:
  Valoarea definită de dezvoltator sau utilizator asociată cu numele din câmpul formularului.

Vă amintiți exemplul nostru de prenume de mai sus? http://example.com?Fname=Mark este adresa URL care trimite prenumele „Mark” (=valoare) pentru câmpul de formular Prenume (=nume).

Să adăugăm o zonă de comentarii (nume=”comment”) la formularul nostru:

Adresa URL rezultată la trimiterea formularului va arăta astfel:

 http://example.com?Fname=Mark&comment=hello

Casete de selectare și butoane radio

Știm cum să setăm introducerea textului, dar ce se întâmplă dacă ați dori să adăugați o casetă de selectare sau un buton radio în formularul dvs.?

Valorile sunt opționale pentru casetele de selectare. Dacă nu definiți o valoare pentru o casetă de selectare, aceasta va fi trimisă ca „pornit” sau „dezactivat”. Funcționează, dar s-ar putea să doriți să actualizați valoarea la diferite formulări, în funcție de modul în care intenționați să gestionați datele la capătul receptor.

De exemplu, iată o casetă de selectare care trimite valoarea „de acord” dacă abonatul dvs. bifează caseta pentru a fi de acord cu termenii și condițiile dvs.:

 http://example.com?tc=agree

Pentru butoanele radio, totuși, sunt necesare valori, iar elementul de nume este cel care grupează butoanele radio. În acest exemplu de aici, aveți două grupuri de butoane radio - unul pentru radio și unul pentru TV - și veți putea alege un post din fiecare grup.

Ai observat bifata pe primul buton radio? Așa marcați butonul radio pe care doriți să îl afișați ca opțiune preselectată.

Opțiuni de grupare împreună

Când căutați să grupați butoanele radio sau casetele de selectare împreună, atunci apar seturile de câmpuri și legendele.

• Seturile de câmpuri vor grupa articolele asociate împreună
• Legendele sunt practic etichete pentru acele articole

În acest exemplu de aici, vom putea alege între opțiunile roșu și albastru dintr-un set de butoane radio care se referă la alegerea culorii tale preferate.

Seturile de câmpuri sunt utile dacă doriți să grupați diferite informații, cum ar fi o adresă: stradă, cod poștal, stat și țară.

Stilul implicit pentru butoanele radio și casetele de selectare nu este grozav. Ambele sunt afișate destul de mici, ceea ce le face inaccesibile pentru mulți cititori. De aceea, mai sus adăugăm o clasă div care ne va permite să înlocuim stilul implicit al butonului radio cu stilurile la alegerea noastră.

Suprascrierea stilului implicit al butonului radio

Suprascrierea stilurilor implicite pentru butoanele radio implică câțiva pași. Să le defalcăm unul câte unul.

În primul rând, veți dori să ascundeți butonul radio implicit folosind aceste stiluri:

Acum că am ascuns intrările implicite, trebuie să înlocuim starea de intrare a focalizării cu propriile stiluri, adăugând evidențieri sau un contur elementului pe care se concentrează cititorul:

Și, în cele din urmă, ne stilăm butoanele așa cum le stilizați în mod normal. Dacă utilizați efecte de trecere cu mouse-ul pentru a vă stila butoanele și pentru a încuraja clicurile, puteți face acest lucru și aici. În plus, veți dori să adăugați stiluri la starea „verificată” a butoanelor radio, astfel încât să fie ușor să distingeți un buton radio bifat de unul nebifat.

3. Transmiterea de informații ascunse

Este probabil să existe anumite informații pe care ați dori să le treceți prin formular fără ca utilizatorul să fie nevoit să le introducă manual în formular. Acestea pot fi elemente precum nume, ID-uri de utilizator sau adrese de e-mail, de exemplu. Puteți transmite informații ascunse în culise folosind tipul de intrare „ascuns” - această acțiune nu poate fi văzută sau modificată de utilizator:

De exemplu, acest fragment de cod va transmite un ID de utilizator astfel:

 http://example.com?user-id=U12345

4. Trimiterea formularului

Bine — forma ta este construită. Acum, avem nevoie de o modalitate prin care cititorul să o trimită . Există două moduri de a face asta: tipul de intrare „trimite” și un tip de buton „trimite”:

Ambele funcționează foarte asemănător, dar diferența este locul în care puneți textul. Dacă parcurgeți traseul tipului de intrare, veți dori să setați textul ca valoare. Dacă utilizați butonul, copia trimisă va merge chiar înainte de eticheta de închidere a butonului.

Strategii de rezervă pentru formularele interactive din e-mail

Pentru fiecare e-mail interactiv este esențial să existe soluții alternative. Soluțiile de rezervă asigură că în toți clienții de e-mail în care formularele nu funcționează perfect, îl ascundem și afișăm în schimb o rezervă. Deoarece suportul mobil pentru formulare este încă neregulat, optăm să ne ascundem formularele pe mobil pentru toate e-mailurile Litmus și să țintim experiența interactivă completă către cei mai populari clienți de e-mail care acceptă funcționalitatea formularelor interactive. Cu alte cuvinte, am implementat cod care...

• Afișează forma interactivă în
  • Apple Mail
  • Gmail (web pentru desktop)
  • Yahoo (web pentru desktop)
• Afișează alternativa în:
  • Toate Outlook și Windows Mail
  • Toate dispozitivele mobile

Iată cum arată în cod:

CSS

HTML

Exemple: vedeți formularele interactive din e-mail în acțiune

Ești curios să vezi totul în acțiune?

În acest e-mail, am adăugat un formular pentru a facilita cititorilor să ia legătura cu unul dintre experții noștri Litmus:

Indiana Pacers le cer fanilor feedback, chiar în e-mail:

Dar dacă nu pot codifica?

Interactivitatea și mai ales elementele avansate, cum ar fi formele interactive, necesită destul de multe abilități de codare. Dacă sunteți deja un dezvoltator de e-mail care se simte bine cu codul de e-mail, sperăm că acest ghid pas cu pas vă va ajuta să implementați formulare în următoarea campanie.

Pentru mulți agenți de marketing și dezvoltatori de e-mail în primele etape ale carierei lor, implementarea elementelor interactive, cum ar fi formularele, poate fi considerată o sarcină imposibilă. Dar există câteva vești bune pentru tine, cel puțin dacă îți construiești e-mailul în Salesforce Marketing Cloud. Mark și echipa sa de la Salesforce au adăugat recent blocuri de formulare la Content Builder al Salesforce, permițând specialiștilor în marketing să adauge formulare la e-mailurile lor și să le personalizeze în funcție de nevoile lor - nu sunt necesare abilități de codare. Dacă sunteți client Salesforce, vă încurajăm să îl verificați!

Mai mulți furnizori de servicii de e-mail vor face mai ușor pentru marketeri să implementeze elemente interactive în campaniile lor? Lansarea blocurilor de formulare dinamice Salesforce ar putea fi un prim pas în această direcție.