Zmiana wyglądu wiadomości sukcesu po wysłaniu formularzu Divi

utworzone przez | lut 16, 2023 | Divi | 0 komentarzy

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:

  1. Przejdź do Divi > Opcje szablonów graficznych > Niestandardowe CSS
  2. 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”.

  1. Przejdź do Divi > Opcje szablonów graficznych > Niestandardowe CSS
  2. 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

Wyślij komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *