Skip to content

Allt om WordPress, webbutveckling — och mer därtill

🛠 Contact Form 7: universellt formulär med dolt fält och dynamisk popup
WordPress-tilläggWordPress
9 min1,719 ord

🛠 Contact Form 7: universellt formulär med dolt fält och dynamisk popup

💡 Så här sätter du upp ett universellt CF7-formulär med ett dolt fält

  • Installera tillägget Dynamic Text Extension och aktivera det under Tillägg
  • Lägg till en dynamisk dold tagg med identifieraren id:HIDDENINPUT i ditt formulär för att skicka med blocktiteln
  • Skapa en popup i Popup Maker, infoga formulärets shortcode och konfigurera triggern Click Open
  • Koppla in ett jQuery-skript som fångar blocktiteln och lägger in den i det dolda fältet
  • Lägg till [dynamichidden-120] i e-postmallen så att du kan se vilket block inskickningen kom från
  • Testa inskickningen: felpopup vid tomt formulär och bekräftelsepopup efter lyckad inskickning

Steg 1: tillägg för dolt fält, Dynamic Text Extension

Grundversionen av Contact Form 7 kan inte lägga till dolda fält direkt. Fram tills nyligen skötte tillägget Contact Form 7** Modules** den uppgiften, men det har inte uppdaterats sedan 2017 och har inte testats med senare versioner av WordPress.

Den nuvarande ersättaren är Contact Form 7 - Dynamic Text Extension (DTX). Detta tillägg underhålls aktivt (senast uppdaterat juni 2026), fungerar med WordPress 7.0 och gör mycket mer än bara dolda fält: dynamiska värden från webbadresser, kakor, postmeta-fält, aktuell användardata och anpassade shortcodes.

DTX dynamiska taggknappar i Contact Form 7-formulärredigeraren

Installera tillägget via Tillägg → Lägg till nytt, sök efter "Dynamic Text Extension", klicka på "Installera nu" och aktivera. Två nya knappar dyker upp i Contact Form 7-formulärredigerarens tagg-generator-meny: dynamic text och dynamic hidden.

Taggenerator för dolt fält i Contact Form 7-formulärredigeraren

För vårt scenario behöver vi dynamic hidden. Skapa ett dolt fält med en identifierare som jQuery-skriptet kan använda för att skicka blocktiteln:

1[dynamichidden dynamichidden-120 id:HIDDENINPUT]

Om DTX av någon anledning inte passar dina behov kan du fortfarande använda det gamla Contact Form 7 Modules: det fungerar fortfarande för grundläggande dolda fält, men det har inte testats med senare WordPress-versioner och har inte uppdaterats sedan 2017. Shortcoden skulle se ut så här: [hidden hidden-120 id:HIDDENINPUT].

Steg 2: formulär och e-postmall

Formuläret byggs upp av standardfält från CF7 plus vårt dolda fält. Här är en fungerande mall; kopiera in den i formulärredigeraren:

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]

Fälten text-59, tel-116 och Email är obligatoriska (asterisk efter typen). reCAPTCHA skyddar mot spam. Skicka-knappen och det dolda fältet kompletterar formuläret.

Konfigurera nu e-postmallen i formulärredigerarens "Mail"-flik. Det viktiga är att lägga till [dynamichidden-120] (eller [hidden-120] för CF7-moduler) i e-postmeddelandets brödtext så att du kan se vilket block inskickningen kom från:

Till: moc.niamodruoy@liame-ruoy

Från: [Email]

Ämne: Webbplatsförfrågan, [dynamichidden-120]

E-postmeddelande:

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

Se till att kryssrutan "Använd HTML-innehållstyp" är markerad, annars förstörs formateringen. För tillförlitlig e-postleverans, konfigurera SMTP (via valfritt SMTP-plugin: Post SMTP, WP Mail SMTP eller Google Gmail API); utan detta hamnar e-post från CF7 ofta i skräpposten.

Steg 3: skapa en popup i Popup Maker

Det gamla pluginet Popups - WordPress Popup stängdes i juli 2022 på grund av en sårbarhet och är inte tillgängligt för installation. Den moderna ersättningen är Popup Maker: 780 000+ aktiva installationer, CF7-integration direkt ur lådan och dussintals triggers och inriktningsregler.

Popup Maker-redigeringsfönster med formulärintegration i WordPress

Installera Popup Maker via Plugins → Lägg till nytt plugin, gå sedan till Popup Maker → Skapa popup. Ge popupen ett namn och infoga formulärets shortcode i innehållsredigeraren:

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

Hitta formulär-ID:t i CF7-formulärlistan (kolumnen "Shortcode"). I popupinställningarna till höger, i blocket Triggers, välj Klicka för att öppna och ange CSS-selektorn för knappen som ska öppna popupen (till exempel .jet-button-order). Detta är analogt med "Manuell triggning" från det gamla Popups-pluginet.

Konfigurera manuell triggning för en popup i WordPress

Hitta nu ID:t för popupen du skapade. Öppna popupen i redigeraren och titta på webbläsarens URL: post.php?post=4197&action=edit; numret efter post= är ID:t (4197 i detta exempel). Du behöver det för skriptet i nästa steg.

Popup-ID i webbläsarens URL vid redigering i WordPress-admin

Steg 4: jQuery-skript för att fånga blockets titel

Skriptet löser huvuduppgiften: när man klickar på en knapp inuti ett block fångar det texten i det blockets titel och infogar den i både popupens titel och formulärets dolda fält. Låt oss bryta ner det.

Ge först en gemensam CSS-klass till alla block där du behöver hitta titeln (till exempel ForContactForm7HiddenInput). I Elementor görs detta via "Avancerat → CSS-klasser" för omslagssektionen.

Själva skriptet kopplas in via barntemats functions.php eller pluginet Code Snippets (säkrare, försvinner inte när temat uppdateras):

1add_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});

Innehållet i filen cf7-universal-form.js:

1jQuery(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});

Vad som händer här:

  • Fånga titeln: när man klickar på knappen med klassen .jet-button-order traverserar skriptet uppåt i DOM:en till föräldrablocket .ForContactForm7HiddenInput, hittar h3.elementor-heading-title inuti det och sparar dess text i variabeln blockTitle.
  • Bevaka popupen: istället för det föråldrade attrchange.js (vars CDN rawgit.com är nedstängt) använder skriptet den inbyggda MutationObserver, som bevakar klassförändringar på Popup Maker-containern. När klassen active dyker upp (popupen är öppen) infogar skriptet den sparade titeln i popupens rubrik och i det dolda fältet #HIDDENINPUT.
  • Selectorerna: .jet-button-order är Elementor JetElements-knappklass; ersätt den med din knappklass. Popup Maker renderas med ID #popmake-{ID}, så koden använder #popmake-4197; ersätt 4197 med din popups ID.

Under jQuery-blocket finns ett visuellt exempel på hur en sida ser ut med flera block och "Beställ nu"-knappar:

Produktblock med beställningsknappar på en WordPress-landningssida

Efter att ha klickat på knappen på det första blocket fångar skriptet texten "Rullgardiner", infogar den i popupens rubrik och i formulärets dolda fält:

Blocktiteln Rullgardiner infogas automatiskt i dolt fält och popup-rubrik

Samma sak gäller för alla fem block: titeln ändras dynamiskt medan formuläret förblir detsamma.

Steg 5: popups för lyckad inskickning och fel

Popup Maker låter dig skapa så många popups du behöver. För statusmeddelanden (lyckat / fel) skapar du ytterligare två popups på samma sätt som i steg 3. Du behöver inte manuellt binda dem till triggers; CF7 styr dem via JavaScript-händelser.

Felpopup visas när formuläret inte klarar valideringen. Innehåll:

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>

Lyckad-popup visas efter lyckad inskickning. Innehåll:

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>
Formulärfelsikon röd flagga

Dessa SVG-ikoner användes i den gamla popupen för att indikera inskickningsstatus. Du kan ersätta dem med dina egna eller behålla dem som de är; de är neutrala och inte knutna till någon specifik plugin.

Ikon för lyckad formulärinskickning grön tumme upp

Koppla statuspopuperna via CF7-händelser. Lägg till denna kod i samma JS-fil cf7-universal-form.js efter huvudskriptet:

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

Ersätt 1065 och 1068 med de faktiska ID:na för dina statuspopuper från Popup Maker.

Grundläggande CSS-stilar för statuspopuper kopplas in via Utseende → Anpassa → Extra CSS eller i temafil:

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

Steg 6: testning och felsökning

Innan du lanserar på en produktionssajt, kontrollera varje scenario:

  • Klicka på olika block: titeln i popupen och det dolda fältet ändras korrekt för varje block.
  • Tomt formulär: att skicka utan att fylla i obligatoriska fält visar felpopupen.
  • Komplett inskickning: mejlet kommer fram, och det dolda fältet innehåller rätt blocktitel.
  • Återöppning: efter att ha stängt och öppnat popupen igen uppdateras titeln.

Om titeln inte infogas, kontrollera i webbläsarens konsol (F12 → Console) att:

  • jQuery-selektorn .ForContactForm7HiddenInput h3.elementor-heading-title hittar ett element på sidan;
  • variabeln popupId matchar det faktiska popup-ID:t i admin;
  • knappklassen (.jet-button-order) matchar den faktiska klassen på sidan.

Selektorerna i koden är knutna till Elementor + JetElements. Om du använder en annan builder (Gutenberg, Bricks, Oxygen), byt ut dina egna klasser och titelstruktur. Principen är densamma: knapp → förälderblock → titel → dolt fält.

Se den här videon för en visuell demonstration av hur man sätter upp ett popup-formulär med Contact Form 7:

⁉️🤔 Vanliga frågor

Kan jag klara mig utan ett extra tillägg för det dolda fältet?

Grundläggande CF7 stöder inte dolda fält. DTX är en minimal och aktivt underhållen lösning. I teorin skulle du kunna lägga till <input type="hidden"> direkt i formulärets DOM via JavaScript, men detta är mindre tillförlitligt: skriptet kanske inte körs innan inskickning, och värdet kommer inte att synas i mejlet om det inte är knutet till en specifik CF7-tagg. Använd DTX eller de gamla Contact Form 7 Modules; båda lägger till stöd för dolda fält på taggnivå, och värdet är garanterat att synas i mejlet.

Varför är Popup Maker bättre än det gamla Popups-tillägget?

Popup Maker uppdateras aktivt (senaste version april 2026), har inbyggd integration med CF7 och andra formulär, och stöder dussintals utlösare och målgruppsregler. Gamla Popups stängdes officiellt av WordPress.org i juli 2022 på grund av en opatchad sårbarhet och bör inte användas på aktiva sajter. Popup Maker är dess direkta och säkra efterföljare med över 780 000 aktiva installationer. Viktig fördel: inbyggd CF7-integration (händelserna wpcf7mailsent / wpcf7invalid fungerar utan extra kod) och en visuell popup-redigerare.

Varför använda MutationObserver istället för attrchange.js?

Biblioteket attrchange.js distribuerades via rawgit.com, som lades ner 2020. Själva GitHub-repot lever fortfarande, men att ansluta skriptet därifrån är obekvämt. MutationObserver är ett inbyggt webbläsar-API, som stöds av alla moderna webbläsare sedan 2014, kräver inga externa beroenden och löser samma uppgift: att spåra attributändringar i DOM:en. Färre HTTP-förfrågningar, inga beroendeuppdateringar behövs.

Vad ska jag göra om titeln i det dolda fältet visas som förvrängda kyrilliska tecken i mejlet?

Kontrollera teckenkodningen i CF7 och SMTP-tilläggets inställningar; den ska vara UTF-8. Se till att mejlets ämnesrad inte innehåller korrupta tecken. Om du använder SMTP via Gmail API kan problemet ligga i mejlhuvudets kodning; kontrollera inställningarna för Post SMTP eller WP Mail SMTP. Vanligtvis är källan till problemet mejlservern, inte skriptet. Kontrollera: (1) wp-config.php, raden define('DB_CHARSET', 'utf8'); utan extra mellanslag före <?php; (2) SMTP-tilläggets inställningar, mejlkodning UTF-8; (3) CF7 mejlämne, ta bort icke-standardtecken, lämna endast [dynamichidden-120] utan extra parenteser eller citattecken.

Kan jag använda den här metoden för flera olika formulär på en sajt?

Ja. Skapa ett separat formulär i CF7 för varje blocktyp och en separat popup i Popup Maker. I skriptet duplicerar du logiken för varje par "blockselektor → popup-ID → dolt fält-ID". Alternativt kan du använda en popup och ett formulär med olika blockklasser; det dolda fältet kommer att ta emot titeln på det block som klickades, utan ytterligare konfiguration.

Ett universellt formulär för alla block på sidan är huvudpoängen med den här lösningen. För helt olika blocktyper (produkter vs tjänster), skapa två uppsättningar: produkt_formulär + produkt_popup och tjänst_formulär + tjänst_popup. I skriptet duplicerar du helt enkelt kodblocket med olika selektorer.

Vilken tilläggsstack man bör använda 2026

Ett universellt formulär med ett dolt fält är en beprövad lösning för landningssidor med dussintals liknande block. Istället för 30 separata formulär konfigurerar du ett, och skriptet infogar automatiskt blocktiteln. Här är stacken vi rekommenderar 2026:

  • Contact Form 7: 10+ miljoner installationer, lättviktigt, gratis.
  • Dynamic Text Extension (DTX): dolda och dynamiska fält, aktiv support.
  • Popup Maker: popups med klickutlösare och inbyggd CF7-integration.
  • MutationObserver (inbyggd JS): spårar popup-öppning utan externa bibliotek.

Om du behöver fånga en blocktitel och skicka den till ett formulär, använd den här stacken. I praktiken fungerar det utan problem, och installationen tar ungefär en timme även med grundläggande WordPress-kunskaper.

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

Redaktionen
RedaktionenRedaktionellt team→ All publications

Ett professionellt team av skribenter och redaktörer specialiserade på att skapa kvalitetsinnehåll.