En användare öppnar ett formulär, ser en "Skicka"-knapp, klickar på den och får valideringsfel. Fönstret markerar fält i rött: "Obligatoriskt." Känns det igen?

Contact Form 7, det mest populära formulärpluginet för WordPress, har över 5 miljoner aktiva installationer. Men direkt ur kartongen visar det alltid skicka-knappen, även när fält är tomma. För användaren innebär det ett extra klick och frustration. För webbplatsägaren innebär det förlorade leads: en tredjedel av besökarna som stöter på ett formulärfel lämnar helt enkelt och kommer aldrig tillbaka.

Du kan fixa detta med tre rader jQuery. Eller så kan du göra det utan några skript alls, med ren CSS. I denna genomgång får du båda tillvägagångssätten, plus ett färdigt plugin för den som inte vill röra kod.

💡 Snabb översikt:

• jQuery-spårning: dölj knappen och visa den endast när textlängden i alla fält når dina gränser
• Ren CSS: ett trick med :valid, :has() och attributet required, utan en enda rad JavaScript
• Pluginet Conditional Fields för Contact Form 7: en visuell villkorsbyggare för komplex logik utan kod

Varför dölja skicka-knappen

En användare ska inte behöva gissa vad som gick fel. När en knapp är synlig och klickbar men formuläret inte är redo skapar det kognitiv dissonans. Personen klickar, får ett fel, skannar efter markerade fält, åtgärdar dem, klickar igen. Varje sådan cykel sänker konverteringen.

En knapp som är dold tills allt är klart löser tre problem:

• Eliminerar falska inskickningsförsök. Ingen knapp, inget för tidigt klick.
• Ger visuell återkoppling. Att knappen dyker upp = en signal om att formuläret är redo att skickas.
• Minskar friktion. Användaren fyller i fälten, knappen visas, ett klick, klart.

Contact Form 7 har ingen inbyggd mekanism för detta beteende. Men att lägga till det tar 10 minuters arbete.

Metod 1: jQuery-spårning av inmatning

Det mest flexibla tillvägagångssättet. Du sätter dina egna regler: hur många tecken varje fält måste innehålla innan knappen visas. Fungerar med alla fälttyper (text, e-post, textarea, telefon).

Formulärkropp för Contact Form 7

Som exempel, ta ett standardkontaktformulär med tre fält, Google reCAPTCHA och en skicka-knapp. Här är dess märkspråk i CF7-redigeraren:

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-blocket inuti formuläret är en lösning för att sträcka ut reCAPTCHA till full containerbredd; det är praktiskt om formuläret sitter i en smal kolumn.

JQuery-skript

Kopiera denna kod till ditt temas custom.js-fil eller till fältet "Additional Scripts" i pluginet Code Snippets:

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

Vad som händer här:

• Rad 4: knappen döljs omedelbart vid sidladdning (display: none).
• Rad 7: metoden .on('input', ...) lyssnar efter varje textändring i de tre fälten (användaren skriver, klistrar in från urklipp, raderar tecken). Tidigare användes .keyup(), men input är mer tillförlitligt: det aktiveras även vid musklistring.
• Rad 8-10: vi läser aktuella värden och trimmar blanksteg från kanterna via .trim().
• Rad 13: villkorskontroll. Du kan ändra siffrorna efter dina behov: till exempel kan > 1 räcka för ett namnfält, > 10 för ett meddelande.
• Rad 14 och 16: fadeIn och fadeOut ger ett mjukt framträdande och försvinnande av knappen över 200 millisekunder. Det ser prydligare ut än ett abrupt show()/hide().

Fysiskt finns knappelementet alltid i sidans DOM-träd; synligheten styrs av CSS-egenskapen display. Detta är säkert: även om skriptet misslyckas att laddas (nätverksproblem, annonsblockerare) förblir knappen helt enkelt synlig och användaren förlorar inte möjligheten att skicka formuläret.

Hur du anpassar för ditt formulär

Ändra tre saker:

• Fält-ID:n: i CF7-märkspråket ersätt bim-name, bim-email och bim-message med dina egna identifierare.
• Teckengränser: i if-villkoret infogar du de siffror du behöver. För ett telefonfält kan du kontrollera .replace(/\D/g, '').length > 9 (endast siffror, minst 10).
• Fältlista: om du har 5 fält, lägg till dem i selektorn $('#id1, #id2, ...') och i if-villkoret.

För fälttyperna [checkbox], [select] eller [radio] fungerar inte textlängd; kontrollera själva valet:

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

Metod 2: ren CSS utan skript

För enkla formulär med ett eller två fält kan du hoppa över JavaScript helt. Idén är att moderna webbläsare kan kontrollera fältvaliditet via pseudoklassen :valid, och CSS-kombinatorn :has() (stöds i alla webbläsare sedan 2023) låter dig titta "inuti" ett föräldraelement.

Det fungerar så här:

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 finns en nyans: CF7 lägger inte till attributet required till fält automatiskt. Du måste lägga till det manuellt i formulärmärkspråket; en asterisk * bredvid fältnamnet i CF7-redigeraren räcker:

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

Asterisken efter fälttypen (text*, email*) aktiverar obligatorisk status. CF7 själv kommer att infoga HTML-attributet required i <input>-taggen, och CSS-selektorn kommer att fungera.

Fördelen med CSS-metoden: noll skript, den går inte sönder vid jQuery-konflikter, och den fungerar även med JavaScript inaktiverat. Nackdelen: logiken är enklare ("alla obligatoriska fält är ifyllda" kontra "namnfältet är längre än 4 tecken"). För de flesta kontaktformulär är detta tillräckligt.

Metod 3: Pluginet Conditional Fields for Contact Form 7

När logiken blir mer komplex (till exempel, visa knappen endast om ett specifikt objekt i [select] är valt och e-posten är ifylld) växer jQuery-koden. Det är här det gratis pluginet Conditional Fields for Contact Form 7 kommer till undsättning (över 100 000 aktiva installationer, 5-stjärnigt betyg).

Pluginet lägger till en visuell villkorsredigerare direkt inuti CF7-gränssnittet. Du sätter regler med ett par klick:

• "Visa knappen om fältet 'Namn' inte är tomt OCH fältet 'E-post' inte är tomt OCH fältet 'Meddelande' innehåller mer än 20 tecken."
• Eller: "Visa fältet 'Leveransadress' om radioknappen 'Kurirleverans' är vald."

Ingen kod krävs. Villkor kan tillämpas på vilket fält eller vilken fältgrupp som helst, inklusive själva skicka-knappen. Pluginet underhålls aktivt och uppdateras regelbundet; från och med juni 2026 är det kompatibelt med den aktuella WordPress-versionen.

Vilken lösning du ska välja

Tre tillvägagångssätt täcker tre olika scenarier:

• Ren CSS: idealiskt för en landningssida med ett enkelt formulär med 2-3 fält. Minsta antal rörliga delar, inget som kan gå sönder.
• jQuery-skript: ditt val när du behöver finjusterade gränser ("namn längre än 4 tecken, meddelande längre än 20"). Full kontroll över villkoren.
• Conditional Fields: använd det när logiken förgrenar sig (olika uppsättningar fält för olika val, nästlade villkor, visa/dölja hela formulärsektioner). Den visuella byggaren sparar timmar av felsökning.

För de flesta WordPress-webbplatser räcker kombinationen "jQuery + sunt förnuft". Skriptet ovan (20 rader) infogas en gång och fungerar i åratal utan uppdateringar.

Video: steg-för-steg-konfiguration

Denna 8-minuters handledning går igenom hela processen, från att skapa ett formulär i CF7 till ett färdigt skript för att dölja knappar som kontrollerar om alla fält är ifyllda:

⁉️🤔 Vanliga frågor

Fungerar skriptet med caching-plugins?

Ja, förutsatt att den korrekta omslutningen jQuery(document).ready(...) används. Om webbplatsen använder aggressiv minifiering (Autoptimize, WP Rocket med skriptkombinering), exkludera skriptfilen från kombinering eller använd pluginet Code Snippets: det infogar kod i sidfoten som ett separat block som minifierare inte rör.

Vad händer om en användare har JavaScript inaktiverat?

Med JavaScript inaktiverat förblir knappen synlig; skriptet döljer den helt enkelt inte. Detta är graciös degradering: CF7 kommer att utföra server-side-validering och visa fel på standardvägen. För CSS-metoden som använder :has() är situationen densamma: utan JS-validering kontrollerar CF7 fortfarande fält på servern vid inskickning.

Kan jag dölja knappen för ett specifikt formulär om det finns flera på sidan?

Det enklaste sättet är att ge knappen ett unikt id i CF7-redigeraren, och sedan använda det ID:t som selektor i skriptet. Om det finns flera formulär, duplicera kodblocket för varje knapp med sitt eget ID, eller hitta knappen dynamiskt inuti det aktuella formuläret via $(this).closest('form').find('.wpcf7-submit').

Varför inte bara använda required på fält och förlita sig på webbläsarvalidering?

Eftersom required inte döljer knappen; det blockerar bara formulärinskickning och visar ett webbläsarinternt verktygstips. Vårt mål är att ta bort själva möjligheten till ett felaktigt klick. Dessutom kontrollerar inte standardwebbläsarvalidering textlängd, bara att fältet är ifyllt, och för ett meddelande som är 2 tecken långt är detta ett svagt skydd.

Behöver jag fortfarande validera fält på servern?

Ja, absolut. Logik på klientsidan för att dölja knappen ersätter inte CF7:s server-side-validering. Konfigurera alltid obligatoriska fält i formulärredigeraren (* i märkspråket) och verifiera att e-postmeddelanden levereras. Två lager av skydd: frontend för bekvämlighet, backend för säkerhet.

Dold knapp, rena leads: vad du ska använda på din webbplats

Tillvägagångssättet att dölja skicka-knappen är en av de mikroförbättringar som är osynliga för ögat men märkbara för händerna. En användare kommer inte att säga "fantastiskt, knappen dök upp i rätt ögonblick." Men de kommer att slutföra formuläret och inte lämna efter det första klicket i tomma intet.

För ett enkelt kontaktformulär, använd CSS-metoden med :has(): 5 rader kod, noll beroenden. För anpassade längdgränser på fält, använd jQuery-skriptet från metod 1 (kopiera och klistra in i Code Snippets). För komplexa formulär med förgrenad logik, använd Conditional Fields.

Prova det nu: öppna din kontaktformulärredigerare i CF7, lägg till id: till fält och knappen, klistra in skriptet och kontrollera hur knappen endast visas när alla fält är ifyllda meningsfullt, inte på måfå.