Szybkie wsparcie: 511 280 732 lub [email protected]
Dominik Krawiec ✅ Ekspert SEO & WordPress

Jak dodać pop-up z formularzem kontaktowym w WordPress?

Dodanie pop-upu z formularzem w WordPress może znacząco zwiększyć zaangażowanie użytkowników oraz konwersje na stronie. Wiele osób jednak nie wie, jak w prosty sposób zaimplementować takie rozwiązanie bez zaawansowanej wiedzy programistycznej. W tym artykule pokażę Ci, jak krok po kroku dodać pop-up z formularzem kontaktowym, korzystając z dostępnych wtyczek oraz narzędzi WordPress.

Po co tracisz czas?

Ciągłe wprowadzanie poprawek na swojej stronie to uciążliwe zajęcie.
Z pewnością masz ważniejsze sprawy na głowie.
Zadbam o Twojego WordPressa.

... jeśli koniecznie chcesz zrobić to samodzielnie

Wykonaj poniższe kroki.

  1. Przejdź do zakładki Wtyczki > Dodaj wtyczkę.
  2. Wyszukaj i zainstaluj plugin Popup Maker.
  3. W nowym popupie dodaj shortcode swojego formularza.

Metoda 1: Wtyczka Popup Maker

Aby dodać pop-up z formularzem, warto użyć wtyczki Popup Maker. Pierwszym krokiem jest zainstalowanie i aktywowanie tej wtyczki z repozytorium WordPress. Po aktywacji, w menu nawigacyjnym pojawi się nowa opcja „Popups”.

W sekcji „Popups” kliknij „Add New”. Nadaj nazwę swojemu pop-upowi i ustaw jego właściwości, takie jak rozmiar i animacje. Następnie dodaj treść, którą chcesz wyświetlić, czyli formularz kontaktowy.

Pomocna może być tu kolejna wtyczka, np. Contact Form 7, która łatwo integruje się z Popup Maker. Po stworzeniu formularza w Contact Form 7, skopiuj jego shortcode i wklej go do treści pop-upu.

contact form 7 shortcode

Warto również skonfigurować warunki wyświetlania pop-upu, takie jak czas opóźnienia czy akcje użytkownika (np. kliknięcie w link). Dzięki temu, pop-upy będą bardziej przyjazne dla użytkowników.

Zaletą tej metody jest łatwa integracja i elastyczność w konfiguracji. Wadą mogą być potencjalne konflikty z innymi wtyczkami oraz potrzeba regularnych aktualizacji.

Metoda 2: Wtyczka Elementor Pro

Elementor Pro to wszechstronne narzędzie do budowy stron w WordPress. Aby dodać pop-up z formularzem, zainstaluj Elementor Pro i przejdź do opcji „Templates”, a następnie „Popups”.

Tworząc nowy pop-up w Elementorze, możesz w pełni dostosować jego wygląd za pomocą edytora wizualnego. Dodaj sekcję z formularzem, wybierając widżet Contact Form z elementów dostępnych w Elementorze.

Możesz ustawić warunki wyświetlania, takie jak określone strony lub konkretne działania użytkowników. Elementor Pro oferuje również zaawansowane reguły wyświetlania, np. po określonym czasie spędzonym na stronie.

Stylizacja formularza jest prosta dzięki edytorowi wizualnemu. Upewnij się, że odpowiednie pola są klarowne i łatwe do wypełnienia dla użytkowników, co zwiększy ich zaangażowanie.

Główne zalety to intuicyjność i potężne możliwości aranżacji. Wady obejmują wyższą cenę w porównaniu do darmowych rozwiązań oraz potrzebę nauki podstaw narzędzia.

Metoda 3: Kodowanie ręczne

Dla bardziej zaawansowanych użytkowników istnieje opcja ręcznego dodawania pop-upu za pomocą kodu. Można to zrobić poprzez dodanie odpowiednich skryptów i stylów do plików motywu (np. functions.php lub header.php).

Najpierw stwórz formularz kontaktowy w HTML i CSS:

<div id="popup" class="popup">
    <div class="popup-content">
        <span class="close-button">&times;</span>
        <!-- Shortcode for Contact Form 7 -->
        <?php echo do_shortcode('[contact-form-7 id="123" title="Contact form 1"]'); ?>
    </div>
</div>

Dodaj stylizację dla pop-upu w pliku CSS motywu, aby zapewnić jego atrakcyjny wygląd. Poprawność wyświetlania na różnych urządzeniach można zagwarantować poprzez zastosowanie technik responsywnego designu. Poniżej znajdziesz przykładowe style:

/* styles.css */
body {
font-family: Arial, sans-serif;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}

.popup {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
}

.popup-content {
background: white;
padding: 20px;
border-radius: 5px;
width: 80%;
max-width: 500px;
position: relative;
}

.close-button {
position: absolute;
top: 10px;
right: 10px;
font-size: 24px;
cursor: pointer;
}

A następnie dodaj skrypty JavaScript/jQuery, które będą wywoływać pop-up:

// scripts.js
document.addEventListener('DOMContentLoaded', function() {
    var popup = document.getElementById('popup');
    var openPopupButton = document.getElementById('open-popup');
    var closeButton = document.querySelector('.close-button');

    openPopupButton.addEventListener('click', function() {
        popup.style.display = 'flex';
    });

    closeButton.addEventListener('click', function() {
        popup.style.display = 'none';
    });

    window.addEventListener('click', function(event) {
        if (event.target === popup) {
            popup.style.display = 'none';
        }
    });
});

Ten kod wyświetla przycisk, który po kliknięciu otwiera popup z formularzem Contact Form 7. Upewnij się, że zmieniłeś ID formularza na odpowiednie.

Atutem tej metody jest brak zależności od wtyczek i pełna kontrola nad funkcjonalnością. Wadą natomiast są wyższe wymagania techniczne oraz potencjalne problemy z kompatybilnością przy przyszłych aktualizacjach WordPress.

Zadbam o Twoją stronę internetową

Wypełnij poniższy formularz - odezwę się do Ciebie, by porozmawiać o Twojej stronie internetowej.



    Wysyłając wiadomość, akceptujesz politykę prywatności i wyrażasz zgodę na przetwarzanie podanych danych osobowych w celu przygotowania oferty.
    🔒 Twoje dane są bezpieczne.

    Copyright 2024 WooCado - Opieka nad stroną Polityka prywatności