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

Genom åren har vi hjälpt tusentals användare att skapa och konfigurera formulär för webbplatsen. Många användare har dock frågat oss om det är möjligt att skapa ett formulär med Ajax-funktionalitet.

AJAX Contact Form allows users to submit the form without reloading a page. Detta aktiverar dig att öka användarnas engagement samtidigt som du erbjuder dina användare en bättre upplevelse av att skicka in formulär.

I den här artikeln visar vi dig hur du enkelt kan bygga ett WordPress AJAX-kontaktformulär med Step-by-Step-instruktioner.

Vad är Ajax och varför använda det för yours formulär?

AJAX, en förkortning för Asynchronous Javascript and XML, är en programmeringsteknik i JavaScript som allowar utvecklare att överföra data utan att ladda om en page.

Det används oftast i webbformulär som allowar användare att submit formulärdata utan att ladda om en page. Detta gör det enkelt och snabbt att skicka in formulär, vilket förbättrar den totala upplevelsen för användaren.

Webbapplikationer som Gmail och Facebook använder sig i stor utsträckning av den här tekniken för att hålla användarna engagerade samtidigt som allt fungerar sömlöst i bakgrunden.

Du kan använda Ajax för formulär på din WordPress site. Det kommer att save användare från onödig omladdning av sidan och hålla dem engagerade på den sida de för närvarande viewar.

Detta är praktiskt när du run en ecommerce store och vill samla in återkoppling från användare utan att avleda användarens uppmärksamhet.

You can also use the same AJAX functionality for other custom forms on your website. Till exempel, ett customiserat inloggningsformulär för användare kommer att allow användare att logga in utan en extra laddning av sidan.

Med detta sagt, låt oss ta en titt på hur du enkelt kan skapa ett WordPress AJAX-kontaktformulär i 4 enkla steg.

Step-by-Step: Installera WPForms plugin

Det första du behöver göra är att installera och aktivera WPForms plugin. För mer detaljer, se vår Step-by-Step guide om hur du installerar ett WordPress plugin.

WPForms är den bästa WordPress form builder plugin på marknaden. Det allow you att enkelt skapa Ajax-drivna formulär också.

För mer information, se vår kompletta WPForms review.

Vid aktivering måste du besöka WPForms ” Settings page för att enter din license key.

När du har enter license key kommer du att kunna ta emot automatiska updates och installera add-ons.

You are now all set up to make beautiful AJAX forms in WordPress.

Step-by-Step 2: Skapa ditt första formulär

Låt oss gå vidare och skapa your första formulär.

Besök bara WPForms ” Add New page i WordPress admin area. You will be asked to provide a title for your form and select a template as a starting point.

I denna tutorial kommer vi att skapa ett kontaktformulär. Du kan dock skapa alla andra typer av formulär du behöver.

WPForms kommer nu att hämta ditt formulär med grundläggande fält som redan har addats till det. You can simply point and click on any form field to edit it.

Du kan också lägga till ett nytt formulärfält i den vänstra colonnen genom att klicka på det.

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

Du kan enkelt drag and drop formulärfält för att flytta dem upp och ner i formuläret.

När du har slutfört editingen av formuläret kan du gå vidare till nästa steg.

Step 3: Slå på funktionen AJAX Formulärinlämning

WPForms aktiverar inte AJAX-formulärinlämning som standard. You will need to manually activate it for your form.

Gå bara till tabben ”Settings” i form buildern. I fliken Allmänna inställningar klickar du på toggle bredvid alternativet ”Aktivera AJAX-formulärinlämning”.

Låt oss nu ställa in vad som händer efter att formuläret har skickats in.

Först går du till tabben ”Bekräftelse” under Settings. Det är här du informerar dina användare om att du har tagit emot deras formulär.

WPForms allow you att göra det på olika sätt. Du kan till exempel redirecta användare till en URL, visa dem en specifik page eller helt enkelt visa ett message på vyn.

Eftersom vi har aktiverat AJAX-funktionalitet för formuläret kommer redirect av användare till en annan page att motverka syftet med att skapa ett AJAX-formulär.

Du måste välja alternativet message och editera bekräftelsemeddelandet. Använd gärna toolbaren för format i Editorn eller add to en länk eller två för att berätta för användarna vart de ska gå härnäst.

Efter det kan du ställa in hur du gillar att bli meddelad om en formulärinlämning.

Gå till tabben Aviseringar i formulärinställningarna och konfigurera inställningarna för email.

När du är klar kan du save your form och lämna form buildern.

Step 4: Add to ditt AJAX-aktiverade formulär i WordPress

WPForms gör det superenkelt att add formulär till dina posts, pages och sidebar widgets i WordPress.

Helt enkelt edit posten eller page där du vill add formuläret och insert WPForms block i din content area.

Efter det måste du välja det formulär du just skapade från blockets inställningar.

WPForms kommer omedelbart att hämta en live preview av formuläret i content editorn.

You can now save or publish your content and then visit your website to test the form’s AJAX functionality.

Här är en snabb titt på WordPress AJAX-formuläret exempel från vår demo site.

You can also add your form to a sidebar widget in WordPress.

För att göra det, gå till sidan Appearance ” Widgets och lägg till WPForms widget block till ett sidebar.

Select formuläret som du skapade tidigare och click på knappen ”Update” för att store widgetar settings. You can now visit your website to see your AJAX-powered form in action.

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 website. Du kanske också vill se vår guide om hur man skapar ett kontaktformulär popup i WordPress eller våra expertval för de bästa email marketing-tjänsterna för att få ditt företag att växa.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.