När en besökare skickar ett meddelande via ett formulär på din WordPress-hemsida är det viktigt att du har ett tydligt tackmeddelande som bekräftar att meddelandet har skickats. Lär dig hur du ändrar text, färg och stil på bekräftelsetexten i Divis kontaktformulär.
I det här exemplet använder jag Ebook Layout Pack från Elegant Themes men du kan såklart använda vilken layout du vill. Vi kommer att använda Divi Builder tillsammans med lite CSS-kod. Nu kör vi!
Relaterat inlägg: Så länkar du till integritetspolicyn i dina formulär med Divi
Före (Divis standardtext)
Divis standardmeddelande är litet och grått – och därmed lätt att missa. Risken är att besökaren försöker skicka ett nytt meddelande eller kontakta dig på andra sätt, helt i onödan.
Efter (egen text och stil)
Med några enkla knep sticker bekräftelsetexten ut mer med en avvikande textfärg, större textstorlek, versaler och en tydlig copy med en trevlig emoji som en bonus.
1. Skriv din tack-copy
Korta texter som bekräftelser, felmeddelanden och dylikt kallas för mikrocopy. Detta är en ofta förbisedd konstform; liten text stjälpa ofta stor tuva.
Ett bekräftelsemeddelande ska vara kort, tydligt och förmedla en positiv känsla. Du ska också sätta rätt förväntningar hos den som skickar meddelandet: När och hur kommer du att återkoppla? Men lova aldrig mer än du kan hålla.
Lägg till en emoji för att skapa en härlig känsla, men överanvänd dem inte, såvida din målgrupp inte råkar bestå av tweenies.
Här är fem exempel på emojis som du kan använda i formuläret:
| 👋 | 🎉 | 👍 | ✨ | 🙌 | ⚡ |
Om du inte skriver in någon text i fältet för ”Meddelande om lyckad överföring” visas följande standard-text: Tack för att du kontaktat oss
Standardmeddelandet översätts automatiskt efter det språk som du har angett som ”Webbplattsspråk” i WordPress Allmänna inställningar.
Lägg till ditt bekräftelsemeddelande i fältet Meddelande om lyckad överföring i formulär-modulens flik Innehåll.
2. Stajla din tack-text
När du är klar med din copy är det dags att ändra färg och format på tack-texten. Det är lätt att missa den lilla gråa texten så vi går direkt in i Divi Builder och ändrar designen, eller hur? Tyvärr inte, Elegant Themes har inte lagt till det här fältet i Design-inställningar. Så vi får lösa det med några rader CSS-kod istället.
Så ändrar du stil på formulärets tack-text i Divi
Bekräftelsen i Divis kontaktformulär använder klassen .et-pb-contact-message så det är den som vi ska rikta in oss på.
- Gå till Divi > Tema-anpassare > Extra CSS
- Lägg till följande CSS:
/* Stajla Divis Form Success Message */
.et-pb-contact-message p {
color: #32D190;
font-size: 21px;
font-weight: 700;
text-transform: uppercase;
}
Lägg till CSS i Divis Tema-anpassare eller Theme Customizer om du har engelsk inställning.
3. Vill du lägga till en bakgrundsfärg istället?
Ett annat, lite mer avancerat, alternativ är att lägga till en bakgrundsfärg bakom tack-texten. Det får budskapet att synas ännu mer. Eftersom tack-meddelandet inte ligger i en span-tagg behöver vi vara kreativa och använda display: inline-flex för att förhindra att bakgrundsfärgen täcker 100% av kolumnbredden.
Så ändrar du bakgrund
- Gå till Divi > Tema-anpassare > Extra CSS
- Lägg till följande CSS:
/* Lägg till bakgrundsfärg i Divis Form Success Message */
.et-pb-contact-message p {
display: inline-flex;
padding:8px;
font-size:21px;
background-color:#31d190;
color:#fff;
}
Lägg till CSS i Divis Tema-anpassare eller Theme Customizer om du har engelsk inställning.
Förklaring till CSS-koden:
- Ändra #32D190 till den färg som du vill ha, till exempel #000 för svart eller #fff för vitt.
- Var försiktig med font-size; texten ska se bra ut även på små mobila enheter (om du behärskar Media Query kan du såklart använda olika stilar för olika skärmstorlekar).
- Textens tjocklek, font-weight, kan vara mellan 100 och 900 i hela 100-tal.
- Använd text-transform:uppercase; för VERSALER men se upp så att det inte uppfattas som skrikigt.
- Notera att Divi-formulärets felmeddelanden använder samma klass: .et-pb-contact-message. Det innebär att både felmeddelanden och tack-meddelandet kommer att få samma färg och stil.
Relaterat inlägg: Så länkar du till integritetspolicyn i dina formulär med Divi
Äntligen! 🙂
Härligt att höra!