Hur man bygger ett WordPress AJAX-formulär (i 4 enkla steg)

Har du någonsin förlorat potentiella kunder för att ditt kontaktformulär var långsamt eller krävde att hela sidan laddades om? Det är en historia vi hör alltför ofta.

Vi har också sett på nära håll hur frustrerande traditionella WordPress-formulär kan vara – både för webbplatsägare och deras besökare. AJAX-formulär löser detta problem, och de kan göra detsamma för din.

Dessa moderna formulär skickar data omedelbart utan att uppdatera sidan. De skapar en smidigare upplevelse som hjälper till att hålla besökarna engagerade.

Vi har implementerat dessa formulär många gånger på klienters och partners webbplatser, och resultaten talar för sig själva.

I den här guiden delar vi med oss av en enkel 4-stegsprocess för att bygga ett WordPress AJAX-formulär. Vi kommer att använda ett nybörjarvänligt plugin som förenklar det tekniska arbetet så att du enkelt kan följa med. 🙌

Vad är AJAX och varför använda det för dina formulär?

AJAX, kort för Asynchronous JavaScript and XML, är en programmeringsteknik som gör det möjligt för webbsidor att skicka och ta emot data utan att laddas om.

Det används vanligtvis i webbformulär, vilket gör det möjligt för användare att skicka formulärdata utan att sidan laddas om. Detta gör formulärinlämning enkel och snabb, vilket förbättrar den övergripande användarupplevelsen.

Webbapplikationer som Gmail och Facebook använder också denna teknik flitigt för att hålla användarna engagerade medan bakgrundsuppgifter körs sömlöst.

Du kan använda AJAX för formulär på din WordPress-webbplats för att undvika onödiga sidomladdningar och hålla användarna engagerade på sidan de tittar på.

Detta är särskilt användbart om du driver en onlinebutik och vill samla in användarfeedback utan att avbryta shoppingupplevelsen.

Du kan också använda samma AJAX-funktionalitet för andra anpassade formulär på din webbplats. Till exempel kan ett anpassat inloggningsformulär för användare låta användare logga in utan en ytterligare sidladdning.

Med det i åtanke visar vi dig hur du skapar ett WordPress AJAX-kontaktformulär i 4 enkla steg.

Låt oss börja.

Steg 1: Installera WPForms-pluginet

Det första steget är att installera och aktivera ett plugin för formulärbyggare.

För den här handledningen använder vi WPForms-pluginet. Det är den bästa WordPress-kontaktformulärbyggaren på marknaden, och den låter dig enkelt skapa Ajax-drivna formulär.

På WPBeginner använder vi WPForms för att visa vårt kontaktformulär, köra årliga enkäter för läsare och hantera förfrågningar om migrationsservice, bland annat.

Det har varit en fantastisk upplevelse, och du kan se vår fullständiga WPForms-recension för mer insikter.

För att börja kan du vilja skapa ett WPForms-konto. På WPForms webbplats klickar du på knappen 'Get WPForms Now', väljer en plan och slutför köpprocessen.

När det är gjort bör du ha ditt eget WPForms-kontopanel, där du kan ladda ner din WPForms Pro zip-fil och kopiera din licensnyckel.

Låt oss sedan installera och aktivera WPForms-pluginet.

I ditt WordPress adminområde kan du gå till Plugins » Lägg till nytt plugin.

Använd sedan sökfältet för att snabbt hitta pluginet.

När du ser det, klicka på ‘Installera nu’ och sedan igen på ‘Aktivera.’

För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Efter aktivering, gå till sidan WPForms » Inställningar för att ange din licensnyckel.

När den har verifierats kommer du att kunna ta emot automatiska uppdateringar och installera tillägg. Du är nu redo att börja skapa AJAX-formulär i WordPress.

Steg 2: Skapa ditt första formulär

Låt oss nu gå vidare och skapa ditt första WordPress-formulär.

Besök helt enkelt sidan WPForms » Lägg till ny i WordPress adminområde.

På nästa skärm kan du först namnge ditt nya formulär, till exempel ‘Kontaktformulär.’

Därefter väljer du hur du ska bygga dina formulär.

Med WPForms kan du bygga dina formulär från grunden, använda AI-formulärbyggaren, eller välja bland över 2 000 färdiga mallar.

Om du till exempel vill använda WPForms AI behöver du bara ange en enkel prompt så genererar den formuläret åt dig i förhandsgranskningsområdet.

För den här handledningen kommer vi dock att skapa ett kontaktformulär med hjälp av en färdig mall.

Låt oss sväva över rutan 'Enkelt kontaktformulär' och klicka på 'Använd mall'. Observera att du kan skapa vilken annan typ av formulär du behöver; processen är densamma.

WPForms laddar nu ditt formulär med grundläggande fält som redan har lagts till.

Härifrån kan du helt enkelt klicka på vilket formulärfält som helst för att redigera det.

Du kan också lägga till nya formulärfält från den vänstra kolumnen genom att klicka på dem.

Det nya fältet visas längst ner i ditt formulär, precis ovanför knappen Skicka.

Du kan sedan dra och släppa formulärfälten för att ordna om deras ordning.

När du är klar med att anpassa formuläret kan du gå vidare till nästa steg.

Steg 3: Aktivera AJAX-formulärinlämningsfunktionen

Beroende på dina inställningar kanske WPForms inte har AJAX-formulärinlämning aktiverat som standard, så låt oss verifiera det nu.

För att göra detta, byt helt enkelt till fliken ‘Inställningar’ i formulärbyggaren.

I fliken 'Allmänna' inställningar, klicka på växlingsknappen bredvid alternativet 'Aktivera AJAX-formulärinlämning'.

Nu ska vi ställa in vad som händer efter att någon har skickat in formuläret.

Först kan du växla till fliken 'Bekräftelse' under inställningar. Det är här du informerar dina användare om att du har tagit emot deras formulärinlämning.

WPForms låter dig göra det på olika sätt. Du kan till exempel vidarebefordra användare till en URL, visa dem en specifik sida eller helt enkelt visa ett meddelande på skärmen.

Även om du kan omdirigera användare till en ny sida, kräver det en sidladdning. För att få mest nytta av AJAX rekommenderar vi att du helt enkelt visar ett 'Meddelande' så att användaren stannar kvar på samma sida.

Du måste välja meddelandealternativet och redigera bekräftelsemeddelandet. Du kan använda formateringsverktygsfältet eller lägga till länkar för att guida användare om vad de ska göra härnäst.

Ställ sedan in hur du vill bli meddelad om nya formulärinlämningar.

Växla till fliken 'Aviseringar' i formulärinställningarna och konfigurera inställningarna för aviseringsmejl.

När du är klar kan du spara ditt formulär och avsluta formulärbyggaren.

Steg 4: Lägg till ditt AJAX-aktiverade formulär i WordPress

WPForms gör det enkelt att lägga till formulär på din WordPress-webbplats, oavsett om det är i ett inlägg, en sida eller en sidofältswidget.

Redigera helt enkelt inlägget eller sidan där du vill lägga till formuläret och infoga WPForms-blocket i ditt innehållsområde.

Efter det behöver du välja formuläret du precis skapade från rullgardinsmenyn i WPForms-blocket.

WPForms kommer omedelbart att ladda en liveförhandsgranskning av formuläret i innehållseditor.

Du kan nu spara eller publicera ditt innehåll och sedan besöka din WordPress-webbplats för att testa formulärets AJAX-funktionalitet.

Här är en snabb titt på WordPress AJAX-formulärexemplet från vår demosida:

Du kan också lägga till ditt formulär i en sidofältswidget i WordPress.

För att göra det, gå till sidan Utseende » Widgets och lägg till WPForms-widgetblocket i en sidofält.

Välj formuläret du skapade tidigare och klicka på knappen "Uppdatera" för att spara widgetinställningarna. Du kan nu besöka din webbplats för att se ditt AJAX-drivna formulär i aktion.

Bonustips: Exportera formulärinlägg till CSV eller Excel 📄

När ditt AJAX-formulär är igång, kanske du vill föra en logg över alla inlämningar. Särskilt om du samlar in leads, kundförfrågningar eller registreringsinformation.

Det enklaste sättet att göra detta är genom att exportera dina inlägg som en CSV- eller Excel-fil.

Detta gör det enkelt att organisera och analysera svar i kalkylprogram som Google Sheets eller Microsoft Excel. Det är också praktiskt för att dela rapporter med ditt team eller säkerhetskopiera formulärdata utanför WordPress.

Om du använder WPForms är export av formulärinlägg enkelt: gå till WPForms » Entries, välj ditt formulär, välj dina exportalternativ och ladda ner data som en CSV- eller Excel-fil.

Vill du ställa in detta? Följ vår fullständiga guide om hur du exporterar WordPress-formulärposter till CSV och Excel.

Vanliga frågor: WordPress AJAX-formulär

Innan vi avslutar, här är några vanliga frågor som uppstår när folk börjar använda AJAX-formulär i WordPress.

Hur använder jag AJAX för formulärinlämning?

Det enklaste sättet är att använda ett formulärplugin som redan stöder AJAX, som WPForms. Du aktiverar bara AJAX-alternativet i formulärinställningarna, och pluginet hanterar allt åt dig.

Om du bygger ett anpassat formulär behöver du använda JavaScript och WordPress AJAX-krokar. Men för de flesta webbplatser är ett plugin mycket enklare och mer pålitligt.

Var hittar jag AJAX-inställningen i WPForms?

I WPForms finns AJAX-alternativet under formulärinställningarna. När du har öppnat ditt formulär i byggaren, gå till Inställningar » Allmänt och leta sedan efter kryssrutan Aktivera AJAX-formulärinlämning. När den är aktiverad kommer formuläret att skickas utan att sidan laddas om.

Vilka är nackdelarna med AJAX?

AJAX är beroende av JavaScript, så det kan krocka med aggressiva cache-plugins som minifierar eller skjuter upp skript. Om ditt formulär ‘snurrar’ men inte skickas, prova att rensa din cache eller kontrollera inställningarna för ditt optimeringsplugin.

Det kan också orsaka problem med sidbyggare eller äldre teman om det inte är korrekt konfigurerat. Därför är det viktigt att testa dina formulär efter att ha aktiverat AJAX.

Bonusresurser: Fler guider för WordPress-formulär

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du skapar ett WordPress AJAX-kontaktformulär för din webbplats. Därefter kanske du också vill se våra artiklar om:

• Hur man skapar ett kontaktformulär som popup i WordPress
• Hur du använder kontaktformulär för att växa din e-postlista
• Hur man skapar kontaktformulär med flera mottagare
• Hur man skapar ett säkert kontaktformulär i WordPress
• Hur man blockerar spam i kontaktformulär i WordPress
• Hur man spårar och minskar övergivna formulär
• Den ultimata guiden för att använda WordPress-formulär

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.