Jak dodać efekt hover do przycisku w formularzu WP form

Chcesz dostosować przycisk wysyłania w swoim formularzu WPForms, aby lepiej pasował do designu Twojej strony lub jej osobowości? Nasz przewodnik pokaże Ci, jak zmienić tekst i styl przycisku wysyłania formularza za pomocą CSS. Zwiększ wskaźnik wysyłania formularzy dzięki naszym wskazówkom!

Sposób 1

Aby dodać efekt hover do przycisku w formularzu WPForms w WordPress, można zastosować niestandardowe style CSS. Oto jak to zrobić krok po kroku:

1. Zaloguj się do swojego panelu administracyjnego WordPress.
2. Przejdź do „Wygląd” > „Edytor”.
3. W lewym menu znajdź plik o nazwie „style.css” lub „custom.css” (jeśli jest dostępny). Jeśli nie ma takiego pliku, możesz dodać swoje niestandardowe style CSS do pliku „style.css” w folderze motywu.
4. Otwórz plik i dodaj poniższy kod CSS na końcu:

.wpforms-submit-container button.wpforms-submit:hover {
  background-color: #ffaa00; /* kolor tła przycisku podczas najechania */
  color: #ffffff; /* kolor tekstu przycisku podczas najechania */
  transition: all 0.3s ease; /* animacja przejścia */
  /* Dodaj inne style, które chcesz zastosować podczas najechania, np. border, box-shadow */
}

5. Zastąp kolory tła (#ffaa00) i tekstu (#ffffff) według swojego upodobania.
6. Kliknij „Zaktualizuj plik” lub „Zapisz zmiany”, aby zapisać swoje zmiany.
7. Odśwież stronę z formularzem WPForms, aby zobaczyć efekt hover na przycisku.

Jeśli wprowadzone zmiany nie są widoczne, upewnij się, że pamięć podręczna przeglądarki została wyczyszczona. Jeśli problem nadal występuje, sprawdź, czy motyw lub wtyczka nie nadpisuje własnych styli CSS.

Sposób 2

Aby zmienić styl najechania myszką dla przycisku „Wyślij” w formularzu utworzonym za pomocą wtyczki WPForms w WordPress, musisz użyć niestandardowego kodu CSS. Możesz dodać niestandardowy CSS do arkusza stylów swojego motywu lub za pomocą wtyczki do niestandardowego CSS. Oto jak to zrobić:

1. Zidentyfikuj ID formularza: Najpierw musisz znaleźć identyfikator (ID) formularza, który chcesz zmodyfikować. Możesz znaleźć to w wtyczce WPForms, przechodząc do WPForms > Wszystkie formularze w kokpicie WordPress. ID formularza będzie wyświetlane obok nazwy formularza, na przykład „ID formularza: 123”.
2. Dodaj niestandardowy CSS: Teraz, gdy masz ID formularza, możesz dodać niestandardowy CSS, aby dostosować stan najechania myszką na przycisk „Wyślij”. Możesz dodać ten CSS do arkusza stylów swojego motywu (zwykle style.css) lub za pomocą wtyczki do niestandardowego CSS.

Oto szablon niestandardowego CSS:

/* Zamień '123' na swoje ID formularza */
.wpforms-form-123 .wpforms-submit-container .wpforms-submit:hover {
    /* Dodaj tutaj pożądane style najechania myszką */
    background-color: #twoj_wymarzony_kolor;
    color: #twoj_wymarzony_kolor_tekstu;
    border-radius: 5px; /* Opcjonalne: zmień tę wartość, aby zmodyfikować zaokrąglenie narożników */
    /* Dodaj inne pożądane style najechania myszką */
}

Upewnij się, że zamieniłeś '123′ na swoje ID formularza i dostosowałeś style najechania myszką według własnych potrzeb. Na przykład możesz zmienić właściwości background-color, color i border-radius.

3. Zapisz i przetestuj: Zapisz zmiany w arkuszu stylów lub wtyczce do niestandardowego CSS, a następnie odwiedź swoją stronę, aby zobaczyć zaktualizowany styl najechania myszką na przycisku „Wyślij”.

Pamiętaj, aby wyczyścić pamięć podręczną przeglądarki, jeśli nie widzisz zmian od razu.

Rozwiązanie ze strony WP Forms

How to Customize the Submit Button (wpforms.com)

Według bieżącej treści strony internetowej możesz zmienić styl najechania na przycisk wysyłania w WPForms za pomocą CSS. Oto domyślny CSS w WPForms, gdy najedziesz na przycisk:

.wpforms-form input[type=submit]:hover, .wpforms-form input[type=submit]:active, .wpforms-form button[type=submit]:hover, .wpforms-form button[type=submit]:active, .wpforms-form .wpforms-page-button:hover, .wpforms-form .wpforms-page-button:active {
    background-color: #ddd; /* Ciemniejsze szare tło */
    border: 1px solid #ccc; /* Lżejsza szara ramka */
}

Możesz zmienić dowolną z tych wartości, aby inaczej stylizować style najechania na przycisk. Na przykład, aby nadać przyciskowi ciemniejsze żółte tło po najechaniu na niego, możesz użyć następującego kodu CSS:

.wpforms-form input[type=submit]:hover, .wpforms-form input[type=submit]:active, .wpforms-form button[type=submit]:hover, .wpforms-form button[type=submit]:active, .wpforms-form .wpforms-page-button:hover, .wpforms-form .wpforms-page-button:active {
    background-color: #e5da00 !important; /* Ciemniejsze żółte tło */
}

Możesz dodać ten kod CSS do swojej witryny za pomocą edytora CSS WordPress. Aby to zrobić, przejdź do Wygląd » Dostosuj i wybierz Dodatkowy CSS. Po otwarciu sekcji Dodatkowy CSS możesz wkleić swój nowy kod CSS i kliknąć przycisk Zapisz i opublikuj.