Så ändrar du färg och stil på bekräftelsen i Divis formulär

✏️ 2020-06-07 | Divi | 1 kommentar

Skapa tack-meddelanden och bekräftelser som sticker ut med snygga stilar och krispig copy. Här är alla tips och tricks som du behöver.
Skribent: Victor Duse
Av Victor Duse

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: 7 knep för bättre Divi-formulär

Före (Divis standardtext)

Divis Meddelande om lyckad överföring

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)

Egen stil på Divis Meddelande om lyckad överföring

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.

Ändra success text i Divis kontaktformulär

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å.

 

  1. Gå till Divi > Tema-anpassare > Extra CSS
  2. Lägg till följande CSS:
/* Style the Divi Form Success Message */

.et-pb-contact-message {
color: #32D190;
font-size: 21px;
font-weight: 700;
text-transform: uppercase;
}
Egen stil på Divis Meddelande om lyckad överföring
Lägg till egen CSS i Divi och WordPress

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: 7 knep för bättre Divi-formulär

Relaterade inlägg

1 kommentar
  1. Äntligen! 🙂

    Svara

Skicka en kommentar

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

Denna webbplats använder Akismet för att minska skräppost. Lär dig hur din kommentardata bearbetas.