Jak dostosować styl formularza kontaktowego 7, aby pasował do Twojej witryny?

Z ponad milionem aktywnych instalacji Contact Form 7 jest zdecydowanie jedną z najpopularniejszych wtyczek WordPress w historii. Jego popularność prawdopodobnie ma wiele wspólnego z prawdą kryjącą się za jej opisem: „Prosty, ale elastyczny”.

Contact Form 7 umożliwia tworzenie wielu formularzy kontaktowych przy użyciu tylko prostych znaczników HTML (które generuje dla Ciebie). Po utworzeniu każdy formularz można szybko wdrożyć, umieszczając odpowiadający mu krótki kod w miejscu, w którym ma się pojawić formularz; w obszarze strony, posta lub widżetu. Wiadomości przesyłane za pośrednictwem formularzy są wysyłane na adres e-mail podany w ustawieniach wtyczki, a spam jest zwalczany dzięki obsłudze CAPTCHA i Akismet.

Contact Form 7 jest tak prosty, że wydaje się, że dosłownie każdy może z niego efektywnie korzystać. Stylizacja również ma być prosta. Ale może dla niektórych zbyt proste. Domyślnie wtyczka Contact Form 7 nie stylizuje swoich formularzy. Wszelkie style, które mają, są wynikiem domyślnych stylów obecnych w arkuszu stylów motywu WordPress.

Zwykle skutkuje czymś dość podstawowym, takim jak:

Niestety taka forma, choć w istocie prosta i elastyczna, może nie być tak pięknie zaprojektowana, jak inne elementy na naszej stronie internetowej. Pozostawiając wielu innym zadowolonym użytkownikom szukanie alternatyw dla Contact Form 7 z większą ilością opcji stylizacji. Na szczęście przy odrobinie CSS nie jest potrzebna alternatywa dla wtyczki.

W dzisiejszym poście zamierzam podzielić się szeregiem wskazówek, które otworzą szerokie możliwości stylizacji Formularza Kontaktowego 7 dla każdego, przy użyciu dowolnego motywu.

Jak dostosować styl formularza kontaktowego 7, aby pasował do Twojej witryny?

Subskrybuj nasz kanał YouTube

Gdzie edytować swój formularz kontaktowy 7 CSS (i dlaczego)

Ważne jest, aby podczas dodawania niestandardowego kodu CSS nie dodawać go do arkusza stylów Formularza kontaktowego 7 ani motywu nadrzędnego. Wszelkie zmiany lub dodatki, które tam wprowadzisz, zostaną nadpisane, gdy tylko motyw i/lub wtyczka zostaną zaktualizowane.

Zamiast tego warto dodać poniższy kod CSS do kodu CSS motywu podrzędnego. Możesz także użyć niestandardowej funkcji CSS w Jetpack lub jeśli Twój motyw zawiera sekcję w swoim panelu administracyjnym dla niestandardowego CSS, możesz również tego użyć.

Ok, teraz, gdy wiemy, gdzie umieścić style, które omówimy poniżej, zacznijmy!

Jak tworzyć style formularzy dla całej witryny

Zacznijmy od wprowadzenia ogólnych zmian, które będą miały zastosowanie do całego formularza. Możemy to zrobić, używając selektora klas .wpcf7, a następnie dodając pod nim style.

(Chciałbym również gorąco zasugerować, abyś umieścił skomentowany nagłówek, który napisałem poniżej, w swoim arkuszu stylów, aby wskazać, gdzie zaczynają się style formularza kontaktowego 7.)

/* Contact Form 7 Styles
---------------------------------*/

.wpcf7 {

background-color: #F0F0F0;

border: 5px solid #666666;

}

Po dodaniu powyższego kodu do arkusza stylów każdy formularz utworzony za pomocą Contact Form 7 będzie miał zdefiniowane style tła i obramowania. Poniżej znajduje się przykład.

Jak widać, są pewne problemy z odstępami. Aby to naprawić, będziesz chciał dostosować marginesy między obramowaniem a wewnętrznymi elementami formularza. Możesz to zrobić za pomocą poniższego kodu.

.wpcf7-form {

margin-left: 25px;

margin-right: 25px;

margin-top: 25px;

Na mojej stronie testowej spowodowało to:

Uwaga: te style mogą wpływać na Twoje formularze w nieco inny sposób, ponieważ najprawdopodobniej pracujemy z różnymi motywami. Nie oznacza to, że ten kod nie będzie dla Ciebie działał, tylko, że będziesz musiał nieco poprawić liczby, aby uzyskać odpowiednie rozwiązanie dla Twojej witryny.

Jak tworzyć style pól formularza dla całej witryny

Jedną z najczęstszych próśb, jakie ludzie mają, jeśli chodzi o stylizację formularza kontaktowego 7, jest to, jak mogą dostosować szerokość pól. W szczególności obszar wiadomości, który nie rozciąga się zbyt daleko.

Poniższy kod rozszerzy obszar wiadomości do żądanej szerokości (po dostosowaniu). Ustawiłem swój w przykładzie na 95%, ponieważ tak wyglądało najlepiej w moim wyobrażonym przypadku użycia. Możesz go również dostosować do swoich potrzeb - używając wartości procentowej lub stałej liczby pikseli.

.wpcf7-textarea {

width: 85%;

}

Możesz również dostosować szerokość innych pól, dostosowując selektor klasy wejściowej .

.wpcf7 input {

width: 50%;

}

Jeśli nie chcesz dostosowywać wszystkich pól wejściowych według tych samych kryteriów, możesz zagłębić się nieco, wybierając tylko te, które Cię interesują. W poniższym przykładzie zdecydowałem się po prostu zmienić moje pola tekstowe, aby mój przycisk przesyłania nie ma to również wpływu.

.wpcf7-text {
width: 50%;
}

Po wszystkich powyższych zmianach udało mi się wystylizować formularz, który widzisz poniżej.

Osobiście nie chciałem zmieniać koloru mojego guzika, ale myślę, że jest to najprawdopodobniej kolejne powszechne pragnienie. Jeśli więc chcesz zmienić kolor przycisku, możesz eksperymentować za pomocą poniższego kodu CSS.

.wpcf7-submit {

background: #555555;

color: #ffffff;

}

Dzięki tym fragmentom CSS każdy formularz utworzony za pomocą Contact Form 7 będzie wyglądał jak na powyższym obrazku. Ale co się dzieje, gdy chcesz, aby w szczególności jedna forma wyglądała inaczej niż wszystkie inne?

Jak stylizować określoną formę?

Uzyskanie konkretnego identyfikatora CSS wymaganego do edycji stylu w określonym formularzu może być trochę kłopotliwe, ale jest to możliwe przy odrobinie majsterkowania.

Pierwszą rzeczą, którą będziesz chciał zrobić, to dodać krótki kod formularza do swojej witryny i wyświetlić jego podgląd. (Zauważysz, że w tym krótkim kodzie znajduje się numer identyfikatora - ale w rzeczywistości nie jest to pełny identyfikator, którego będziesz potrzebować).

Następnie, korzystając z funkcji sprawdzania elementu przeglądarki Google Chrome lub czegoś podobnego w innej przeglądarce, spójrz na kod formularza. Korzystając z tego znajdziesz pełny identyfikator formularza.

W moim przypadku numer identyfikacyjny w moim shortcodzie to 4407 . Pełny identyfikator okazał się być wpcf7-f4407-p4405-o1 . Co oznaczało, że mogłem wprowadzać dalsze zmiany, tylko do tego konkretnego formularza, używając poniższego kodu z różnymi kryteriami, które różniły się od moich ustawień dla całej witryny.

#wpcf7-f4407-p4405-o1 {
background-color: #333333;
border: 5px solid #0074A2;
}

Jak stylizować określone pola

Możesz zrobić to samo z określonymi polami. Zamiast śledzić konkretną klasę CSS lub identyfikator w przeglądarce, wystarczy dodać je w kreatorze formularzy.

Podczas generowania znacznika do umieszczenia w kreatorze formularzy zauważysz, że istnieją dwie opcje tworzenia identyfikatora, klasy lub obu.

W tym przykładzie wybrałem utworzenie klasy o nazwie custom-field . Jeśli zrobisz to samo (lub coś podobnego), będziesz mógł stylizować tylko to pole przy użyciu nowego identyfikatora (lub klasy), tak jak poniżej.

#customized-field {

color: #ffffff;

border: 2px solid #333333;

}

Jak tworzyć niestandardowe układy formularzy dla pól wyboru i przycisków kołowych?

Domyślnie pola wyboru i promienie są wyświetlane od lewej do prawej.

Ale ze względu na osobiste preferencje lub konkretny przypadek użycia, w którym wyświetlanie ich od góry do dołu może być preferowane, możesz użyć jednej z dwóch poniższych opcji.

Użyj tego, aby wyświetlić pola wyboru lub przyciski kołowe od góry do dołu i po lewej stronie.

.wpcf7-list-item {
display: block;
}

Użyj tego, aby wyświetlić pola wyboru i przyciski kołowe od góry do dołu i po prawej stronie. Upewnij się również, że podczas generowania tagu dla tej opcji zaznaczysz pole wyboru „Najpierw etykieta”.

.wpcf7-list-item {
display: table-row;
}

.wpcf7-list-item * {
display: table-cell;
}

Dodatkowa wskazówka: jak usunąć tytuły pól i zamiast tego użyć tekstu zastępczego

Ta wskazówka nie wymaga użycia CSS, jak poprzednie, ale raczej prostego dostosowania znaczników używanych w konstruktorze formularzy Contact Form 7.

Czasami nie jest konieczne posiadanie tytułów pól, zwłaszcza gdy w samych polach można umieścić tekst zastępczy, który wyjaśnia, jakie informacje tam należą.

Jeśli tak jest w Twojej witrynie, wszystko, co musisz zrobić, to usunąć tytuły w kreatorze formularzy i dodać tekst zastępczy, tak jak to zrobiłem w poniższym przykładzie.

<p></p>

<p>[email* your-email placeholder "Email Address"]</p>

<p></p>

<p>[textarea your-message placeholder "Talk to me"]</p>

Rezultatem jest czystsza forma z mniejszym bałaganem.

Na zakończenie

Mam nadzieję, że w powyższych przykładach pokazałem, że wtyczka Contact Form 7 jest wysoce konfigurowalna. To prawda, że ​​wymaga to trochę majsterkowania, ale w przypadku bezpłatnej wtyczki, której można się spodziewać.

Myślę, że domyślny brak opcji stylizacji jest dużą częścią tego, dlaczego wtyczka działa tak dobrze dla tak wielu osób. Więc to sprawiedliwe, że każdy, kto czerpie z tego dużo wartości, który chce więcej stylu, poświęci kilka minut na porzucenie wersji jednego z powyższych przykładów kodu.

Czy masz jakieś własne wskazówki dotyczące stylu Contact Form 7? Jakieś ulubione, których użyłeś, którymi chcesz się podzielić? Napisz do nas w komentarzach poniżej!

Miniatura artykułu za pośrednictwem Dmitrija Lemon5ky // shutterstock.com