Skip to content

Kaikki WordPressistä, web-kehityksestä — ja paljon muuta

🛠 Contact Form 7: universaali lomake piilokentällä ja dynaamisella ponnahdusikkunalla
WordPress-lisäosatWordPress
7 min1,428 sanaa

🛠 Contact Form 7: universaali lomake piilokentällä ja dynaamisella ponnahdusikkunalla

💡 Näin määrität yleiskäyttöisen CF7-lomakkeen piilokentällä

  • Asenna Dynamic Text Extension -lisäosa ja aktivoi se Lisäosat-osiossa
  • Lisää lomakkeeseen dynaaminen piilotunniste, jonka tunniste on id:HIDDENINPUT, jotta lohkon otsikko välittyy
  • Luo ponnahdusikkuna Popup Makerissa, lisää lomakkeen shortcode ja määritä Click Open -laukaisin
  • Liitä jQuery-skripti, joka nappaa lohkon otsikon ja syöttää sen piilokenttään
  • Lisää [dynamichidden-120] sähköpostipohjaan, jotta näet, mistä lohkosta lähetys tuli
  • Testaa lähetys: virheponnahdus tyhjällä lomakkeella ja onnistumisponnahdus onnistuneen lähetyksen jälkeen

Vaihe 1: piilokentän lisäosa, Dynamic Text Extension

Perus Contact Form 7 ei pysty lisäämään piilokenttiä suoraan. Viime aikoihin asti Contact Form 7** Modules** -lisäosa hoiti tämän tehtävän, mutta sitä ei ole päivitetty vuoden 2017 jälkeen eikä sitä ole testattu uusilla WordPress-versioilla.

Nykyinen korvaaja on Contact Form 7 - Dynamic Text Extension (DTX). Tätä lisäosaa ylläpidetään aktiivisesti (viimeksi päivitetty kesäkuussa 2026), se toimii WordPress 7.0:n kanssa ja tekee paljon muutakin kuin pelkät piilokentät: dynaamiset arvot URL-osoitteista, evästeistä, artikkelien metakentistä, nykyisen käyttäjän tiedoista ja mukautetuista shortcodeista.

DTX-dynaamiset tagipainikkeet Contact Form 7 -lomake-editorissa

Asenna lisäosa kohdasta Lisäosat → Lisää uusi lisäosa, hae "Dynamic Text Extension", klikkaa "Asenna nyt" ja aktivoi. Contact Form 7:n lomake-editorin tunnistegeneraattorin pudotusvalikkoon ilmestyy kaksi uutta painiketta: dynamic text ja dynamic hidden.

Piilokentän tagigeneraattori Contact Form 7 -lomake-editorissa

Meidän tapauksessamme tarvitsemme dynamic hidden -vaihtoehdon. Luo piilokenttä, jolla on tunniste, jonka kautta jQuery-skripti välittää lohkon otsikon:

1[dynamichidden dynamichidden-120 id:HIDDENINPUT]

Jos DTX ei jostain syystä sovi tarpeisiisi, voit edelleen käyttää vanhaa Contact Form 7 Modules -lisäosaa: se toimii yhä peruspiilokenttien kanssa, mutta sitä ei ole testattu uusilla WordPress-versioilla eikä sitä ole päivitetty vuoden 2017 jälkeen. Shortcode näyttäisi tältä: [hidden hidden-120 id:HIDDENINPUT].

Vaihe 2: lomake ja sähköpostipohja

Lomake rakennetaan tavallisista CF7-kentistä sekä piilokentästämme. Tässä on toimiva pohja; kopioi se lomake-editoriin:

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]

Kentät text-59, tel-116 ja Email ovat pakollisia (tähti tyypin perässä). reCAPTCHA suojaa roskapostilta. Lähetyspainike ja piilokenttä täydentävät lomakkeen.

Määritä nyt sähköpostipohja lomake-editorin "Mail"-välilehdellä. Olennaista on lisätä [dynamichidden-120] (tai [hidden-120] CF7 Modules -lisäosalle) sähköpostin runkoon, jotta näet, mistä lohkosta lähetys tuli:

Vastaanottaja: moc.niamodruoy@liame-ruoy

Lähettäjä: [Email]

Aihe: Verkkosivuston yhteydenotto, [dynamichidden-120]

Sähköpostin runko:

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

Varmista, että valitset "Use HTML content type" -valintaruudun, muuten muotoilu hajoaa. Luotettavaa sähköpostin toimitusta varten määritä SMTP (millä tahansa SMTP-lisäosalla: Post SMTP, WP Mail SMTP tai Google Gmail API); ilman tätä CF7:n lähettämät sähköpostit päätyvät usein roskapostiin.

Vaihe 3: ponnahdusikkunan luominen Popup Makerilla

Vanha Popups - WordPress Popup -lisäosa suljettiin heinäkuussa 2022 haavoittuvuuden vuoksi, eikä se ole enää asennettavissa. Nykyaikainen korvaaja on Popup Maker: yli 780 000 aktiivista asennusta, CF7-integraatio suoraan paketista ja kymmeniä laukaisimia ja kohdennussääntöjä.

Popup Maker -editori-ikkuna ja lomakeintegraatio WordPressissä

Asenna Popup Maker kohdasta Lisäosat → Lisää uusi lisäosa ja siirry sitten kohtaan Popup Maker → Create Popup. Anna ponnahdusikkunalle nimi ja lisää lomakkeen shortcode sisältöeditoriin:

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

Löydät lomakkeen ID:n CF7-lomakelistauksesta ("Shortcode"-sarake). Oikealla olevissa ponnahdusikkunan asetuksissa, Triggers-lohkossa, valitse Click Open ja määritä sen painikkeen CSS-valitsin, joka avaa ponnahdusikkunan (esimerkiksi .jet-button-order). Tämä vastaa vanhan Popups-lisäosan "Manual Triggering" -toimintoa.

Popupin manuaalisen liipaisun määrittäminen WordPressissä

Etsi nyt luomasi ponnahdusikkunan ID. Avaa ponnahdusikkuna editorissa ja katso selaimen osoiteriviä: post.php?post=4197&action=edit; post=-kohdan jälkeinen numero on ID (tässä esimerkissä 4197). Tarvitset sitä seuraavan vaiheen skriptiä varten.

Popupin ID selaimen osoiterivillä WordPress-hallinnassa muokattaessa

Vaihe 4: jQuery-skripti lohkon otsikon kaappaamiseen

Skripti ratkaisee päätehtävän: kun lohkon sisällä olevaa painiketta klikataan, se kaappaa kyseisen lohkon otsikkotekstin ja lisää sen sekä ponnahdusikkunan otsikkoon että lomakkeen piilokenttään. Käydään se läpi.

Anna ensin yhteinen CSS-luokka kaikille lohkoille, joista otsikko pitää löytää (esimerkiksi ForContactForm7HiddenInput). Elementorissa tämä tehdään kohdasta "Advanced → CSS Classes" käärelohkolle.

Itse skripti liitetään lapsiteeman functions.php-tiedoston tai Code Snippets -lisäosan kautta (turvallisempi, ei katoa teeman päivittyessä):

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

cf7-universal-form.js-tiedoston sisältö:

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

Mitä tässä tapahtuu:

  • Otsikon talteenotto: kun klikataan painiketta, jolla on luokka .jet-button-order, skripti kulkee DOM-puussa ylöspäin parent-lohkoon .ForContactForm7HiddenInput, etsii sieltä h3.elementor-heading-title-elementin ja tallentaa sen tekstin blockTitle-muuttujaan.
  • Popupin seuranta: vanhentuneen attrchange.js-kirjaston (jonka CDN rawgit.com on suljettu) sijaan skripti käyttää natiivia MutationObserveria, joka tarkkailee Popup Maker -säiliön luokissa tapahtuvia muutoksia. Kun active-luokka ilmestyy (popup on auki), skripti lisää tallennetun otsikon popupin otsikkoon ja piilokenttään #HIDDENINPUT.
  • Valitsimet: .jet-button-order on Elementor JetElements -painikkeen luokka; korvaa se oman painikkeesi luokalla. Popup Maker renderöityy ID:llä #popmake-{ID}, joten koodi käyttää #popmake-4197:a; korvaa 4197 oman popupisi ID:llä.

jQuery-lohkon alla on visuaalinen esimerkki siitä, miltä sivu näyttää, kun siinä on useita lohkoja ja "Tilaa nyt" -painikkeita:

Tuotelohkot tilauspainikkeineen WordPress-aloitussivulla

Kun ensimmäisen lohkon painiketta on klikattu, skripti ottaa talteen tekstin "Roller Blinds", lisää sen popupin otsikkoon ja lomakkeen piilokenttään:

Lohkon otsikko Rullaverhot lisätty automaattisesti piilokenttään ja popupin otsikkoon

Sama pätee kaikkiin viiteen lohkoon: otsikko muuttuu dynaamisesti, mutta lomake pysyy samana.

Vaihe 5: popupit onnistuneelle lähetykselle ja virheelle

Popup Makerilla voit luoda niin monta popupia kuin tarvitset. Tilaviestejä (onnistuminen / virhe) varten luo kaksi uutta popupia vaiheen 3 tapaan. Sinun ei tarvitse sitoa niitä manuaalisesti liipaisimiin; CF7 ohjaa niitä JavaScript-tapahtumien kautta.

Virhepopup näytetään, kun lomakkeen validointi epäonnistuu. Sisältö:

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>

Onnistumispopup näytetään onnistuneen lähetyksen jälkeen. Sisältö:

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>
Lomakevirhekuvake punainen lippu

Näitä SVG-kuvakkeita käytettiin vanhassa popupissa ilmaisemaan lähetyksen tilaa. Voit korvata ne omillasi tai jättää ennalleen; ne ovat neutraaleja eivätkä ole sidoksissa mihinkään tiettyyn lisäosaan.

Onnistuneen lomakkeen lähetyksen kuvake vihreä peukalo

Yhdistä tilapopupit CF7-tapahtumien kautta. Lisää tämä koodi samaan JS-tiedostoon cf7-universal-form.js pääskriptin jälkeen:

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

Korvaa 1065 ja 1068 Popup Makerin tilapopupiesi todellisilla ID:illä.

Tilapopupien perus-CSS-tyylit liitetään Ulkoasu → Mukauta → Lisä-CSS -kohdassa tai teematiedostossa:

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}

Vaihe 6: testaus ja virheenkorjaus

Ennen kuin julkaiset tuotantosivustolla, tarkista jokainen skenaario:

  • Eri lohkojen klikkaaminen: ponnahdusikkunan ja piilokentän otsikko vaihtuu oikein jokaiselle lohkolle.
  • Tyhjä lomake: lähettäminen ilman pakollisten kenttien täyttämistä näyttää virheponnahdusikkunan.
  • Onnistunut lähetys: sähköposti saapuu, ja piilokenttä sisältää oikean lohkon otsikon.
  • Uudelleenavaaminen: ponnahdusikkunan sulkemisen ja uudelleenavaamisen jälkeen otsikko päivittyy.

Jos otsikkoa ei lisätä, tarkista selaimen konsolista (F12 → Console), että:

  • jQuery-valitsin .ForContactForm7HiddenInput h3.elementor-heading-title löytää elementin sivulta;
  • popupId-muuttuja vastaa todellista ponnahdusikkunan ID:tä hallintapaneelissa;
  • Painikkeen luokka (.jet-button-order) vastaa sivulla olevaa todellista luokkaa.

Koodin valitsimet on sidottu Elementoriin + JetElementsiin. Jos käytät eri rakentajaa (Gutenberg, Bricks, Oxygen), korvaa omilla luokillasi ja otsikkorakenteellasi. Periaate pysyy samana: painike → ylätason lohko → otsikko → piilokenttä.

Katso tältä videolta visuaalinen esittely ponnahduslomakkeen määrittämisestä Contact Form 7:llä:

⁉️🤔 Usein kysytyt kysymykset

Voinko tehdä ilman erillistä lisäosaa piilokentälle?

Perus-CF7 ei tue piilokenttiä. DTX on minimaalinen ja aktiivisesti ylläpidetty ratkaisu. Teoriassa voisit lisätä <input type="hidden"> suoraan lomakkeen DOMiin JavaScriptillä, mutta tämä on epäluotettavampaa: skripti ei välttämättä ehdi suorittaa ennen lähetystä, eikä arvo näy sähköpostissa, jos sitä ei ole sidottu tiettyyn CF7-tagiin. Käytä DTX:ää tai vanhaa Contact Form 7 Modulesia; molemmat lisäävät piilokenttätuen tagitasolla, ja arvo näkyy taatusti sähköpostissa.

Miksi Popup Maker on parempi kuin vanha Popups-lisäosa?

Popup Maker päivittyy aktiivisesti (viimeisin versio huhtikuu 2026), siinä on sisäänrakennettu integraatio CF7:n ja muiden lomakkeiden kanssa, ja se tukee kymmeniä laukaisimia ja kohdennussääntöjä. Vanha Popups suljettiin virallisesti WordPress.orgin toimesta heinäkuussa 2022 korjaamattoman haavoittuvuuden vuoksi, eikä sitä tule käyttää tuotantosivustoilla. Popup Maker on sen suora ja turvallinen seuraaja, jolla on yli 780 000 aktiivista asennusta. Keskeinen etu: sisäänrakennettu CF7-integraatio (wpcf7mailsent / wpcf7invalid -tapahtumat toimivat ilman lisäkoodia) ja visuaalinen ponnahdusikkunaeditori.

Miksi käyttää MutationObserveria attrchange.js:n sijaan?

attrchange.js-kirjasto jaeltiin rawgit.comin kautta, joka suljettiin vuonna 2020. Itse GitHub-repositorio on yhä olemassa, mutta skriptin liittäminen sieltä on hankalaa. MutationObserver on selaimen natiivi rajapinta, jota kaikki modernit selaimet ovat tukeneet vuodesta 2014, se ei vaadi ulkoisia riippuvuuksia ja ratkaisee saman tehtävän: attribuuttimuutosten seurannan DOMissa. Vähemmän HTTP-pyyntöjä, ei tarvetta riippuvuuspäivityksille.

Mitä teen, jos piilokentän otsikko näkyy sähköpostissa vääristyneinä kyrillisinä merkkeinä?

Tarkista merkistökoodaus CF7:n ja SMTP-lisäosan asetuksista; sen tulee olla UTF-8. Varmista, ettei sähköpostin aihe sisällä korruptoituneita merkkejä. Jos käytät SMTP:tä Gmail APIn kautta, ongelma saattaa olla sähköpostin otsikkokoodauksessa; tarkista Post SMTP:n tai WP Mail SMTP:n asetukset. Yleensä ongelman lähde on sähköpostipalvelin, ei skripti. Tarkista: (1) wp-config.php, rivi define('DB_CHARSET', 'utf8'); ilman ylimääräisiä välilyöntejä ennen <?php-tagia; (2) SMTP-lisäosan asetukset, sähköpostin koodaus UTF-8; (3) CF7-sähköpostin aihe, poista epästandardit merkit, jätä vain [dynamichidden-120] ilman ylimääräisiä sulkeita tai lainausmerkkejä.

Voinko käyttää tätä lähestymistapaa useille eri lomakkeille yhdellä sivustolla?

Kyllä. Luo erillinen lomake CF7:ssä jokaiselle lohkotyypille ja erillinen ponnahdusikkuna Popup Makerissa. Kopioi skriptissä logiikka jokaiselle parille "lohkon valitsin → ponnahdusikkunan ID → piilokentän ID". Vaihtoehtoisesti käytä yhtä ponnahdusikkunaa ja yhtä lomaketta eri lohkoluokilla; piilokenttä vastaanottaa sen lohkon otsikon, jota klikattiin, ilman lisämäärityksiä.

Yksi universaali lomake kaikille sivun lohkoille on tämän ratkaisun pääajatus. Täysin erilaisille lohkotyypeille (tuotteet vs. palvelut) luo kaksi settiä: tuotelomake + tuoteponnahdusikkuna ja palvelulomake + palveluponnahdusikkuna. Kopioi skriptissä vain koodilohko eri valitsimilla.

Mitä lisäosapinoa käyttää vuonna 2026

Universaali lomake piilokentällä on todistettu ratkaisu laskeutumissivuille, joissa on kymmeniä samankaltaisia lohkoja. Kolmenkymmenen erillisen lomakkeen sijaan määrität yhden, ja skripti lisää lohkon otsikon automaattisesti. Tässä on pino, jota suosittelemme vuonna 2026:

  • Contact Form 7: yli 10 miljoonaa asennusta, kevyt, ilmainen.
  • Dynamic Text Extension (DTX): piilo- ja dynaamiset kentät, aktiivinen tuki.
  • Popup Maker: ponnahdusikkunat klikkauslaukaisimilla ja sisäänrakennetulla CF7-integraatiolla.
  • MutationObserver (natiivi JS): ponnahdusikkunan avaamisen seuranta ilman ulkoisia kirjastoja.

Jos sinun täytyy kaapata lohkon otsikko ja välittää se lomakkeelle, käytä tätä pinoa. Käytännössä se toimii ongelmitta, ja asennus vie noin tunnin jopa perustason WordPress-osaamisella.

🔗 Dynamic Text Extension WordPress.orgissa | 🔗 Popup Maker WordPress.orgissa

Toimitus
ToimitusToimitustiimi→ All publications

Ammattimainen kirjoittajien ja toimittajien tiimi, joka on erikoistunut laadukkaan sisällön luomiseen.