En bruker fylte ut et skjema, klikket «Send», og ingenting skjedde. Siden ble lastet på nytt, feltene ble tømt, men om e-posten faktisk ble sendt, forblir uklart.

Contact Form 7 viser ikke visuelle tilbakemeldinger etter innsending ut av boksen. Suksess- eller feilmeldinger skjuler seg under skjemaet i liten tekst, uten animasjon, uten fremheving. Brukere legger rett og slett ikke merke til dem og forlater siden uten å vite om innsendingen ble mottatt.

Du kan fikse dette på 10 minutter. Alt du trenger er selve Contact Form 7, et popup-tillegg med et JavaScript-API og 25 linjer med kode. Resultatet: etter innsending av skjemaet vises et stort vindu jevnt over siden (grønt for suksess, rødt for feil) og forsvinner automatisk etter et angitt intervall. Ingen sidelasting, ingen tapte leads.

💡 Hurtigoversikt:

• Hvilke DOM-hendelser Contact Form 7 utløser og hvordan moderne navn skiller seg fra eldre
• Hvordan opprette suksess- og feilpopuper i et hvilket som helst WordPress popup-tillegg
• CSS-stiler for popuper: overlegg, animasjon, z-indeks
• Et ferdig jQuery-skript: binding av CF7-hendelser til popup-åpning og automatisk lukking
• Et moderne alternativ med addEventListener uten jQuery
• Konfigurering av visningsvarighet separat for suksess og feil

Hvilke DOM-hendelser Contact Form 7 utløser

Contact Form 7 genererer egendefinerte DOM-hendelser ved hvert trinn i skjemabehandlingen. Her er den komplette listen fra den offisielle dokumentasjonen:

For popuper etter innsending trenger du to hendelser: wpcf7mailsent (suksess) og wpcf7invalid (valideringsfeil). Du kan også bruke wpcf7spam for et eget advarselsvindu, men i praksis er de to første nok.

Viktig merknad: i eldre veiledninger og kodebiter skrives hendelser med kolon. For eksempel wpcf7:mailsent og wpcf7:invalid. Denne syntaksen ble brukt i jQuery-hooks i tidligere CF7-versjoner. I dag fungerer det fortsatt for bakoverkompatibilitet, men de kanoniske navnene inkluderer ikke kolon. I koden nedenfor gir jeg begge variantene: den moderne med addEventListener og jQuery-varianten for prosjekter der jQuery allerede er lastet.

Objektet event.detail inneholder nyttige egenskaper: contactFormId (ID-en til det spesifikke skjemaet), pluginVersion (CF7-versjon), inputs (array med inntastede data). Hvis du har flere skjemaer på en side, filtrer etter contactFormId slik at popupen bare åpnes for det tiltenkte skjemaet.

Trinn 1: velg et popup-tillegg og opprett vinduer

Du trenger et popup-tillegg med et JavaScript-API slik at vinduet kan åpnes programmatisk fra et skript. To velprøvde gratisalternativer fra WordPress.orgs tilleggskatalog:

• Popup Maker, 700 000+ aktive installasjoner, vurdering 4,9/5. Kall: PUM.open(popup_id). Kraftfull gratis kjerne, sidemålretting, tids- og rulleutløsere, integrasjon med populære skjemaer. Det største fellesskapet der du finner svar på ethvert spørsmål.
• WP Popups, 20 000+ aktive installasjoner. Kall: SPU.show(popup_id). Visuell Gutenberg-basert editor, visningsfiltre, Contact Form 7-støtte ut av boksen. Lett og raskt.

Opprett to popuper: én for vellykket innsending, en annen for feil. I hver av dem plasserer du et bilde, tekst og eventuelt en «Lukk»-knapp. Noter ID-en til hvert vindu, siden du trenger dem i skriptet i trinn 3. Eksemplene nedenfor bruker ID-ene 1068 (suksess) og 1065 (feil); dine vil være annerledes.

Slik ser popupene ut med konfigurerte stiler:

Popup for vellykket innsending: grønn bakgrunn, bekreftelsesikon og tekst.

Feilvindu: rød bakgrunn, advarselsikon og en forespørsel om å sjekke inntastede data.

Og her er bildene for plassering inne i popupene:

Du kan erstatte disse bildene med dine egne ved å angi andre filbaner i innstillingene for popup-tillegget.

Trinn 2: CSS-stiler for popuper

Popup-plugins eksporterer ikke alltid tilpasset CSS. Hvis stilene ikke vises etter at du har opprettet vinduene, legger du dem til manuelt: Plugin-innstillinger → Tilpasset CSS, eller Appearance → Customize → Additional CSS.

Stiler for popup ved vellykket innsending (grønt overlegg, maksimal z-indeks):

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
}

Stiler for feilpopup (rødt overlegg):

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
}

Hva som skjer her: #spu-bg-N er det halvgjennomsiktige bakteppet (overlegget). #spu-N er selve vinduet. Den høye z-indeksen sørger for at popupen dekker alle sideelementer, inkludert admin-linjen.

Hvis du bruker en annen popup-plugin, bytter du ut selektorene. Popup Maker genererer #pum-N og .pum-overlay[data-popmake*="N"]. WP Popups bruker sine egne prefikser; sjekk nettleserinspektøren (F12) for de faktiske ID-ene til vinduene dine.

Steg 3: jQuery-skript som kobler CF7 og popups

Skriptet kan settes inn på én av tre måter: i barnetemaets functions.php, via Code Snippets-pluginen, eller i temaets egendefinerte JavaScript-seksjon. Før du redigerer functions.php, ta en sikkerhetskopi; én syntaksfeil vil knekke nettstedet.

Nedenfor er den komplette koden med kommentarer. Den fanger opp to Contact Form 7-hendelser og kaller popup-pluginens 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

Hva du må erstatte for ditt prosjekt:

• SPU.show(N) med popup-pluginens metode. For Popup Maker: PUM.open(N).
• 1065 og 1068 med dine popup-ID-er. Finn dem i pluginens adminpanel.
• Tid i setTimeout (millisekunder). 5500 = 5,5 sekunder, 3500 = 3,5 sekunder. Juster etter eget ønske.
• Selektorene div#spu-N og div#spu-bg-N; erstatt hvis pluginen din genererer andre ID-er.

Moderne alternativ uten jQuery. Hvis temaet ditt ikke laster jQuery eller du ønsker et lettere alternativ, bruk native CF7-hendelser 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);

Denne varianten fungerer med Popup Maker og krever ikke jQuery. Hendelsene wpcf7mailsent og wpcf7invalid (uten kolon) er den moderne standarden.

Hvis du har flere skjemaer på en side, filtrer etter 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);

Konfigurering av tidspunkt for automatisk lukking

Intervallet for hver popup settes separat ved hjelp av det andre argumentet til setTimeout i millisekunder. Praktiske anbefalinger:

• Suksess: 3-5 sekunder. Brukeren har allerede lest «sendt», så det er ikke nødvendig å holde den lenger.
• Feil: 5-7 sekunder. Personen trenger tid til å bearbeide problemet, lese meldingen på nytt og forstå hvilke felt som må rettes.
• Søppelpost (wpcf7spam): 8-10 sekunder. Gi nok tid til å lese advarselen fullstendig, men ikke lås siden helt.

Verdien 600 i fadeOut(600, 'swing') er varigheten på uttoningsanimasjonen i millisekunder. Mindre enn 400 ser hakkete ut, mer enn 800 føles tregt. 600 er det optimale.

Hvis du har flere popups og ønsker ulik varighet for ulike skjemaer, pakker du setTimeout-kallet inn i en contactFormId-sjekk, som vist i eksempelet over.

Steg-for-steg videoopplæring: oppsett av en popup etter innsending av Contact Form 7 fra bunnen av. Hvis du er ny til WordPress eller foretrekker å se fremfor å lese kode, dekker disse 8 minuttene med skjermtid halve artikkelen.

⁉️🤔 Ofte stilte spørsmål

Popup-vinduet åpnes ikke etter at skjemaet er sendt inn. Hva er galt?

Den vanligste årsaken: popup-ID-en samsvarer ikke med det som er angitt i skriptet. Gå til administrasjonspanelet for popup-utvidelsen din, finn det faktiske vinduets ID, og bytt det ut i kallet SPU.show(N) eller PUM.open(N). Den andre årsaken: jQuery er ikke lastet inn eller er i konflikt. Sjekk nettleserkonsollen (F12 → Konsoll) for feil. Popup-utvidelser tildeler nye numre til vinduer under kloning eller import, mens den gamle ID-en fra kodebiten blir værende; verifiser alltid numrene etter import.

Må jeg installere en egen popup-utvidelse? Kan jeg bare bruke en alert?

Teknisk sett ja: bytt ut SPU.show(N) med alert('Thank you!'), så vises et varsel. Men alert låser siden, ser fremmed ut og irriterer besøkende. En tilpasset popup med ditt design, ikon og myk animasjon er en del av nettstedet i stedet for en systemdialog fra nettleseren. Etter vår erfaring fra flere prosjekter reduserer det å erstatte alert med en merkevaretilpasset popup den umiddelbare fluktfrekvensen merkbart.

Koden fungerer bare for ett skjema. Hvordan får jeg den til å fungere for flere skjemaer?

Bruk filtrering med event.detail.contactFormId. For jQuery-varianten, pakk kallet inn i en sjekk: if (event.detail.contactFormId === 123) { SPU.show(1068); }. For vanilla JS er et eksempel med en betingelse gitt i trinn 3.

Hva om jQuery ikke er lastet inn på nettstedet?

Bruk addEventListener-varianten fra trinn 3. Den krever ikke jQuery og fungerer i alle moderne nettlesere. Den eneste nyansen: å lukke popup-vinduet via native DOM gjøres ved å skjule elementet manuelt, siden fadeOut-metoden ikke er tilgjengelig. Som et alternativ kan du legge til en CSS-klasse med transition og veksle den.

Kan jeg bruke én popup for alle skjemaer på nettstedet?

Ja, hvis varselteksten er universell. Opprett én suksess-popup og én feil-popup, og åpne dem for alle wpcf7mailsent- og wpcf7invalid-hendelser uten å filtrere etter contactFormId. Men hvis skjemaer på forskjellige sider har ulik kontekst, er det bedre å opprette separate vinduer. «Forespørsel om konsultasjon mottatt» og «Abonnement bekreftet» ser forskjellige ut.

Popup Maker eller WP Popups: hvilken bør du velge for prosjektet ditt

Valget koker ned til tre scenarioer:

• Trenger du maksimalt med funksjoner og integrasjoner? Gå for Popup Maker. Sidemålretting, tids- og rulleutløsere, integrasjon med dusinvis av skjemautvidelser, stort fellesskap. Den gratis kjernen dekker 90% av brukstilfellene.
• Ønsker du enkelhet og en visuell editor i Gutenberg? Ditt valg er WP Popups. Moderne grensesnitt, raskt oppsett, mindre overhead. Fungerer med Contact Form 7 rett ut av boksen.
• Trenger du en popup med et Contact Form 7-skjema inni? Det er et annet scenario (ikke varsler etter innsending, men et skjema i et modalt vindu utløst av et knappeklikk). For dette finnes den spesialiserte WPB Popup for Contact Form 7, som åpner et CF7-skjema i en popup i stedet for å reagere på innsendingen.

Begge varselutvidelsene er gratis og tilgjengelige i WordPress.org-katalogen. Velg den som passer best i din teknologistakk og bytt ut API-kallet i skriptet fra trinn 3. Selve popup-temaet kan utforskes i det uendelige: A/B-testing av varseltekst, forsinkelser basert på lesetid, forskjellige vinduer for ulike skjemaer. Men grunnlaget (CF7-hendelse + popup-kall + automatisk lukking) dekker det store flertallet av virkelige oppgaver på WordPress-nettsteder.