En användare fyllde i ett formulär, klickade på "Skicka" och ingenting hände. Sidan laddades om, fälten rensades, men om mejlet faktiskt skickades är oklart.

Contact Form 7 visar inga visuella notifieringar efter inskickning direkt ur lådan. Meddelanden om lyckad eller misslyckad inskickning döljs under formuläret i liten text, utan animation, utan betoning. Användare lägger helt enkelt inte märke till dem och lämnar sidan utan att veta om deras inskickning togs emot.

Du kan fixa detta på 10 minuter. Allt du behöver är Contact Form 7, valfritt popup-plugin med ett JavaScript-API och 25 rader kod. Resultatet: efter att formuläret skickats visas ett stort fönster smidigt över sidan (grönt för lyckat, rött för fel) och försvinner automatiskt efter ett inställt intervall. Ingen sidomladdning, inga förlorade leads.

💡 Snabb översikt:

• Vilka DOM-event Contact Form 7 utlöser och hur moderna namn skiljer sig från äldre varianter
• Hur du skapar popups för lyckad och misslyckad inskickning i valfritt WordPress popup-plugin
• CSS-stilar för popups: overlay, animation, z-index
• Ett färdigt jQuery-skript: koppla CF7-event till öppning och automatisk stängning av popup
• Ett modernt alternativ med addEventListener utan jQuery
• Konfigurera visningstid separat för lyckad och misslyckad inskickning

Vilka DOM-event Contact Form 7 utlöser

Contact Form 7 genererar anpassade DOM-event i varje steg av formulärhanteringen. Här är den kompletta listan från den officiella dokumentationen:

För popups efter inskickning behöver du två event: wpcf7mailsent (lyckat) och wpcf7invalid (valideringsfel). Du kan också använda wpcf7spam för ett separat varningsfönster, men i praktiken räcker de två första.

Viktigt att notera: i äldre guider och kodsnuttar skrivs eventen med kolon. Till exempel wpcf7:mailsent och wpcf7:invalid. Denna syntax användes i jQuery-hooks i tidigare CF7-versioner. Idag fungerar det fortfarande för bakåtkompatibilitet, men de kanoniska namnen innehåller inte kolon. I koden nedan ger jag båda varianterna: den moderna med addEventListener och jQuery-varianten för projekt där jQuery redan är inläst.

Objektet event.detail innehåller användbara egenskaper: contactFormId (det specifika formulärets ID), pluginVersion (CF7-version), inputs (array med inmatad data). Om du har flera formulär på en sida, filtrera på contactFormId så att popupen bara öppnas för det avsedda formuläret.

Steg 1: välj ett popup-plugin och skapa fönster

Du behöver ett popup-plugin med ett JavaScript-API så att fönstret kan öppnas programmatiskt från ett skript. Två beprövade gratisalternativ från WordPress.orgs plugin-katalog:

• Popup Maker, 700 000+ aktiva installationer, 4,9/5 i betyg. Anrop: PUM.open(popup_id). Kraftfull gratis grund, sidinriktning, tids- och scroll-utlösare, integration med populära formulär. Det största communityt där du hittar svar på alla frågor.
• WP Popups, 20 000+ aktiva installationer. Anrop: SPU.show(popup_id). Visuell Gutenberg-baserad redigerare, visningsfilter, stöd för Contact Form 7 direkt ur lådan. Lättviktigt och snabbt.

Skapa två popups: en för lyckad inskickning, en annan för fel. I varje placerar du en bild, text och eventuellt en "Stäng"-knapp. Notera ID:t för varje fönster eftersom du behöver dem i skriptet i steg 3. Exemplen nedan använder ID 1068 (lyckat) och 1065 (fel); dina kommer att vara annorlunda.

Så här ser popup-fönstren ut med konfigurerade stilar:

Popup för lyckad inskickning: grön bakgrund, bekräftelseikon och text.

Felfönster: röd bakgrund, varningsikon och en uppmaning att kontrollera inmatad data.

Och här är bilderna för att placera inuti popup-fönstren:

Du kan ersätta dessa bilder med dina egna genom att ange andra sökvägar i popup-plugins inställningar.

Steg 2: CSS-stilar för popups

Popup-plugins exporterar inte alltid anpassad CSS. Om stilarna inte tillämpas efter att du skapat fönstren, lägg till dem manuellt: Plugin Settings → Custom CSS, eller Appearance → Customize → Additional CSS.

Stilar för popupen vid lyckad inskickning (grön overlay, maximal z-index):

1
div#spu-bg-1068 {
2
    opacity: 0.6;
3
    background-color: green;
4
    z-index: 9999999;
5
}
6
div#spu-1068 {
7
    z-index: 99999999;
8
}

Stilar för felpopupen (röd overlay):

1
div#spu-bg-1065 {
2
    opacity: 0.6;
3
    background-color: #F44336;
4
    z-index: 9999999;
5
}
6
div#spu-1065 {
7
    z-index: 99999999;
8
}

Vad som händer här: #spu-bg-N är den halvtransparenta bakgrunden (overlay). #spu-N är själva fönstret. Det höga z-indexet ser till att popupen täcker alla sidelement, inklusive adminfältet.

Om du använder ett annat popup-plugin, byt ut selektorerna. Popup Maker genererar #pum-N och .pum-overlay[data-popmake*="N"]. WP Popups använder sina egna prefix; kontrollera i webbläsarens inspector (F12) för att se de faktiska ID:na för dina fönster.

Steg 3: jQuery-skript som kopplar ihop CF7 och popups

Skriptet kan infogas på tre sätt: i ditt barntemas functions.php, via tillägget Code Snippets, eller i ditt temas anpassade JavaScript-sektion. Innan du redigerar functions.php, gör en säkerhetskopia; ett enda syntaxfel kan krascha sajten.

Här är den kompletta koden med kommentarer. Den fångar två Contact Form 7-händelser och anropar popup-plugins API:

1
// START: Contact Form 7 + Popups — popups for success and error
2
jQuery(document).ready(function($) {
3
 
4
    // Popup for validation ERROR (fields empty or invalid)
5
    $(".wpcf7").on('wpcf7:invalid', function(event) {
6
        SPU.show(1065);   // Error popup ID — replace with yours
7
        setTimeout(function() {
8
            $('div#spu-1065, div#spu-bg-1065').fadeOut(600, 'swing');
9
        }, 5500);          // auto-close after 5.5 seconds
10
    });
11
 
12
    // Popup for SUCCESSFUL submission
13
    $(".wpcf7").on('wpcf7:mailsent', function(event) {
14
        SPU.show(1068);   // Success popup ID — replace with yours
15
        setTimeout(function() {
16
            $('div#spu-1068, div#spu-bg-1068').fadeOut(600, 'swing');
17
        }, 3500);          // auto-close after 3.5 seconds
18
    });
19
 
20
});
21
// END: Contact Form 7 + Popups

Vad du behöver ersätta för ditt projekt:

• SPU.show(N) med ditt popup-plugins metod. För Popup Maker: PUM.open(N).
• 1065 och 1068 med dina popup-ID:n. Du hittar dem i plugins adminpanel.
• Tid i setTimeout (millisekunder). 5500 = 5,5 sekunder, 3500 = 3,5 sekunder. Anpassa efter eget tycke.
• Selektorerna div#spu-N och div#spu-bg-N; ersätt om ditt plugin genererar andra ID:n.

Modern alternativ utan jQuery. Om ditt tema inte laddar jQuery eller om du vill ha ett lättare alternativ, använd inbyggda CF7-händelser via addEventListener:

1
document.addEventListener('wpcf7mailsent', function(event) {
2
    // event.detail.contactFormId — ID of specific form (if there are multiple)
3
    PUM.open(1068);
4
    setTimeout(function() {
5
        document.querySelector('#pum-1068').style.display = 'none';
6
        document.querySelector('.pum-overlay[data-popmake*="1068"]').style.display = 'none';
7
    }, 3500);
8
}, false);
9
 
10
document.addEventListener('wpcf7invalid', function(event) {
11
    PUM.open(1065);
12
    setTimeout(function() {
13
        document.querySelector('#pum-1065').style.display = 'none';
14
        document.querySelector('.pum-overlay[data-popmake*="1065"]').style.display = 'none';
15
    }, 5500);
16
}, false);

Denna variant fungerar med Popup Maker och kräver inte jQuery. Händelserna wpcf7mailsent och wpcf7invalid (utan kolon) är den moderna standarden.

Om du har flera formulär på en sida, filtrera efter contactFormId:

1
document.addEventListener('wpcf7mailsent', function(event) {
2
    if ('123' === event.detail.contactFormId) {
3
        PUM.open(1068);  // popup only for form ID=123
4
    }
5
}, false);

Konfigurera automatisk stängning

Intervallet för varje popup ställs in separat med det andra argumentet i setTimeout i millisekunder. Praktiska rekommendationer:

• Lyckad inskickning: 3-5 sekunder. Användaren har redan läst "skickat", så det finns ingen anledning att hålla kvar den längre.
• Fel: 5-7 sekunder. Personen behöver tid att bearbeta problemet, läsa om meddelandet och förstå vilka fält som ska åtgärdas.
• Spam (wpcf7spam): 8-10 sekunder. Ge tillräckligt med tid för att läsa varningen fullständigt, men lås inte sidan helt.

Värdet 600 i fadeOut(600, 'swing') är animationens varaktighet för uttoningen i millisekunder. Mindre än 400 ser ryckigt ut, mer än 800 känns långsamt. 600 är den optimala balansen.

Om du har flera popups och vill ha olika varaktighet för olika formulär, slå in setTimeout-anropet i en contactFormId-kontroll, som visas i exemplet ovan.

Steg-för-steg-videoguide: konfigurera en popup efter Contact Form 7-inskickning från grunden. Om du är ny på WordPress eller föredrar att titta framför att läsa kod, täcker dessa 8 minuters skärmtid halva artikeln.

⁉️🤔 Vanliga frågor

Popup-fönstret öppnas inte efter att formuläret skickats. Vad är fel?

Den vanligaste orsaken: popup-ID:t matchar inte det som anges i skriptet. Gå till adminpanelen för ditt popup-plugin, hitta det faktiska fönster-ID:t och ersätt det i anropet SPU.show(N) eller PUM.open(N). Den andra orsaken: jQuery är inte inläst eller orsakar en konflikt. Kontrollera webbläsarens konsol (F12 → Console) efter fel. Popup-plugins tilldelar nya nummer till fönster vid kloning eller import medan det gamla ID:t från kodsnutten finns kvar; verifiera alltid numren efter import.

Måste jag installera ett separat popup-plugin? Kan jag inte bara använda en alert?

Tekniskt sett ja: ersätt SPU.show(N) med alert('Thank you!') så visas ett meddelande. Men alert låser sidan, ser främmande ut och irriterar besökare. En anpassad popup med din design, ikon och mjuk animation är en del av webbplatsen snarare än en systemdialog från webbläsaren. Enligt vår erfarenhet från flera projekt minskar en ersättning av alert med en profilerad popup märkbart den omedelbara avvisningsfrekvensen.

Koden fungerar bara för ett formulär. Hur får jag den att fungera för flera formulär?

Använd filtrering med event.detail.contactFormId. För jQuery-varianten, slå in anropet i en kontroll: if (event.detail.contactFormId === 123) { SPU.show(1068); }. För vanilla JS finns ett exempel med ett villkor i steg 3.

Vad händer om jQuery inte är inläst på webbplatsen?

Använd addEventListener-varianten från steg 3. Den kräver inte jQuery och fungerar i alla moderna webbläsare. Den enda nyansen: att stänga popup-fönstret via native DOM görs genom att manuellt dölja elementet eftersom metoden fadeOut inte är tillgänglig. Som ett alternativ kan du lägga till en CSS-klass med transition och växla den.

Kan jag använda en popup för alla formulär på webbplatsen?

Ja, om meddelandetexten är universell. Skapa en popup för lyckad sändning och en för fel, och öppna dem sedan för alla wpcf7mailsent- och wpcf7invalid-händelser utan att filtrera på contactFormId. Men om formulär på olika sidor har olika sammanhang är det bättre att skapa separata fönster. "Förfrågan om konsultation mottagen" och "Prenumeration bekräftad" ser olika ut.

Popup Maker eller WP Popups: vilket ska du välja för ditt projekt

Valet handlar om tre scenarier:

• Behöver du maximala funktioner och integrationer? Välj Popup Maker. Sidmålgruppsanpassning, tids- och scrollutlösare, integration med dussintals formulär-plugins, stort community. Den kostnadsfria grundversionen täcker 90% av användningsfallen.
• Vill du ha enkelhet och en visuell Gutenberg-redigerare? Ditt val är WP Popups. Modernt gränssnitt, snabb installation, mindre overhead. Fungerar med Contact Form 7 direkt ur lådan.
• Behöver du en popup med ett Contact Form 7-formulär inuti? Det är ett annat scenario (inte meddelanden efter inskick, utan ett formulär i ett modalfönster som utlöses av ett knappklick). För detta finns det specialiserade WPB Popup for Contact Form 7, som öppnar ett CF7-formulär i en popup istället för att reagera på att det skickas.

Båda notifierings-pluginsen är gratis och finns i WordPress.org-katalogen. Välj det som passar din teknikstack bäst och ersätt dess API-anrop i skriptet från steg 3. Själva popup-ämnet kan utforskas i det oändliga: A/B-testning av meddelandetext, fördröjningar baserade på lästid, olika fönster för olika formulär. Men grunden (CF7-händelse + popup-anrop + automatisk stängning) täcker de allra flesta verkliga uppgifter på WordPress-webbplatser.