💡 Slik setter du opp et universelt CF7-skjema med et skjult felt

• Installer Dynamic Text Extension-utvidelsen og aktiver den i Utvidelser-delen
• Legg til en dynamisk skjult tag med identifikatoren id:HIDDENINPUT i skjemaet ditt for å sende med blokktittelen
• Opprett en popup i Popup Maker, sett inn skjemaets shortcode og konfigurer Click Open-utløseren
• Koble til et jQuery-skript som fanger opp blokktittelen og setter den inn i det skjulte feltet
• Legg til [dynamichidden-120] i e-postmalen slik at du kan se hvilken blokk innsendingen kom fra
• Test innsendingen: feilpopup ved tomt skjema og suksesspopup etter vellykket innsending

Trinn 1: utvidelse for skjult felt, Dynamic Text Extension

Grunnversjonen av Contact Form 7 kan ikke legge til skjulte felt ut av boksen. Inntil nylig håndterte utvidelsen Contact Form 7** Modules** denne oppgaven, men den har ikke blitt oppdatert siden 2017 og har ikke blitt testet med nyere WordPress-versjoner.

Den nåværende erstatningen er Contact Form 7 - Dynamic Text Extension (DTX). Denne utvidelsen vedlikeholdes aktivt (sist oppdatert juni 2026), fungerer med WordPress 7.0 og gjør mye mer enn bare skjulte felt: dynamiske verdier fra URL-er, informasjonskapsler, post-metafelter, data om nåværende bruker og egendefinerte shortcoder.

Installer utvidelsen via Utvidelser → Legg til ny utvidelse, søk etter «Dynamic Text Extension», klikk «Installer nå» og aktiver. To nye knapper vil dukke opp i Contact Form 7-skjemaredigererens tag-generator-rullegardinmeny: dynamic text og dynamic hidden.

I vårt scenario trenger vi dynamic hidden. Opprett et skjult felt med en identifikator som jQuery-skriptet vil sende blokktittelen gjennom:

1
[dynamichidden dynamichidden-120 id:HIDDENINPUT]

Hvis DTX av en eller annen grunn ikke passer dine behov, kan du fortsatt bruke den gamle Contact Form 7 Modules: den fungerer fortsatt for grunnleggende skjulte felt, men den har ikke blitt testet med nyere WordPress-versjoner og har ikke blitt oppdatert siden 2017. Shortcoden ville sett slik ut: [hidden hidden-120 id:HIDDENINPUT].

Trinn 2: skjema og e-postmal

Skjemaet er bygget opp av standard CF7-felt pluss vårt skjulte felt. Her er en fungerende mal; kopier den inn i skjemaredigereren:

1
[text* text-59 placeholder "Your Name*"]
2
[tel* tel-116 placeholder "Phone*"]
3
[email Email placeholder "Email"]
4
[recaptcha]
5
[submit "Send"]
6
[dynamichidden dynamichidden-120 id:HIDDENINPUT]

Feltene text-59, tel-116 og Email er obligatoriske (stjerne etter typen). reCAPTCHA beskytter mot spam. Send-knappen og det skjulte feltet fullfører skjemaet.

Konfigurer nå e-postmalen i «Mail»-fanen i skjemaredigereren. Det viktigste er å legge til [dynamichidden-120] (eller [hidden-120] for CF7-moduler) i e-postinnholdet slik at du kan se hvilken blokk innsendingen kom fra:

Til: moc.niamodruoy@liame-ruoy

Fra: [Email]

Emne: Forespørsel fra nettsiden, [dynamichidden-120]

E-postinnhold:

1
Selected product/service: [dynamichidden-120]
2
---
3
Name: [text-59]
4
Phone: [tel-116]
5
Email: [Email]
6
---
7
Message sent from page: [_url]

Pass på å krysse av for «Bruk HTML-innholdstype», ellers vil formateringen bli ødelagt. For pålitelig e-postlevering bør du konfigurere SMTP (via en hvilken som helst SMTP-plugin: Post SMTP, WP Mail SMTP eller Google Gmail API); uten dette havner e-poster fra CF7 ofte i spam.

Trinn 3: opprette en popup i Popup Maker

Den gamle Popups - WordPress Popup-pluginen ble stengt i juli 2022 på grunn av et sikkerhetshull og er ikke tilgjengelig for installasjon. Den moderne erstatningen er Popup Maker: over 780 000 aktive installasjoner, CF7-integrasjon rett ut av boksen og dusinvis av utløsere og målrettingsregler.

Installer Popup Maker via Utvidelser → Legg til ny utvidelse, og gå deretter til Popup Maker → Opprett popup. Gi popupen et navn og sett inn skjemaets kortkode i innholdsredigereren:

1
[contact-form-7 id="123" title="Universal Form"]

Finn skjema-ID-en i CF7-skjemalisten («Shortcode»-kolonnen). I popup-innstillingene til høyre, i Utløsere-blokken, velger du Klikk for å åpne og angir CSS-selektoren for knappen som skal åpne popupen (for eksempel .jet-button-order). Dette tilsvarer «Manuell utløsing» fra den gamle Popups-pluginen.

Finn nå ID-en til popupen du opprettet. Åpne popupen i redigeringsprogrammet og se på nettleserens URL: post.php?post=4197&action=edit; tallet etter post= er ID-en (4197 i dette eksempelet). Du trenger den til skriptet i neste trinn.

Trinn 4: jQuery-skript for å fange opp blokktittelen

Skriptet løser hovedoppgaven: når du klikker på en knapp inne i en blokk, fanger det opp teksten i blokkens tittel og setter den inn i både popup-tittelen og skjemaets skjulte felt. La oss bryte det ned.

Først tildeler du en felles CSS-klasse til alle blokker der du trenger å finne tittelen (for eksempel ForContactForm7HiddenInput). I Elementor gjøres dette via «Avansert → CSS-klasser» for wrapper-seksjonen.

Selve skriptet kobles til via barnetemaets functions.php eller Code Snippets-pluginen (tryggere, går ikke tapt når temaet oppdateres):

1
add_action('wp_enqueue_scripts', function () {
2
    wp_enqueue_script(
3
        'cf7-universal-form',
4
        get_stylesheet_directory_uri() . '/cf7-universal-form.js',
5
        ['jquery'],
6
        '1.0',
7
        true
8
    );
9
});

Innholdet i filen cf7-universal-form.js:

1
jQuery(document).ready(function ($) {
2
 
3
    // Variable for storing the block title
4
    var blockTitle = '';
5
 
6
    // Capture the title text on button click
7
    $('.ForContactForm7HiddenInput .jet-button-order').on('click', function () {
8
        blockTitle = $(this)
9
            .closest('.ForContactForm7HiddenInput')
10
            .find('h3.elementor-heading-title')
11
            .text()
12
            .trim();
13
    });
14
 
15
    // Wait for popup to open via MutationObserver
16
    var popupId = '4197'; // Your popup ID from Popup Maker
17
    var observer = new MutationObserver(function (mutations) {
18
        mutations.forEach(function (mutation) {
19
            if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
20
                var $popup = $('#popmake-' + popupId);
21
                if ($popup.hasClass('active') && blockTitle) {
22
                    // Insert the title into the popup
23
                    $popup.find('.popup-title').text(blockTitle);
24
                    // Insert the title into the form's hidden field
25
                    $('#HIDDENINPUT').val(blockTitle);
26
                }
27
            }
28
        });
29
    });
30
 
31
    // Start observing the popup
32
    var $popupContainer = $('#popmake-' + popupId);
33
    if ($popupContainer.length) {
34
        observer.observe($popupContainer[0], {
35
            attributes: true,
36
            attributeFilter: ['class']
37
        });
38
    }
39
 
40
});

Hva som skjer her:

• Fange opp tittelen: når man klikker på knappen med klassen .jet-button-order, traverserer skriptet oppover i DOM-en til forelderblokken .ForContactForm7HiddenInput, finner h3.elementor-heading-title inne i den, og lagrer teksten i variabelen blockTitle.
• Spore popupen: i stedet for det utdaterte attrchange.js (hvis CDN rawgit.com er nedstengt), bruker skriptet den innebygde MutationObserver, som overvåker klasseendringer på Popup Maker-containeren. Når klassen active dukker opp (popupen er åpen), setter skriptet inn den lagrede tittelen i popup-overskriften og i det skjulte feltet #HIDDENINPUT.
• Selektorer: .jet-button-order er Elementor JetElements-knappeklassen; bytt den ut med din knappeklasse. Popup Maker rendres med ID #popmake-{ID}, så koden bruker #popmake-4197; bytt ut 4197 med din popups ID.

Under jQuery-blokken er et visuelt eksempel på hvordan en side ser ut med flere blokker og «Bestill nå»-knapper:

Etter å ha klikket på knappen på den første blokken, fanger skriptet opp teksten «Roller Blinds», setter den inn i popup-tittelen og i skjemaets skjulte felt:

Det samme gjelder for alle fem blokkene: tittelen endres dynamisk mens skjemaet forblir det samme.

Steg 5: popuper for vellykket innsending og feil

Popup Maker lar deg opprette så mange popuper du trenger. For statusmeldinger (suksess / feil), opprett to popuper til på samme måte som i steg 3. Du trenger ikke å binde dem manuelt til utløsere; CF7 styrer dem gjennom JavaScript-hendelser.

Feilpopup vises når skjemaet feiler validering. Innhold:

1
<p style="text-align: center;">
2
    <img src="/wp-content/uploads/2019/02/flag.svg" alt="Error icon" width="177" height="161">
3
</p>
4
<p style="text-align: center;">
5
    The form has errors. Check the messages under the input fields and try again.
6
</p>

Suksesspopup vises etter vellykket innsending. Innhold:

1
<p style="text-align: center;">
2
    <img src="/wp-content/uploads/2019/02/like.svg" alt="Successful submission icon" width="177" height="161">
3
</p>
4
<p style="text-align: center; padding-top: 15px;">
5
    Done! Your message has been sent successfully. We will contact you shortly.
6
</p>

Disse SVG-ikonene ble brukt i den gamle popupen for å indikere innsendingsstatus. Du kan erstatte dem med dine egne eller la dem være som de er; de er nøytrale og ikke knyttet til noen spesifikk plugin.

Koble statuspopupene via CF7-hendelser. Legg til denne koden i den samme JS-filen cf7-universal-form.js etter hovedskriptet:

1
// Show popup on CF7 validation error
2
document.addEventListener('wpcf7invalid', function () {
3
    $('#popmake-1065').popmake('open');
4
}, false);
5
 
6
// Show popup on successful submission
7
document.addEventListener('wpcf7mailsent', function () {
8
    $('#popmake-1068').popmake('open');
9
}, false);

Bytt ut 1065 og 1068 med de faktiske ID-ene til statuspopupene dine fra Popup Maker.

Grunnleggende CSS-stiler for statuspopuper kobles til via Utseende → Tilpass → Ekstra CSS eller i temafilen:

1
/* Error popup */
2
div#popmake-1065 {
3
    z-index: 99999999;
4
}
5
div#popmake-1065 .popmake-close {
6
    font-size: 30px;
7
    color: #9e9e9e;
8
}
9
 
10
/* Success popup */
11
div#popmake-1068 {
12
    z-index: 99999999;
13
}
14
div#popmake-1068 .popmake-close {
15
    font-size: 30px;
16
    color: #9e9e9e;
17
}

Steg 6: testing og feilsøking

Før du lanserer på et produksjonsnettsted, sjekk hvert scenario:

• Klikk på ulike blokker: tittelen i popup-vinduet og det skjulte feltet endres korrekt for hver blokk.
• Tomt skjema: innsending uten å fylle ut obligatoriske felt viser feilpopup-vinduet.
• Fullstendig innsending: e-posten kommer frem, og det skjulte feltet inneholder riktig blokktittel.
• Gjenåpning: etter å ha lukket og åpnet popup-vinduet på nytt, oppdateres tittelen.

Hvis tittelen ikke blir satt inn, sjekk i nettleserkonsollen (F12 → Console) at:

• jQuery-selektoren .ForContactForm7HiddenInput h3.elementor-heading-title finner et element på siden;
• Variabelen popupId samsvarer med den faktiske popup-ID-en i admin;
• Knappeklassen (.jet-button-order) samsvarer med den faktiske klassen på siden.

Selektorene i koden er knyttet til Elementor + JetElements. Hvis du bruker et annet byggeverktøy (Gutenberg, Bricks, Oxygen), bytt ut med dine egne klasser og tittelstruktur. Prinsippet forblir det samme: knapp → overordnet blokk → tittel → skjult felt.

Se denne videoen for en visuell demonstrasjon av hvordan du setter opp et popup-skjema med Contact Form 7:

⁉️🤔 Ofte stilte spørsmål

Kan jeg klare meg uten en ekstra plugin for det skjulte feltet?

Grunnleggende CF7 støtter ikke skjulte felt. DTX er en minimal og aktivt vedlikeholdt løsning. I teorien kunne du lagt til <input type="hidden"> direkte i skjemaets DOM via JavaScript, men dette er mindre pålitelig: skriptet kjører kanskje ikke før innsending, og verdien vil ikke vises i e-posten hvis den ikke er knyttet til en spesifikk CF7-tag. Bruk DTX eller den gamle Contact Form 7 Modules; begge legger til støtte for skjulte felt på tag-nivå, og verdien er garantert å vises i e-posten.

Hvorfor er Popup Maker bedre enn den gamle Popups-pluginen?

Popup Maker oppdateres aktivt (siste versjon april 2026), har innebygd integrasjon med CF7 og andre skjemaer, og støtter dusinvis av utløsere og målrettingsregler. Den gamle Popups ble offisielt stengt av WordPress.org i juli 2022 på grunn av et uopprettet sikkerhetshull og bør ikke brukes på aktive nettsteder. Popup Maker er dens direkte og sikre etterfølger med over 780 000 aktive installasjoner. Viktig fordel: innebygd CF7-integrasjon (wpcf7mailsent / wpcf7invalid-hendelser fungerer uten ekstra kode) og en visuell popup-editor.

Hvorfor bruke MutationObserver i stedet for attrchange.js?

Biblioteket attrchange.js ble distribuert via rawgit.com, som ble lagt ned i 2020. Selve GitHub-repositoriet er fortsatt aktivt, men det er upraktisk å koble til skriptet derfra. MutationObserver er et innebygd nettleser-API, støttet av alle moderne nettlesere siden 2014, krever ingen eksterne avhengigheter og løser den samme oppgaven: å spore attributtendringer i DOM-en. Færre HTTP-forespørsler, ingen avhengighetsoppdateringer nødvendig.

Hva bør jeg gjøre hvis tittelen i det skjulte feltet vises som uleselige kyrilliske tegn i e-posten?

Sjekk tegnkodingen i CF7- og SMTP-plugin-innstillingene; den skal være UTF-8. Sørg for at e-postemnet ikke inneholder ødelagte tegn. Hvis du bruker SMTP via Gmail API, kan problemet ligge i kodingen av e-postens header; sjekk innstillingene for Post SMTP eller WP Mail SMTP. Vanligvis ligger kilden til problemet hos e-postserveren, ikke i skriptet. Sjekk: (1) wp-config.php, linjen define('DB_CHARSET', 'utf8'); uten ekstra mellomrom før <?php; (2) SMTP-plugin-innstillinger, e-postkoding UTF-8; (3) CF7-e-postemne, fjern ikke-standard tegn, la bare [dynamichidden-120] stå uten ekstra parenteser eller anførselstegn.

Kan jeg bruke denne tilnærmingen for flere ulike skjemaer på ett nettsted?

Ja. Opprett et separat skjema i CF7 for hver blokktype og et separat popup-vindu i Popup Maker. I skriptet dupliserer du logikken for hvert par «blokkvelger → popup-ID → ID for skjult felt». Alternativt kan du bruke ett popup-vindu og ett skjema med ulike blokklasser; det skjulte feltet vil motta tittelen på den blokken som ble klikket, uten ytterligere konfigurasjon.

Et universelt skjema for alle blokker på siden er hovedpoenget med denne løsningen. For helt ulike blokktyper (produkter vs. tjenester), opprett to sett: produkt_skjema + produkt_popup og tjeneste_skjema + tjeneste_popup. I skriptet dupliserer du ganske enkelt kodeblokken med ulike velgere.

Hvilken plugin-stack du bør bruke i 2026

Et universelt skjema med et skjult felt er en velprøvd løsning for landingssider med dusinvis av like blokker. I stedet for 30 separate skjemaer konfigurerer du ett, og skriptet setter automatisk inn blokktittelen. Her er stacken vi anbefaler i 2026:

• Contact Form 7: over 10 millioner installasjoner, lettvekt, gratis.
• Dynamic Text Extension (DTX): skjulte og dynamiske felt, aktiv support.
• Popup Maker: popup-vinduer med klikkutløsere og innebygd CF7-integrasjon.
• MutationObserver (innebygd JS): sporing av popup-åpning uten eksterne biblioteker.

Hvis du trenger å fange opp en blokktittel og sende den til et skjema, bruk denne stacken. I praksis fungerer det uten problemer, og oppsettet tar omtrent en time selv med grunnleggende WordPress-kunnskap.

🔗 Dynamic Text Extension på WordPress.org | 🔗 Popup Maker på WordPress.org