Contact form 7 w motywach opartych na Bootstrap 3

Contact Form 7 to jedna z bardziej popularnych wtyczek dla WordPress, oraz zdecydowany lider jeśli chodzi o wtyczki dodające formularze kontaktowe do stron opartych o WordPress. Dzięki stosunkowo prostej obsłudze i dużej elastyczności możliwe jest stworzenie potrzebnego formularza w mgnieniu oka.

Z kolei Bootstrap 3, to w dużym uproszczeniu popularny framework HTML, CSS oraz JavaScript, służący do tworzenia (responsywnych) motywów stron. Jego użycie pozwala na zaoszczędzenie sporej ilości czasu poprzez możliwość wykorzystania gotowych, dostarczonych wraz z frameworkiem komponentów.

Contact form 7 w motywach opartych na Bootstrap 3

Bootstrap, jak już zostało wspomniane wcześniej, to bardzo popularny framework i bardzo często można go „spotkać” w motywach dla WordPress. Mimo iż CF7 posiada swój podstawowy zestaw reguł CSS, to nigdy nie można mieć pewności, że wszystko będzie od razu dobrze wyglądać. Wszystko przez to, że każdy motyw korzysta z innych reguł CSS i jedne mogą wpływać na drugie.

Zacznijmy od początku. Mamy już naszą stronę postawioną na WordPress, a nasz motyw korzysta z Bootstrapa 3. W tym momencie przydałby się jeszcze jakiś formularz kontaktowy. Instalujemy zatem CF7, kopiujemy shortcode i wklejamy na nową stronę. Efekt jest następujący (drugi screen został wykonany w motywie Bootstrap Canvas WP):

Poprawiamy kod HTML

W kokpicie, z lewego, pionowego menu wybieramy opcję Formularze. Z listy wybieramy formularz kontaktowy, który będziemy teraz edytować. Na zakładce Formularz powinniśmy zobaczyć standardowy kod formularza, który przepiszemy tak, aby był kompatybilny z Bootstrapem. Ja postanowiłem dodać kilka dodatkowych pól, oraz zrobić je w dwóch kolumnach. Mój kod wygląda następująco:

<div class="row">

    <div class="col-sm-6">
        <div class="form-group">
            <label for="imie">Imię</label>[text* your-name class:form-control id:imie]
        </div>
    </div>

    <div class="col-sm-6">
        <div class="form-group">
            <label for="nazwisko">Nazwisko</label>[text* your-surname class:form-control id:nazwisko]
        </div>
    </div>

    <div class="col-sm-6">
        <div class="form-group">
            <label for="email">Adres email</label>[email* your-email class:form-control id:email]
        </div>
    </div>

    <div class="col-sm-6">
        <div class="form-group">
            <label for="telefon">Telefon</label>[text* your-phone class:form-control id:telefon]
        </div>
    </div>

    <div class="col-sm-12">
        <div class="form-group">
            <label for="subject">Temat wiadomości</label>[text* your-subject class:form-control id:subject]
        </div>
    </div>

    <div class="clearfix"></div>
    
    <div class="col-sm-12">
        <div class="form-group">
            <label for="wiadomosc">Treść wiadomości</label>[textarea* your-message class:form-control id:wiadomosc]
        </div>
    </div>
    
    <div class="clearfix"></div>
    
    <div class="col-sm-12">
        <div class="form-group">
            [submit class:btn class:btn-primary class:pull-right "Wyślij"]
        </div>
    </div>

</div>

Generalnie, już po wklejeniu tego kodu powinniśmy zobaczyć znaczną poprawę wizualną, jednak dla jeszcze lepszej integracji z motywem warto dodać kilka klas dzięki którym na przykład komunikaty, czy przyciski będą wyglądać jak te z Bootstrapa.

LESS:

/* Form Controls  */
/* ========================= */

label{
    font-weight: normal;
}

input, textarea{
    border-width: 2px!important;
    border-color: @border-color!important;

    &:focus {
        box-shadow: none!important;
        border-color: @brand-primary!important;
    }
}

textarea{
    max-height: 100px!important;
}

.form-icon {
    @icon-size: 110px;
    font-size: @icon-size * 2;
}

.form-icon13 {
    @icon-size: 100px;
    width: @icon-size;
    height: @icon-size;
    text-align: center;
    line-height: @icon-size;
    font-size: @icon-size * 1.1;
}

.wpcf7-validation-errors, .wpcf7-mail-sent-ng {
    .alert!important;
    .alert-danger!important;
    margin: 30px 0!important;
}

.wpcf7-mail-sent-ok {
    .alert!important;
    .alert-success!important;
    margin: 30px 0!important;
}

.wpcf7-not-valid {
    border: solid lighten(#f00, 20%) 1px;
}

Dzięki czemu formularz prezentuje się następująco:

Pod tym linkiem znaleźć można nieco inny, ale już skompilowany LESS do CSS, a także inne dodatki do tego artykułu:

https://gist.github.com/ziemekpr0/f0e1825b76539b142f94

A tutaj jeszcze podobny formularz, ale tym razem dla starszej, drugiej wersji Bootstrapa (Bootstrap 2.3.2):

https://gist.github.com/ziemekpr0/163deb2a092003e31e56

 

 

Konfiguracja pól Contact Form 7

Skoro postanowiliśmy już dodać kolejne pola do formularza, to teraz trzeba je wszystkie skonfigurować. Warto wypisać sobie nazwy wszystkich pól znajdujących się w formularzu, aby żadnego nie przegapić. Ja skorzystałem z tych pól:

• [your-name]
• [your-surname]
• [your-email]
• [your-phone]
• [your-subject]
• [your-message]

Przechodzimy na zakładkę E-mail i edytujemy zgodnie z naszymi preferencjami. U mnie wygląda to tak:

Podsumowanie

Największa korzyść płynąca z wykorzystania gotowych stylów Bootstrapa w CF7, to oczywiście oszczędność czasu, gdyż nie musimy pisać kilkuset linijek kodu CSS, aby prawidłowo ostylować jeden formularz. Dzięki siatce, klasom do regulowania wyglądu i rozmiaru kontrolek formularza, czy sposobów w jaki te kontrolki będą się układać, możliwe jest jego dostosowanie w praktycznie dowolny sposób.

Niestety jest to temat dla nieco bardziej zaawansowanych użytkowników i wiele osób niestety dalej pozostanie z problemem. Na szczęście istnieją alternatywne rozwiązania – od skorzystania z wbudowanych w motyw formularzy, poprzez komercyjną alternatywę dla CF7 – Gravity Forms, aż po wtyczki do wtyczki CF7, która sama wygeneruje kod kompatybilny z Bootstrapem – Bootstrap for Contact Form 7.

Jakoś dziwnie prezentuje się ten wpis. Gdy zaczynałem go pisać miałem zupełnie inne założenia i zupełnie inaczej miało to wyglądać. W trakcie pisania okazało się że napisałem pół książki o tym po co to wszystko robić. Wreszcie uznałem że być może nie wszystkich interesuje jakaś tam geneza, a raczej woleliby od razu zobaczyć gotowe przykłady, skasowałem więc połowę wyjaśnień i tym sposobem jesteśmy już przy końcu artykułu… 🙂