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 webbutik 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 formulär för användarinloggning låta användare logga in utan ytterligare sidladdning.

Varför välja WPForms för AJAX-formulär?

WPForms är den bästa WordPress-formulärbyggaren för att skapa AJAX-aktiverade formulär, betrodd av över 6 miljoner webbplatser.

Här är vad som gör WPForms idealiskt för AJAX-formulär:

• Snabb installation för icke-kodare. De flesta användare skapar sitt första AJAX-formulär på under 10 minuter utan att skriva någon kod. Dra-och-släpp-byggaren låter dig skapa professionella formulär direkt, även om du aldrig har rört kod förut.
• Support i företagsklass. WPForms erbjuder support samma dag med ett team som får konsekvent beröm på recensionsplattformar. Om du stöter på problem löser riktiga människor dem snabbt – något som gratis plugins som Contact Form 7 inte kan erbjuda.
• Kraftfulla integrationer. Dina AJAX-formulär kan anslutas till Constant Contact, HubSpot, Stripe, PayPal, Salesforce och över 2 000 andra tjänster. Samla in leads och skicka dem automatiskt till din e-postmarknadsföringsplattform eller CRM utan manuella exporter.
• Stabilt och pålitligt. WPForms-formulär fortsätter att fungera vid WordPress-uppdateringar utan att gå sönder. Användare rapporterar konsekvent att ”det bara fungerar” – avgörande när varje trasigt formulär innebär förlorade leads.

Med WPForms får du AJAX-funktionalitet plus mallar, integrationer och support som gör formulärskapandet enkelt. Låt oss titta på hur du skapar ditt WordPress AJAX-kontaktformulär i 4 enkla steg.

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 kommer vi att använda plugin-programmet WPForms. Det är den bästa WordPress-formulärbyggaren för kontaktformulär på marknaden, och det gör det enkelt att 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 läsa vår fullständiga recension av WPForms för mer insikt.

För att börja kan du 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 klart bör du ha ditt eget WPForms-kontodashbord, där du kan ladda ner din WPForms zip-fil och kopiera din licensnyckel.

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

I ditt WordPress-administratörsområde kan du gå till Plugins » Lägg till 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, om du har köpt WPForms Pro, gå till sidan WPForms » Inställningar för att ange din licensnyckel. Användare av gratisversionen kan hoppa över detta steg och fortsätta till steg 2.

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

Nu sätter vi igång och skapar 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 eller välja bland förgjorda mallar. Notera att WPForms Lite inkluderar standardmallar; det fullständiga biblioteket med över 2 000 mallar kräver Basic eller högre.

Innehavare av Basic-licens eller högre kan också använda AI-formulärbyggaren för att generera formulär från en textprompt. WPForms kommer sedan att generera 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 har slutfört anpassningen av formuläret kan du gå vidare till nästa steg.

Steg 3: Konfigurera ditt AJAX-bekräftelsemeddelande

Goda nyheter! WPForms aktiverar AJAX-formulärinlämningar automatiskt som standard för alla nya formulär, så du behöver inte konfigurera några tekniska inställningar.

Du kan gå till fliken 'Allmänna inställningar' och se till att alternativet 'Aktivera AJAX-formulärinlämning' är aktiverat.

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.

Om du väljer att omdirigera användare till en ny URL måste deras webbläsare fortfarande ladda en ny sida. För att få den verkliga, sömlösa magin med AJAX utan omladdning, rekommenderar vi starkt att du använder bekräftelsetypen 'Meddelande'.

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.

Därefter måste du välja det formulär du just skapade från nedrutemenyn inuti 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: Hantera och automatisera formulärinlämningar

När ditt AJAX-formulär är live och samlar in inlägg, ger WPForms dig kraftfulla alternativ för att hantera och automatisera dessa data.

Exportera inlägg till CSV eller Excel

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 Basic eller högre, är det enkelt att exportera formulärinlägg.

Gå helt enkelt till WPForms » Inlägg, välj ditt formulär, välj dina exportalternativ och ladda ner data som en CSV- eller Excel-fil.

Detta är användbart för kvartalsrapporter, leadanalys eller för att importera kontakter till externa verktyg.

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

Automatisera med integrationer

Ännu bättre: hoppa över manuella exporter genom att ansluta ditt AJAX-formulär direkt till dina affärsverktyg. WPForms-integrationer fungerar sömlöst med AJAX-formulär och inkluderar:

• E-postmarknadsföring — Constant Contact, AWeber, ConvertKit, Drip (kräver Plus-plan eller högre)
• CRM-plattformar — Salesforce, HubSpot, Zoho CRM (kräver Elite-plan eller högre)
• Automatiseringsverktyg — Zapier (ansluter till 5 000+ appar), Webhooks, Uncanny Automator
• Betalningsprocessorer — Stripe, PayPal, Square, Authorize.Net
• Google Workspace — Google Kalkylark, Google Drive, Google Kalender

Dessa integrationer fungerar sömlöst med AJAX-formulär.

När en användare skickar in formuläret bearbetar WPForms inlägget i bakgrunden OCH skickar data till dina anslutna plattformar omedelbart.

Till exempel kan du bygga ett AJAX-kontaktformulär som automatiskt lägger till leads i din Constant Contact-lista, skapar en HubSpot-kontaktpost och loggar inlägget i Google Sheets — allt utan att skriva en enda kodrad.

För att ställa in integrationer, redigera ditt formulär, klicka på fliken 'Marknadsföring' eller 'Betalningar' och följ instruktionerna på skärmen för att ansluta dina konton.

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.

Varför ska jag använda WPForms för AJAX-formulär istället för andra plugins?

WPForms kombinerar nybörjarvänlig design med företagsanpassade funktioner. Du kan skapa AJAX-formulär på under 10 minuter utan kodning, och om något går fel, ger WPForms supportteam samma dag-lösningar.

WPForms betalda planer inkluderar inbyggda integrationer med Constant Contact, Zapier, Salesforce och över 2 000 andra plattformar. Även den kostnadsfria WPForms Lite-versionen inkluderar grundläggande Stripe-betalningar (med transaktionsavgifter).

På så sätt kan dina AJAX-formulär automatiskt synkroniseras med din e-postmarknadsföring, CRM och betalningssystem utan manuell installation.

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 i formulärinställningarna. Efter att ha öppnat ditt formulär i byggaren, gå till Inställningar » Allmänt, leta sedan efter kryssrutan Aktivera AJAX-formulärinlämning. När den är aktiverad kommer formuläret att skickas in utan att sidan laddas om.

Som standard aktiverar WPForms den här inställningen automatiskt, så du behöver vanligtvis inte ändra något. Du kan dock fortfarande verifiera att den är aktiverad om det behövs.

Vilka är nackdelarna med AJAX?

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

Det kan ibland orsaka problem med sidbyggare eller äldre teman, vilket är anledningen till att det alltid är viktigt att testa dina formulär efter att du har publicerat dem.

Fördelarna överväger dock nackdelarna vida. Faktum är att WPForms använder AJAX som standard eftersom det tillåter moderna anti-spam-tokens att laddas i bakgrunden. Detta hjälper till att förhindra spamrobotar från att kringgå dina cache-plugins och hålla din inkorg säker.

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 man skapar kontaktformulär med flera mottagare
• Hur man skapar ett säkert 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 gärna på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.