Jak dostosować formularz kontaktowy CSS 7

Zawartość

• Instrukcje
• Jak
• Uwaga
• Czego potrzebujesz

Formularz kontaktowy 7 to wtyczka platformy do publikowania WordPress, która umożliwia użytkownikom szybkie tworzenie niestandardowych formularzy kontaktowych. Chociaż formularze są łatwe do utworzenia i wdrożenia, ich pola są minimalnie dostosowane, co umożliwia integrację z dowolną witryną. Utwórz własne style i zaimplementuj je w polach formularza generowanych przez tę wtyczkę.

Instrukcje

Dostosuj styl pól formularza kontaktowego 7 za pomocą CSS (Comstock / Comstock / Getty Images)

1. Otwórz arkusz stylów swojego WordPressa i przewiń do końca. Utwórz obszar z adnotacjami, aby łatwo zlokalizować kod. Przykład:

   / Tutaj zaczyna się mój niestandardowy kod CF7 /

2. Dostosuj style pól i obszarów tekstowych. Aby to zrobić, utwórz wpis w swoim arkuszu stylów. Przykład:

   .wpcf7 input [type = "text"], .wpcf7 areadotexto {}

   Dodaj obramowania, tła, dopełnienie i rozmiary elementów tekstowych. Przykłady:

   .wpcf7 input [type = "text"] {background: none repeat scroll 0 0 # F9F9F9; granica: 1px bryła # 8E9BA9; padding: 5px; szerokość: 200px; }

3. Dostosuj style menu rozwijanych i menu wyboru.Aby to zrobić, utwórz wpis w swoim arkuszu stylów. Przykład:

   
   

   .wpcf7 input [type = "select"] {

   }

   Dostosuj pola wyboru podobne do pól tekstowych. Pola wyboru nie są tak szerokie jak pola tekstowe, więc dodaj kilka dodatkowych pikseli do szerokości. Przykład:

   .wpcf7 input [type = "selected"] {background: none repeat scroll 0 0 # F9F9F9; granica: 1px bryła # 8E9BA9; padding: 5px; szerokość: 210px; }

4. Dostosuj styl przycisku przesyłania. Aby to zrobić, utwórz wpis w swoim arkuszu stylów. Przykład:

   .wpcf7 input [type = "submission"] {

   }

   Dostosuj przycisk przesyłania, aby uzupełnić wygląd i styl witryny (powinien on nadal wyróżniać się na tle). Przykład czerwonego przycisku wysyłania:

   .wpcf7 input [type = "submission"] {background-color: # 990000; granica: 4px bryła # B34040; kolor: #FFFFFF; }

5. Zapisz zmiany w arkuszu stylów i przenieś dane do folderu motywu.

Jak

• Wypróbuj różne style i różne kolory obramowania.
• Sprawdź nowe formularze w Firefox, Safari i Internet Explorer, ponieważ każda przeglądarka zapewnia nieco inne pola wprowadzania.

Uwaga

• Dodaj niestandardowy CSS do arkusza stylów motywu, a nie do arkusza stylów wtyczek. Jeśli to zrobisz, gdy wtyczka zostanie zaktualizowana, dostosowanie plików w folderze może zostać utracone.

Czego potrzebujesz

• Dostęp do arkusza stylów WordPress