💡 Kuidas seadistada universaalne CF7 vorm peidetud väljaga

• Paigalda Dynamic Text Extension plugin ja aktiveeri see Pluginate jaotises
• Lisa oma vormi dünaamiline peidetud silt identifikaatoriga id:HIDDENINPUT, et edastada ploki pealkiri
• Loo hüpikaken Popup Makeris, sisesta vormi lühikood ja seadista Click Open päästik
• Ühenda jQuery skript, mis püüab ploki pealkirja ja sisestab selle peidetud väljale
• Lisa [dynamichidden-120] meili mallile, et näeksid, millisest plokist pöördumine tuli
• Testi saatmist: tühja vormi puhul veateatega hüpikaken ja eduka saatmise järel õnnestumise hüpikaken

Samm 1: plugin peidetud välja jaoks, Dynamic Text Extension

Tavaline Contact Form 7 ei võimalda kohe peidetud välju lisada. Kuni viimase ajani täitis seda ülesannet Contact Form 7** Modules** plugin, kuid seda pole uuendatud alates 2017. aastast ja seda pole testitud uuemate WordPressi versioonidega.

Praegune asendus on Contact Form 7 - Dynamic Text Extension (DTX). See plugin on aktiivselt hooldatud (viimati uuendatud juunis 2026), töötab WordPress 7.0-ga ja teeb palju enamat kui ainult peidetud väljad: dünaamilised väärtused URL-idest, küpsistest, postituste meta väljadest, praeguse kasutaja andmetest ja kohandatud lühikoodidest.

Paigalda plugin menüü Pluginad → Lisa uus plugin kaudu, otsi "Dynamic Text Extension", klõpsa "Paigalda kohe" ja aktiveeri. Contact Form 7 vormiredaktori sildigeneraatori rippmenüüsse ilmub kaks uut nuppu: dynamic text ja dynamic hidden.

Meie stsenaariumi jaoks vajame valikut dynamic hidden. Loo peidetud väli identifikaatoriga, mille kaudu jQuery skript ploki pealkirja edastab:

1
[dynamichidden dynamichidden-120 id:HIDDENINPUT]

Kui DTX mingil põhjusel ei sobi, võid endiselt kasutada vana Contact Form 7 Modules pluginat: see toimib põhiliste peidetud väljade puhul, kuid seda pole testitud uuemate WordPressi versioonidega ja pole uuendatud alates 2017. aastast. Lühikood näeks välja selline: [hidden hidden-120 id:HIDDENINPUT].

Samm 2: vorm ja meili mall

Vorm on üles ehitatud standardsetest CF7 väljadest pluss meie peidetud väli. Siin on töötav mall; kopeeri see vormiredaktorisse:

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]

Väljad text-59, tel-116 ja Email on kohustuslikud (tärn tüübi järel). reCAPTCHA kaitseb rämpsposti eest. Saatmise nupp ja peidetud väli lõpetavad vormi.

Nüüd seadista e-posti mall vormiredaktori vahekaardil „Mail". Oluline on lisada [dynamichidden-120] (või [hidden-120] CF7 moodulite puhul) kirja sisusse, et näeksid, millisest plokist pöördumine tuli:

Saaja: moc.niamodruoy@liame-ruoy

Saatja: [Email]

Teema: Veebilehe pöördumine, [dynamichidden-120]

Kirja sisu:

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]

Kontrolli kindlasti, et märkeruut „Use HTML content type" oleks märgitud, vastasel juhul läheb vormindus katki. Usaldusväärseks kirjade kohaletoimetamiseks seadista SMTP (mis tahes SMTP pistikprogrammi kaudu: Post SMTP, WP Mail SMTP või Google Gmail API); ilma selleta satuvad CF7 kirjad sageli rämpsposti.

2. Samm: hüpikakna loomine Popup Makeris

Vana Popups - WordPress Popup pistikprogramm suleti 2022. aasta juulis turvaaugu tõttu ja pole enam paigaldatav. Kaasaegne asendus on Popup Maker: üle 780 000 aktiivse paigalduse, CF7 integreeritus olemas ja kümneid päästikuid ning sihtimisreegleid.

Paigalda Popup Maker menüüst Plugins → Add New Plugin, seejärel mine Popup Maker → Create Popup. Anna hüpikaknale nimi ja lisa vormi lühikood sisuredaktorisse:

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

Vormi ID leiad CF7 vormide nimekirjast (veerust „Shortcode"). Paremal asuvates hüpikakna seadetes, plokis Triggers, vali Click Open ja määra nupu CSS-selektor, mis hüpikakna avab (näiteks .jet-button-order). See on analoogne vana Popups pistikprogrammi „Manual Triggering" funktsiooniga.

Nüüd leia loodud hüpikakna ID. Ava hüpikaken redaktoris ja vaata brauseri URL-i: post.php?post=4197&action=edit; number pärast post= ongi ID (selles näites 4197). Seda läheb vaja järgmise sammu skripti jaoks.

3. Samm: jQuery skript ploki pealkirja püüdmiseks

Skript lahendab põhiülesande: plokisisesel nupul klõpsates püüab see selle ploki pealkirja teksti ja lisab selle nii hüpikakna pealkirja kui ka vormi peidetud välja. Vaatame seda lähemalt.

Esiteks määra kõigile plokkidele, kust pealkirja leida on vaja, ühine CSS-klass (näiteks ForContactForm7HiddenInput). Elementoris tehakse seda ümbrissektsiooni jaoks valikust „Advanced → CSS Classes".

Skript ise ühendatakse alamteema functions.php faili või Code Snippets pistikprogrammi kaudu (turvalisem, ei kao teema uuendamisel):

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

Faili cf7-universal-form.js sisu:

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

Mis siin toimub:

• Pealkirja püüdmine: kui klõpsatakse nupul, millel on klass .jet-button-order, liigub skript mööda DOM-i üles vanemplokki .ForContactForm7HiddenInput, leiab sealt h3.elementor-heading-title ja salvestab selle teksti muutujasse blockTitle.
• Hüpikakna jälgimine: aegunud attrchange.js (mille CDN rawgit.com on suletud) asemel kasutab skript natiivset MutationObserver'it, mis jälgib klassimuutusi Popup Makeri konteineril. Kui ilmub klass active (hüpikaken on avatud), sisestab skript salvestatud pealkirja hüpikakna pealkirjasse ja peidetud väljale #HIDDENINPUT.
• Selektorid: .jet-button-order on Elementor JetElements nupu klass; asenda see oma nupu klassiga. Popup Maker renderdab ID-ga #popmake-{ID}, seega kasutab kood #popmake-4197; asenda 4197 oma hüpikakna ID-ga.

JQuery ploki all on visuaalne näide sellest, kuidas leht mitme ploki ja „Telli kohe" nuppudega välja näeb:

Pärast esimese ploki nupule klõpsamist püüab skript teksti „Rulood", sisestab selle hüpikakna pealkirja ja vormi peidetud väljale:

Sama kehtib kõigi viie ploki kohta: pealkiri muutub dünaamiliselt, samas kui vorm jääb samaks.

Samm 5: hüpikaknad edukaks saatmiseks ja vea korral

Popup Maker võimaldab luua nii palju hüpikaknaid, kui vaja. Olekuteadete (edukas / viga) jaoks loo veel kaks hüpikakent sarnaselt 3. sammule. Sa ei pea neid käsitsi trigeritega siduma; CF7 juhib neid JavaScripti sündmuste kaudu.

Vea hüpikaken kuvatakse, kui vormi valideerimine ebaõnnestub. Sisu:

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>

Edu hüpikaken kuvatakse pärast edukat saatmist. Sisu:

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>

Neid SVG ikoone kasutati vanas hüpikaknas saatmisoleku näitamiseks. Võid need asendada enda omadega või jätta nii, nagu on; need on neutraalsed ega ole seotud ühegi konkreetse pluginaga.

Ühenda oleku hüpikaknad CF7 sündmuste kaudu. Lisa see kood samasse JS-faili cf7-universal-form.js pärast põhiskripti:

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);

Asenda 1065 ja 1068 oma oleku hüpikakende tegelike ID-dega Popup Makerist.

Oleku hüpikakende põhilised CSS-stiilid ühendatakse Välimus → Kohanda → Lisatud CSS kaudu või teemafailis:

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
}

6. Samm: testimine ja veaotsing

Enne tootmiskeskkonnas avaldamist kontrolli iga stsenaariumi:

• Erinevate plokkide klõpsamine: hüpikakna pealkiri ja peidetud väli muutuvad iga ploki puhul õigesti.
• Tühi vorm: kohustuslikke välju täitmata esitamisel kuvatakse veateade.
• Täielik esitamine: e-kiri jõuab kohale ja peidetud väli sisaldab õiget ploki pealkirja.
• Taasavamine: pärast hüpikakna sulgemist ja uuesti avamist uueneb pealkiri.

Kui pealkirja ei lisata, kontrolli brauseri konsoolis (F12 → Console), et:

• jQuery valija .ForContactForm7HiddenInput h3.elementor-heading-title leiab lehelt elemendi;
• muutuja popupId vastab tegelikule hüpikakna ID-le administraatoris;
• nupu klass (.jet-button-order) vastab lehel olevale tegelikule klassile.

Koodis olevad valijad on seotud Elementoriga + JetElementsiga. Kui kasutad teist leheehitajat (Gutenberg, Bricks, Oxygen), asenda need oma klasside ja pealkirja struktuuriga. Põhimõte jääb samaks: nupp → ülemplokk → pealkiri → peidetud väli.

Vaata seda videot, et näha visuaalset demonstratsiooni hüpikvormi seadistamisest Contact Form 7-ga:

⁉️🤔 Korduma kippuvad küsimused

Kas ma saan hakkama ilma peidetud välja lisavidinata?

Tavaline CF7 ei toeta peidetud välju. DTX on minimaalne ja aktiivselt hooldatav lahendus. Teoreetiliselt võiksid lisada <input type="hidden"> otse vormi DOM-i JavaScripti abil, kuid see on vähem usaldusväärne: skript ei pruugi enne esitamist käivituda ja väärtus ei ilmu e-kirjas, kui see pole seotud konkreetse CF7 sildiga. Kasuta DTX-i või vana Contact Form 7 Modules lisavidinat; mõlemad lisavad peidetud välja toe sildi tasemel ja väärtus ilmub e-kirjas garanteeritult.

Miks on Popup Maker parem kui vana Popups lisavidin?

Popup Makerit uuendatakse aktiivselt (viimane versioon aprill 2026), sellel on sisseehitatud integratsioon CF7 ja teiste vormidega ning see toetab kümneid käivitajaid ja sihtimisreegleid. Vana Popups lisavidina sulges WordPress.org ametlikult 2022. aasta juulis parandamata turvaaugu tõttu ja seda ei tohiks tootmiskeskkonnas kasutada. Popup Maker on selle otsene ja turvaline järeltulija, millel on üle 780 000 aktiivse installatsiooni. Peamine eelis: sisseehitatud CF7 integratsioon (sündmused wpcf7mailsent / wpcf7invalid töötavad ilma lisakoodita) ja visuaalne hüpikakna redaktor.

Miks kasutada MutationObserverit attrchange.js-i asemel?

attrchange.js teeki levitati rawgit.com kaudu, mis suleti 2020. aastal. GitHubi repositoorium ise on endiselt olemas, kuid skripti sealt ühendamine on ebamugav. MutationObserver on brauseri sisseehitatud API, mida toetavad kõik kaasaegsed brauserid alates 2014. aastast, see ei vaja väliseid sõltuvusi ja lahendab sama ülesande: DOM-i atribuutide muutuste jälgimine. Vähem HTTP päringuid, pole vaja sõltuvusi uuendada.

Mida teha, kui peidetud välja pealkiri ilmub e-kirjas vigaste kirillitsa tähtedena?

Kontrolli kodeeringut CF7 ja SMTP lisavidina seadetes; see peaks olema UTF-8. Veendu, et e-kirja teema ei sisaldaks rikutud märke. Kui kasutad SMTP-d Gmail API kaudu, võib probleem olla e-kirja päise kodeeringus; kontrolli Post SMTP või WP Mail SMTP lisavidina seadeid. Tavaliselt on probleemi allikaks meiliserver, mitte skript. Kontrolli: (1) wp-config.php, rida define('DB_CHARSET', 'utf8'); ilma tühikuteta enne <?php; (2) SMTP lisavidina seaded, e-kirja kodeering UTF-8; (3) CF7 e-kirja teema, eemalda mittestandardsed märgid, jäta alles ainult [dynamichidden-120] ilma lisasulgude või jutumärkideta.

Kas ma saan seda lähenemist kasutada mitme erineva vormi jaoks ühel saidil?

Jah. Loo CF7-s iga plokitüübi jaoks eraldi vorm ja Popup Makeris eraldi hüpikaken. Skriptis dubleeri loogika iga paari „ploki valija → hüpikakna ID → peidetud välja ID" jaoks. Alternatiivina kasuta ühte hüpikakent ja ühte vormi erinevate plokiklassidega; peidetud väli saab selle ploki pealkirja, millel klõpsati, ilma täiendava seadistuseta.

Üks universaalne vorm kõigile lehe plokkidele on selle lahenduse põhiolemus. Täiesti erinevate plokitüüpide (tooted vs teenused) jaoks loo kaks komplekti: toote_vorm + toote_hüpik ja teenuse_vorm + teenuse_hüpik. Skriptis lihtsalt dubleeri koodiplokk erinevate valijatega.

Millist lisavidinate komplekti 2026. aastal kasutada

Universaalne vorm peidetud väljaga on tõestatud lahendus maandumislehtedele, kus on kümneid sarnaseid plokke. 30 eraldi vormi asemel seadistad ühe ja skript lisab ploki pealkirja automaatselt. Siin on komplekt, mida 2026. aastal soovitame:

• Contact Form 7: üle 10 miljoni installatsiooni, kerge, tasuta.
• Dynamic Text Extension (DTX): peidetud ja dünaamilised väljad, aktiivne tugi.
• Popup Maker: hüpikaknad klõpsukäivitajatega ja sisseehitatud CF7 integratsiooniga.
• MutationObserver (natiivne JS): hüpikakna avanemise jälgimine ilma väliste teekideta.

Kui sul on vaja püüda ploki pealkiri ja edastada see vormile, kasuta seda komplekti. Praktikas töötab see tõrgeteta ja seadistamine võtab aega umbes tunni isegi algteadmistega WordPressist.

🔗 Dynamic Text Extension WordPress.org-is | 🔗 Popup Maker WordPress.org-is