Szybkie wsparcie: 511 280 732 lub [email protected]
Dominik Krawiec ✅ Ekspert SEO & WordPress

Jak dodać style do formularza Contact Form 7?

Formularze kontaktowe są kluczowym elementem stron internetowych, umożliwiającym użytkownikom nawiązanie kontaktu z Twoją firmą. Jednakże domyślny wygląd formularzy Contact Form 7 często nie spełnia estetycznych oczekiwań użytkowników. W tym artykule pokażę, jak dodać style CSS do formularza Contact Form 7, aby dostosować jego wygląd do reszty strony i poprawić wrażenia użytkowników.

Po co tracisz czas?

Ciągłe wprowadzanie poprawek na swojej stronie to uciążliwe zajęcie.
Z pewnością masz ważniejsze sprawy na głowie.
Zadbam o Twojego WordPressa.

... jeśli koniecznie chcesz zrobić to samodzielnie

Wykonaj poniższe kroki.

  1. Przejdź do Dostosuj > Dodatkowy CSS.
  2. Wpisz wybrane reguły dla dedykowanych klas Contact Form 7.
  3. Śledź zmiany w podglądzie na żywo.
  4. Kliknij przycisk Opublikuj.

Sposób 1: Dodanie stylów bezpośrednio do CSS

Najprostszą metodą jest dodanie stylów w pliku CSS. Wystarczy otworzyć plik style.css i dodać odpowiednie reguły. Można dostosować kolory, rozmiary czcionek i obramowania.

Przykład:

.wpcf7 input[type="text"] {
    border: 2px solid #000;
    padding: 10px;
}

W ten sposób każda pole tekstowe w formularzu Contact Form 7 będzie miało czarne, grubsze obramowanie i dodatkową przestrzeń wewnętrzną.

Zaleta tej metody to łatwość wdrożenia i edycji. Wady obejmują możliwość nadpisania innych stylów na stronie, co może prowadzić do nieoczekiwanych efektów wizualnych.

Oto inne przykłady reguł CSS dla standardowych elementów formularza kontaktowego:

Stylizacja pola tekstowego (input type=”text”)

.wpcf7 input[type="text"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;
}

Stylizacja pola e-mail (input type=”email”)

.wpcf7 input[type="email"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;
}

Stylizacja pola tekstowego (textarea)

.wpcf7 textarea {
    width: 100%;
    height: 150px;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;
    resize: vertical; /* Umożliwia zmianę wysokości */
}

Stylizacja przycisku wysyłania (submit button)

.wpcf7 input[type="submit"] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.wpcf7 input[type="submit"]:hover {
    background-color: #45a049;
}

Stylizacja komunikatów błędu i powodzenia

Komunikaty powodzenia:

pcf7-mail-sent-ok {
    color: #28a745;
    font-weight: bold;
    margin-top: 10px;
}

Komunikaty błędu:

.wpcf7-not-valid-tip,
.wpcf7-validation-errors {
    color: #dc3545;
    font-weight: bold;
    margin-top: 10px;
}

Stylizacja etykiet (labels)

pcf7 label {
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
}

Dodanie powyższych stylów do pliku CSS Twojej strony lub w sekcji „Dodatkowy CSS” w WordPressie pozwoli na dostosowanie wyglądu formularza Contact Form 7 do Twoich potrzeb. Pamiętaj, aby użyć selektorów specyficznych dla Contact Form 7 (np. .wpcf7) w celu uniknięcia konfliktów z innymi stylami na stronie.

Sposób 2: Użycie specjalnych klas CSS

Inna metoda polega na użyciu dedykowanych klas CSS, które można przypisać bezpośrednio w shortcode formularza Contact Form 7. W edytorze formularza można dodać atrybuty „class” do elementów.

Np.:

[text* your-name class:custom-style]

Następnie w pliku CSS można zdefiniować styl dla klasy „custom-style”.

.custom-style {
    border-color: #f00;
    background-color: #f9f9f9;
}

Zaletą jest precyzyjne zarządzanie wyglądem poszczególnych elementów formularza. Wadą może być konieczność edytowania shortcode dla każdego elementu, co jest czasochłonne.

Sposób 3: Pluginy z szablonami formularzy

Kolejną metodą jest użycie specjalnych pluginów wspomagających stylizację formularzy Contact Form 7, jak np. Ultimate Addons for Contact Form 7. Wtyczka ta oferuje gotowe szablony, które można łatwo zastosować i dostosować.

ultimate addons for contact form 7

Dzięki pluginowi oszczędzamy czas i unikamy potencjalnych błędów w kodzie. Wadą jest dodatkowe obciążenie dla strony oraz konieczność aktualizacji pluginu zgodnie z nowymi wersjami Contact Form 7.

Podsumowując, każda z metod ma swoje zalety i wady. Wybór odpowiedniej metody zależy od indywidualnych potrzeb, umiejętności oraz specyfiki projektu.

Zadbam o Twoją stronę internetową

Wypełnij poniższy formularz - odezwę się do Ciebie, by porozmawiać o Twojej stronie internetowej.



    Wysyłając wiadomość, akceptujesz politykę prywatności i wyrażasz zgodę na przetwarzanie podanych danych osobowych w celu przygotowania oferty.
    🔒 Twoje dane są bezpieczne.

    Copyright 2024 WooCado - Opieka nad stroną Polityka prywatności