Bardzo ważnym elementem na stronie „Kontakt” jest komunikat o powodzeniu, gdy odwiedzający wysyła wiadomość przez formularz kontaktowy. Dzięki temu ma pewność, że jego wiadomość została pomyślnie wysłana.
Niestety moduł Formularz kontaktowy w Divi nie ma ustawień przystosowania wyglądy wiadomości z sukcesem. Dlatego w tym wpisie rozprawimy się z tym problemem i pokażę Ci jak przystosować wygląd wiadomości pojawiającej się po wysłaniu formularza.
Domyślna czcionka komunikatu o powodzeniu formularza Divi jest mało wyróżniająca się i można ją przeoczyć.
Po kilku prostych poprawkach komunikat o sukcesie będzie z wyraźnym kolorem, zwiększonym rozmiarem czcionki.
Krok 1. Wpisz wiadomość o zakończaniu sukcesem
Wiadomość o sukcesie powinna być krótka, jasna i mieć pozytywny klimat. Powinieneś także poinformować gościa, czego może się spodziewać w następnej kolejności; kiedy i jak odpowiesz? Nie pozostawiaj potencjalnych potencjalnych klientów w niepewności i upewnij się, że możesz dotrzymać obietnicy.
Możesz dodać emotikony, aby stworzyć dobry nastrój, ale nie nadużywaj ich, chyba że Twoją grupą docelową korzysta z nich.
Oto pięć przykładowych emotikonów, których można wykorzystać w tekście potwierdzenia:
👋 | 🎉 | ✨ | 🙌 | ⚡ |
Więcej ikon możesz znaleźć na stronie: https://pl.piliapp.com/facebook-symbols/
Jeśli pozostawisz puste pole Wiadomość o zakończeniu sukcesem, domyślną wiadonością będzie: Dziękujemy za kontakt
Jeśli zmienisz język na karcie ustawień WordPress, domyślna wiadomość o sukcesie zostanie automatycznie przetłumaczona.

Krok 2. Zmiana wyglądu wiadomości po wysłaniu formularza
Elegant Themes nie uwzględniło opcji przystosowania wyglądu wiadomości po wysłaniu formularza w ustawieniach modułu formularza kontaktowego. Dlatego aby to zrobić należy użyć niestandardowego kodu CSS.
Jak zmienić kolor i styl czcionki komunikatu o sukcesie
Komunikat o powodzeniu formularza Divi wykorzystuje klasę .et-pb-contact-message. Wykorzystajmy ją aby zmienić wygląd czcionki:
- Przejdź do Divi > Opcje szablonów graficznych > Niestandardowe CSS
- Dodaj następujący Niestandardowy kod CSS:
/* Zmiana wyglądu wiadomości po wysłaniu formularza */
.et-pb-contact-message p {
color: #71b100;
font-size: 21px;
font-weight: 700;
line-height:1.5em;
}
W lini „color” zmień „#71b100” na swój kolor,
„font size” – rozmiar czcionki,
„font-weight” – waga czcionki.
„line-height” – odstęp między wierszami
Krok. 3 Komunikat o błędzie formularza Divi
Ta sama klasa CSS jest używana zarówno w komunikacie o sukcesie, jak i w komunikacie o błędzie:
.et-pb-contact-message
Oznacza to, że tytuł komunikatu o błędzie będzie również miał kolor zielony z komunikatu o powodzeniu. Jednak to co odróżnia komunikat błędu od wiadomości sukcesu to wykorzystanie listy wypunktowanej i dzięki temu można przypisać inny wygląd czcionki wykorzystując tag „li”.
- Przejdź do Divi > Opcje szablonów graficznych > Niestandardowe CSS
- Dodaj następujący Niestandardowy kod CSS:
/* Zmiana wyglądu komunikatów o błędzie */
.et-pb-contact-message li {
color:red;
font-weight:700;
font-size:18px;
line-height:1.3em;
}
Podobnie jak wcześniej należy przystosować kod pod siebie zmieniając kolor, wagę, rozmiar czcionki i odstęp między wierszami tekstu.
0 komentarzy