En bruker åpner et skjema, ser en «Send»-knapp, klikker på den og får valideringsfeil. Vinduet markerer felt i rødt: «Påkrevd.» Høres det kjent ut?

Contact Form 7, den mest populære skjemapluginen for WordPress, har over 5 millioner aktive installasjoner. Men rett ut av boksen viser den alltid send-knappen, selv når feltene er tomme. For brukeren betyr dette et ekstra klikk og frustrasjon. For nettstedseieren betyr det tapte leads: en tredjedel av besøkende som møter en skjemafeil, forlater siden og kommer aldri tilbake.

Du kan fikse dette med tre linjer jQuery. Eller du kan gjøre det uten noen skripter i det hele tatt, ved hjelp av ren CSS. I denne gjennomgangen får du begge tilnærmingene, pluss en ferdig plugin for dem som ikke vil røre kode.

💡 Rask oversikt:

• jQuery-sporing: skjul knappen og vis den bare når tekstlengden i alle felt når grensene dine
• Ren CSS: et triks med :valid, :has() og required-attributtet, uten en eneste linje JavaScript
• Conditional Fields for Contact Form 7: en visuell betingelsesbygger for kompleks logikk uten kode

Hvorfor skjule send-knappen

En bruker skal ikke måtte gjette hva som gikk galt. Når en knapp er synlig og klikkbar, men skjemaet ikke er klart, skaper det kognitiv dissonans. Personen klikker, får en feil, skanner etter uthevede felt, retter dem, klikker igjen. Hver slik syklus senker konverteringen.

En knapp som er skjult til alt er klart, løser tre problemer:

• Eliminerer falske innsendingsforsøk. Ingen knapp, intet for tidlig klikk.
• Gir visuell tilbakemelding. At knappen dukker opp = et signal om at skjemaet er klart til å sendes.
• Reduserer friksjon. Brukeren fyller ut feltene, knappen vises, ett klikk, ferdig.

Contact Form 7 har ingen innebygd mekanisme for denne oppførselen. Men å legge den til tar 10 minutters arbeid.

Metode 1: jQuery-sporing av inndata

Den mest fleksible tilnærmingen. Du setter dine egne regler: hvor mange tegn hvert felt må inneholde før knappen vises. Fungerer med alle felttyper (tekst, e-post, tekstområde, telefon).

Contact Form 7-skjemakropp

Som et eksempel, ta et standard kontaktskjema med tre felt, Google reCAPTCHA, og en send-knapp. Her er oppmerkingen i CF7-editoren:

1
[text text-776 id:bim-name class:bim-name placeholder "Name"]
2
[email email-498 id:bim-email class:bim-email placeholder "Email"]
3
[textarea textarea-697 id:bim-message class:bim-message placeholder "Message"]
4
 
5
<style>
6
.g-recaptcha > div {
7
    width: 100% !important;
8
}
9
.g-recaptcha iframe {
10
    width: 100% !important;
11
}
12
div#GoogleReCapchaFullWidth {
13
    width: 100% !important;
14
    padding-bottom: 6px;
15
}
16
</style>
17
 
18
[recaptcha id:GoogleReCapchaFullWidth]
19
 
20
[submit id:bim-button class:bim-button "Submit"]

CSS-blokken inne i skjemaet er en løsning for å strekke reCAPTCHA til full containerbredde; den er nyttig hvis skjemaet står i en smal kolonne.

JQuery-skript

Kopier denne koden inn i temaets custom.js-fil eller inn i feltet «Additional Scripts» i Code Snippets-pluginen:

1
jQuery(document).ready(function ($) {
2
 
3
    // Initially the button is hidden
4
    $('#bim-button').css('display', 'none');
5
 
6
    // Listen for input on all three fields
7
    $('#bim-name, input#bim-email, #bim-message').on('input', function () {
8
        var nameVal = $('#bim-name').val().trim();
9
        var emailVal = $('#bim-email').val().trim();
10
        var messageVal = $('#bim-message').val().trim();
11
 
12
        // Conditions: name > 4 characters, email > 6, message > 20
13
        if (nameVal.length > 4 && emailVal.length > 6 && messageVal.length > 20) {
14
            $('#bim-button').fadeIn(200);
15
        } else {
16
            $('#bim-button').fadeOut(200);
17
        }
18
    });
19
 
20
});

Hva som skjer her:

• Linje 4: knappen skjules umiddelbart ved sidelasting (display: none).
• Linje 7: .on('input', ...)-metoden lytter etter enhver tekstendring i de tre feltene (brukeren skriver, limer inn fra utklippstavlen, sletter tegn). Tidligere ble .keyup() brukt, men input er mer pålitelig: den utløses også ved muselim.
• Linje 8-10: vi leser gjeldende verdier og trimmer mellomrom fra kantene via .trim().
• Linje 13: sjekk av betingelse. Du kan endre tallene for å passe dine behov: for eksempel kan > 1 være nok for et navnefelt, > 10 for en melding.
• Linje 14 og 16: fadeIn og fadeOut gir en jevn visning og forsvinning av knappen over 200 millisekunder. Det ser ryddigere ut enn en brå show()/hide().

Fysisk er knappeelementet alltid i sidens DOM-tre; synlighet kontrolleres av CSS-egenskapen display. Dette er trygt: selv om skriptet ikke lastes (nettverksproblem, annonseblokkerer), forblir knappen synlig og brukeren mister ikke muligheten til å sende skjemaet.

Hvordan tilpasse for ditt skjema

Endre tre ting:

• Felt-ID-er: i CF7-oppmerkingen bytter du ut bim-name, bim-email og bim-message med dine egne identifikatorer.
• Tegngrenser: i if-betingelsen setter du inn tallene du trenger. For et telefonfelt kan du sjekke .replace(/\D/g, '').length > 9 (bare sifre, minst 10).
• Feltliste: hvis du har 5 felt, legg dem til i selektoren $('#id1, #id2, ...') og i if-betingelsen.

For felttypene [checkbox], [select] eller [radio] fungerer ikke tekstlengde; sjekk selve valget:

1
var agreeChecked = $('#bim-agree').is(':checked');

Metode 2: ren CSS uten skripter

For enkle skjemaer med ett eller to felt kan du hoppe over JavaScript helt. Ideen er at moderne nettlesere kan sjekke feltvaliditet via pseudoklassen :valid, og CSS-kombinatoren :has() (støttet i alle nettlesere siden 2023) lar deg se «inni» et overordnet element.

Det fungerer slik:

1
form.wpcf7-form .wpcf7-submit {
2
    display: none;
3
}
4
 
5
form.wpcf7-form:has(input[required]:invalid) .wpcf7-submit {
6
    display: none;
7
}
8
 
9
form.wpcf7-form:not(:has(input[required]:invalid)) .wpcf7-submit {
10
    display: block;
11
}

Men det er en nyanse: CF7 legger ikke til required-attributtet i feltene automatisk. Du må legge det til manuelt i skjemaoppmerkingen; en stjerne * ved siden av feltnavnet i CF7-editoren er nok:

1
[text* text-776 id:bim-name placeholder "Name"]
2
[email* email-498 id:bim-email placeholder "Email"]

Stjernen etter felttypen (text*, email*) aktiverer obligatorisk status. CF7 selv vil sette inn HTML required-attributtet i <input>-taggen, og CSS-selektoren vil fungere.

Fordelen med CSS-metoden: null skripter, den bryter ikke ved jQuery-konflikter, og den fungerer selv med JavaScript deaktivert. Ulempen: logikken er enklere («alle obligatoriske felt er fylt ut» kontra «navnefeltet er lengre enn 4 tegn»). For de fleste kontaktskjemaer er dette tilstrekkelig.

Metode 3: Conditional Fields for Contact Form 7-plugin

Når logikken blir mer kompleks (for eksempel, vis knappen bare hvis et spesifikt element i [select] er valgt og e-posten er fylt ut), vokser jQuery-koden. Det er her gratispluginen Conditional Fields for Contact Form 7 kommer til unnsetning (100 000+ aktive installasjoner, 5-stjerners vurdering).

Pluginen legger til en visuell betingelseseditor rett inne i CF7-grensesnittet. Du setter regler med et par klikk:

• «Vis knappen hvis feltet 'Navn' ikke er tomt OG feltet 'E-post' ikke er tomt OG feltet 'Melding' inneholder mer enn 20 tegn.»
• Eller: «Vis feltet 'Leveringsadresse' hvis radioknappen 'Budlevering' er valgt.»

Ingen kode kreves. Betingelser kan brukes på ethvert felt eller feltgruppe, inkludert selve send-knappen. Pluginen vedlikeholdes aktivt og oppdateres jevnlig; per juni 2026 er den kompatibel med gjeldende WordPress-versjon.

Hvilken løsning du skal velge

Tre tilnærminger dekker tre forskjellige scenarier:

• Ren CSS: ideelt for en landingsside med et enkelt skjema med 2-3 felt. Minimum av bevegelige deler, ingenting å ødelegge.
• jQuery-skript: ditt valg når du trenger finjusterte grenser («navn lengre enn 4 tegn, melding lengre enn 20»). Full kontroll over betingelser.
• Conditional Fields: bruk det når logikken forgrener seg (forskjellige sett med felt for ulike valg, nestede betingelser, visning/skjuling av hele skjemaseksjoner). Den visuelle byggeren sparer timer med feilsøking.

For de fleste WordPress-nettsteder er kombinasjonen «jQuery + sunn fornuft» nok. Skriptet ovenfor (20 linjer) settes inn én gang og fungerer i årevis uten oppdateringer.

Video: trinnvis oppsett

Denne 8-minutters veiledningen går gjennom hele prosessen, fra å lage et skjema i CF7 til et ferdig skript for å skjule knappen som sjekker om alle felt er fylt ut:

⁉️🤔 Ofte stilte spørsmål

Fungerer skriptet med caching-pluginer?

Ja, forutsatt at riktig jQuery(document).ready(...)-wrapper brukes. Hvis nettstedet bruker aggressiv minifisering (Autoptimize, WP Rocket med skriptsammenslåing), ekskluder skriptfilen fra sammenslåing eller bruk Code Snippets-pluginen: den setter inn kode i sidebunnteksten som en separat blokk som minifiserere ikke rører.

Hva om en bruker har JavaScript deaktivert?

Med JavaScript deaktivert forblir knappen synlig; skriptet skjuler den rett og slett ikke. Dette er «graceful degradation»: CF7 vil utføre serverside-validering og vise feil på standard måte. For CSS-metoden som bruker :has(), er situasjonen den samme: uten JS-validering sjekker CF7 fortsatt feltene på serveren ved innsending.

Kan jeg skjule knappen for et spesifikt skjema hvis det er flere på siden?

Den enkleste måten er å gi knappen en unik id i CF7-editoren, og deretter bruke den ID-en som selektor i skriptet. Hvis det er flere skjemaer, dupliser kodeblokken for hver knapp med sin egen ID, eller finn knappen dynamisk inne i det gjeldende skjemaet via $(this).closest('form').find('.wpcf7-submit').

Hvorfor ikke bare bruke required på feltene og stole på nettleservalidering?

Fordi required ikke skjuler knappen; den blokkerer bare skjemainnsending og viser et nettleserbasert verktøytips. Målet vårt er å fjerne selve muligheten for et feilaktig klikk. I tillegg sjekker ikke standard nettleservalidering tekstlengde, bare at feltet er fylt ut, og for en melding som er 2 tegn lang, er dette svak beskyttelse.

Må jeg fortsatt validere feltene på serveren?

Ja, absolutt. Klientsidelogikk for å skjule knappen erstatter ikke CF7s serverside-validering. Konfigurer alltid obligatoriske felt i skjemaeditoren (* i oppmerkingen) og bekreft at e-poster leveres. To lag med beskyttelse: frontend for bekvemmelighet, backend for sikkerhet.

Skjult knapp, rene leads: hva du skal bruke på nettstedet ditt

Tilnærmingen med å skjule send-knappen er en av disse mikroforbedringene som er usynlige for øyet, men merkbare for hendene. En bruker vil ikke si «fantastisk, knappen dukket opp i rett øyeblikk». Men de vil fullføre skjemaet og ikke forlate etter første klikk ut i intet.

For et enkelt kontaktskjema, bruk CSS-metoden med :has(): 5 linjer kode, null avhengigheter. For egendefinerte lengdegrenser på felt, bruk jQuery-skriptet fra metode 1 (kopier og lim inn i Code Snippets). For komplekse skjemaer med forgrenet logikk, bruk Conditional Fields.

Prøv det nå: åpne kontaktskjemaredigereren din i CF7, legg til id: i feltene og knappen, lim inn skriptet, og sjekk hvordan knappen bare vises når alle felt er fylt ut meningsfullt, ikke tilfeldig.