Divi – formularz kontaktowy po kliknięciu

Jak otworzyć formularz kontaktowy Divi po kliknięciu przycisku?

W niektórych projektach wykonanych w Divi formularz kontaktowy nie musi być cały czas widoczny na stronie. Można umieścić go w wysuwanym oknie, popupie lub ukrytej sekcji i wyświetlać dopiero po kliknięciu przycisku, np. „Zapytaj o ofertę”, „Skontaktuj się” albo „Napisz do nas”.

Takie rozwiązanie pozwala zachować przejrzysty wygląd strony, a jednocześnie umożliwia szybki kontakt z użytkownikiem.

Formularz kontaktowy Divi ukryty do momentu kliknięcia

Jednym z prostszych sposobów jest przygotowanie formularza w osobnej sekcji Divi i ukrycie jej za pomocą CSS.

Najpierw dodaj formularz kontaktowy Divi do strony. Następnie w ustawieniach sekcji, w której znajduje się formularz, przejdź do:

Advanced → CSS ID & Classes

i nadaj sekcji ID:

formularz-kontaktowy

Następnie dodaj CSS:

#formularz-kontaktowy {
    display: none;
}

Formularz będzie niewidoczny po załadowaniu strony.

Przycisk otwierający formularz

Dodaj na stronie przycisk Divi, np.:

Zapytaj o ofertę

W ustawieniach przycisku przejdź do:

Advanced → CSS ID & Classes

i nadaj mu ID:

otworz-formularz

Następnie można wykorzystać JavaScript, aby po kliknięciu przycisku formularz stał się widoczny.

jQuery(document).ready(function($) {

    $('#otworz-formularz').on('click', function(e) {
        e.preventDefault();

        $('#formularz-kontaktowy').fadeIn(300);

    });

});

Po kliknięciu przycisku formularz zostanie wyświetlony z krótkim efektem pojawiania się.

Formularz jako popup

Jeżeli formularz ma pojawiać się jako okno na środku ekranu, można wykorzystać dodatkowe style CSS.

Przykład:

#formularz-kontaktowy {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    padding: 30px;
    z-index: 99999;
    box-shadow: 0 10px 40px rgba(0,0,0,0.25);
}

Dzięki temu formularz zostanie wyświetlony nad zawartością strony.

Ciemne tło za formularzem

Dla popupu warto dodać również przyciemnienie pozostałej części strony.

Można przygotować dodatkowy element overlay:

<div id="formularz-overlay"></div>

i CSS:

#formularz-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 99998;
}

Następnie JavaScript może wyświetlać jednocześnie formularz oraz overlay.

Przycisk zamykający formularz

W formularzu można umieścić przycisk zamykający, np.:

<button id="zamknij-formularz" type="button">×</button>

JavaScript:

jQuery(document).ready(function($) {

    $('#otworz-formularz').on('click', function(e) {
        e.preventDefault();

        $('#formularz-overlay').fadeIn(200);
        $('#formularz-kontaktowy').fadeIn(300);
    });

    $('#zamknij-formularz, #formularz-overlay').on('click', function() {

        $('#formularz-kontaktowy').fadeOut(200);
        $('#formularz-overlay').fadeOut(200);

    });

});

W ten sposób użytkownik może zamknąć formularz zarówno przyciskiem ×, jak i klikając poza jego obszarem.

Formularz kontaktowy Divi po kliknięciu w numer telefonu

Podobne rozwiązanie można zastosować do przycisku:

Zamów kontakt

Poproś o wycenę

Zapytaj o usługę

Umów rozmowę

Można również przygotować przycisk w nagłówku strony, który po kliknięciu otworzy formularz bez przeładowania strony.

Jest to szczególnie wygodne w przypadku stron usługowych, gdzie użytkownik może przejść do formularza bez przewijania całej strony.

Formularz Divi na telefonie

Popup powinien być odpowiednio dostosowany do urządzeń mobilnych. W przeciwnym razie formularz może być zbyt szeroki albo jego przycisk zamknięcia może znajdować się poza ekranem.

Przykładowe ustawienia:

@media (max-width: 767px) {

    #formularz-kontaktowy {
        width: 90%;
        max-height: 85vh;
        padding: 20px;
    }

}

Dzięki temu formularz będzie mieścił się na ekranie telefonu.

Formularz Divi bez dodatkowej wtyczki

Jeżeli strona korzysta ze starszej wersji Divi, takie rozwiązanie można przygotować bez instalowania kolejnej wtyczki.

Potrzebne są:

• moduł Contact Form Divi,
• przycisk Divi,
• CSS,
• JavaScript/jQuery.

Dzięki temu można zachować prostą konstrukcję strony i uniknąć instalowania dodatkowego systemu popupów.

Na co zwrócić uwagę?

Przed wdrożeniem warto sprawdzić:

• działanie formularza na komputerze,
• działanie na telefonie,
• zamykanie popupu,
• wysyłkę wiadomości,
• komunikaty po wysłaniu formularza,
• prawidłowe działanie przy włączonym cache,
• zgodność z używaną wersją Divi.

Jeżeli formularz ma zbierać dane osobowe, należy również zadbać o odpowiednią informację dotyczącą przetwarzania danych oraz wymagane zgody.

Podsumowanie

Formularz kontaktowy Divi otwierany po kliknięciu pozwala ograniczyć ilość elementów widocznych na stronie i jednocześnie zapewnić użytkownikowi szybki dostęp do kontaktu.

W starszych wersjach Divi można przygotować takie rozwiązanie za pomocą CSS i JavaScript, bez konieczności instalowania dodatkowej wtyczki.

Przycisk „Zapytaj o ofertę” może wtedy otwierać estetyczny formularz kontaktowy w popupie, a użytkownik może go zamknąć po wysłaniu wiadomości lub kliknięciu poza oknem.