Hur skapar man interaktiva formulär i email?

Lästid: 6 minuter

Nää, glöm det. Det går inte att lägga till formulär i emails. Eller? Du måste använda JavaScript och det stöds inte av emailklienten. Har du hört detta förut? Men endå undrat, hmm det borde vara möjligt att få med formulär direkt i ett email. Många marknadsförare tror att detta är omöjligt att lyckas med. Det är en MYT! Sanningen är den att interaktiva formulär stöds av många emailklienter idag. Vore det inte fantastiskt om du kunde inkludera ett formulär direkt i ett email utan att länka vidare till en hemsida? Tänk vad många svar man skulle kunna få! Maxa engagemanget och konverteringen i emailet du skickat, låter som en dröm. Eller?

I detta inlägg tar jag upp några grundläggande principer och tips på hur du kan skapa interaktiva formulär direkt i ett email. Redo? Då kör vi. Inlägget innehåller reklam genom annonslänkar för Visma Advantage.

Går det att ha interaktiva formulär i emails?

Tänk på alla gånger du skickat ut ett email med en länk till en landningssida för att personen i fråga ska fylla i ett formulär. Tänk om du kunde ta bort mellansteget, och få mottagaren att direkt svara på ditt formulär i emailet? Då skulle du kunna ta bort mellansteget och inte förlora en del svar på vägen. Du skulle till exempel kunna;

  • Samla in produkt feedback eller NPS undersökning direkt i emailet
  • Köra en kort undersökning utan att skicka folk till en landningssida
  • Få prenumeranter att uppdatera sina kontaktdetaljer utan att behöva logga in på din sajt
  • Samla in leads direk i en emailkampanj

Att visa ett formulär inom själva emailet eliminerar behovet av en extra landningssida. Varje lilla steg som elimineras för mottagaren att behöva ta, kommer leda till bättre framgångar för dina emailutskick. Troligen kommer du till och med kunna öka konverteringen i det du vill uppnå.

Emailklienter som stödjer formulär i emails

Okay, nu är det dags att erkänna sanningen. En del men inte alla emailklienter kan stödja interaktiva formulär direkt i emailet. Detta är ett av de största skälen till att vi inte sett detta användas i så stor grad som det borde. Det är nämligen inte alla klienter där ute som stödjer detta. Med det sagt, 4 av 5 emailklienter (de stora spelarna) Gmail, iOS mail, Apple mail och Yahoo mail stödjer interaktiva formulär! Dessa täcker ungefär 80% av alla email som tas emot. Detta kan så klart variera beroende på kund/medlemsbas.

Detta är vad statistiken säger om vilka plattformar som stödjer interaktiva formulär i email:

EmailklientStödjer formulär?Notering
Apple MailJa“GET” fungerar som förväntat. “POST” öppnar upp en landningssida med ett formulär istället för att skicka informationen direkt från emailet.
Gmail Desktop WebmailJaSkickar med en popup varning.
Gmail Mobile WebmailJa
Outlook iOSJa
Yahoo! Desktop WebmailJaSkickar med en popup varning.
AOL Desktop WebmailJa
AOL AndroidJa
iPhone Mail AppNja“GET” fungerar som förväntat. “POST” skickar inte.
Gmail iOSNja
Gmail AndroidNjaBara “GET” fungerar, men öppnar en sida med formuläret istället för att skicka från emailet. “POST” tillåter inte input.
Outlook AndroidNja
Yahoo! AndroidNjaFormuläret visas men verkar inte tillåta att man skriver in text.
Samsung Mail AppNjaFormuläret visas men verkar inte tillåta att man skriver in text.
Nej
Nej
Outlook MacOSNejSer ut att fungera som vanligt med tillåter inte att skicka.
Nej
Nej
AOL iOSNejSer ut att fungera som vanligt med tillåter inte att skicka.

Hur bygger man ett interaktivt formulär i ett email?

Phew. Jobbig fråga du ställer! Hur gör man för att implementera ett formulär i en HTML emailkampanj? Visar steg för steg nedan, ta det för vad det är.

1. Börja med grunden

Okay, först gäller det att skapa ett enkelt framework. Two attribut som kommer få ditt formulär att fungera som du tänkt.

<form action="[example_url]" method="get">
<!-- Form content -->
</form>

Action definierar landingssidan eller destinationen som datan från formuläret skickas till. Method sätter hur du skickar datan till sin destination. Du kan köra GET eller POST requests. GET har bättre stöd i email. Men, när du väljer att skicka datan med GET metoden, betyder det att du kopplar datan till en URL. Datan i det skickade formuläret blir då synlig själva länkadressen.

Som exempel, om jag fyller i ett formulär med mitt förnman, blir resultatet att formuläret skapar en länk med http://exempel.se?Fname=Patrick

2. Skapa fälten i ditt formulär

Du måste sedan tänka igenom vilken information du tänkt samla i ditt formulär. Hur ska du fånga detta i olika fält? Varje fält i formuläret kräver en egen label, d.v.s information som berättar för mottagaren vad som ska skrivas in i fältet. Nedan samlar vi in förnamnet.

<label for="fname">
 First Name:
</label>
<input type="text" id="fname">

På så sätt försöker du samla in en text input för elementet id=”fname” och din label for=”fname” kopplar ihop dessa två. Dock kommer vissa emailklienter förändra din kod för att de inte stödjer for & id. Det som händer då är att din label inte längre matchar med ID och då förstår formuläret. För att förhindra det kan du använda:

<label>
 
First Name: <input type="text">
 
</label>

Beroende på vad du vill samla in kan du ju använda olika typer av text input du vill samla in. Nedan är några exempel:

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

Genom att välja rätt typ av input för ett fält skapar du förutsättningen, för mobila enheter att kunna ändra tangetbordets layout för att matcha den input som efterfrågas. Samt i vissa fall stödja valideringen av det som skrivits in i fältet.

För varje del av informationen som ska matas in i formuläret behövs två saker: Ett namn och ett värde.

Namn: Fältets namn som är fördefinierat och skickas med via URL strängen.

Värde: Det värdet som skrivits in i formulärets fält.

Som exemplet ovan http://exempel.se?Fname=Patrick. Här är “Patrick” (=värde) och formulärets fält Förnamn (=fname).

Det går även att skapa checkboxar och knappar. Men det tänkte jag inte gå in på här.

3. Skicka dold information

Vid vissa fall kan det finnas behov av att skicka med dold information med i formuläret som mottagaren inte ska se. Samt att mottagaren inte ska behöva manuellt skriva in det i formuläret. Det kan vara såsant som namn, användar ID, emailadresser med mera. Till exempel kan du skicka med information i bakgrunden med input “hidden”, detta kommer inte ses av mottagaren och kan inte heller ändras.

<input type="hidden" name="user-id" value="U12345">

Du skulle kunna få med personens ID med ovan kod.

4. Skicka formuläret

Efter att formuläret är ifyllt och mottagaren ska skicka iväg det, så behövs det ju en skicka knapp eller ett sätt att skicka informationen. Det finns två vägar att gå, Input type “submit” eller button type “submit”.

<input type="submit" value="Submit your form" >
 
<button type="submit">
Submit your form
 
</button>

De båda fungerar på ett liknande sätt, den stora skillnaden är vart du lägger texten. Med input type vill du sätta texten som ett värde, medan om du använder en knapp behöver du sätta skicka texten precis innan stängningstaggen.

Backup strategier för interaktiva formulär i emails

Som du såg i tabellen högre upp så är det inte alla emailklienter som stödjer formulär. Därför är det bra att ha en backup plan i fall att det inte går som du tänkt. På det stora hela är det ofta mer problem med stöd på den mobila fronten. I dessa fall kan vi gömma förmuläret och bara visa det för de plattformar som ger fullt stöd till interaktiva formulär. Vi vill då ha kod som, visar interaktiva formulär i Apple Mail, Gmail, Yahoo. Samt undvika Outlook och Windows Mail samt mobila enheter.

Då får vi koden nedan:

CSS

.interactive-form {
    display: block !important;
    max-height: inherit !important;
    overflow: visible !important;
}
.fallback-form {
    display: none;
}
 
body[data-outlook-cycle] .outlookshow{ display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important;}
body[data-outlook-cycle] .outlookhide{ display:none !important; display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden; }
 
[class~="x_outlookshow"] { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important;}
[class~="x_outlookhide"] { display:none !important; display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden; }
 
@media only screen and (max-width: 640px) {
  .fallback-form {
    display:block !important;
    width: auto !important;
    overflow: visible !important;
    float: none !important;
    max-height:inherit !important;
    max-width:inherit !important;
    line-height: auto !important;
    margin-top: 0px !important;
    visibility:inherit !important;
  }
  .interactive-form, 
  .interactive-form p, 
  .interactive-form label, 
  .interactive-form input  {
    display:none !important;
    display:none !important;
    overflow:hidden !important;
    max-height: 0px !important;
    max-width: 0px !important;
    line-height: 0px !important;
    visibility:hidden !important;
  }
}

HTML

<!--[if mso | ie]>
<style>
.fallback-form {
  display: block !important;
  max-height: inherit !important;
  overflow: visible !important;
}
</style>
<![endif]-->
 
 
<!-- start FORM_INTERACTIVE -->
<!--[if (!mso)&amp;(gte IE 10)]> <! -- -->
<div class="interactive-form outlookhide" style="display:none; max-height:0; line-height:0; font-size:0; mso-hide:all;">
    [Insert Interactive Form code here]
</div>
<!--<![endif]-->
<!-- end FORM_INTERACTIVE -->
 
<!-- start FORM_FALLBACK -->
<div class="fallback-form outlookshow">
    [Insert fallback for form section here]
</div>
<!-- end FORM_FALLBACK -->

Resultat med exempel

Hur ser det då ut när man skapat ett interaktivt formulär i ett email? Det kan se ut på många sätt beroende på din CSS. Nedan har jag samlat in två exempel på hur det skulle kunna se ut, beroende på vilken väg man väljer att gå.

Sammanfattning av interaktiva formulär i email

Om man inte kan koda då? Hur gör jag då? Tyvärr krävs det en del nördkunskap för att skapa interaktiva formulär i emails, om du kan en del HTML och CSS kan du komma en bra bit på vägen. Detta inlägg är en kort sammanfattning av det hela, för att ge ett hum om hur man kan gå tillväga.

Men om du som marknadsförare vill komma till denna nivån kommer det vara en utmaning. Men absolut inte omöjligt! Det finns några goda nyheter och det är att Salesforce Marketing Cloud har nyligen lagt till Form Blocks, som möjliggör formulär direkt i email. Utan att behöva koda, rätt coolt!

Frågan är om detta kommer blir mer populärt med tiden? Jag tror det. Som marknadsförrare letar man alltid efter ett enklare sätt för mottagarna att engagera sig och ta del av information. Det är endå väldigt grymt att kunna samla in uppgifter om en person direkt i ett email!

Hoppas att detta inlägg gett dig lite intressanta tankar och idéer kring interaktiva formulär i emails. Hös av dig om du har frågor eller funderingar.

  • Förenkla email skapandeprocessen i ditt företag
    Lästid: 6 minuter Hur planerar och utför ni allt arbete kring att skapa emails som ni skickar till era kunder eller medlemmar? Hur säkerställer du kvaliteten och att ingenting missas på vägen till kund? Ett email som går till en stor mottagargrupp, som innehåller en bruten länk eller felskriven text kan vara otroligt pinsamt. Inte minst oprofessionellt.
  • Hur skapar man interaktiva formulär i email?
    Lästid: 6 minuter Det går att bygga interkativa formulär direkt i ett email om du vet hur man gör. Detta är en effektiv metod för att samla information om en mottagare, genom att dem direkt i emailet kan svara på formuläret.
  • Hur gör man en sökordsanalys?
    Lästid: 8 minuter En sökordsanalys är första steget i att sökmotoroptimera de texter du skriver för din hemsida eller blogg. Detta bör vara en grundläggande del i din strategi för att sökordsoptimera dina landningssidor och blogginlägg.
  • Sökmotoroptimerade blogginlägg – 6 Tips
    Lästid: 4 minuter Hur gör man för att ens blogginlägg ska ranka högt på Google? 6 konkreta tips på hur du kan sökmotoroptimera dina blogginlägg.

Lämna en kommentar

Din e-postadress kommer inte publiceras. Obligatoriska fält är märkta *

Den här hemsidan använder cookies. Genom att fortsätta använda sidan godkänner du vår användning av cookies.