Hur man skickar in ett formulär utan siduppdatering i WordPress

skicka in ett formulär utan siduppdatering


Vill du förhindra att din sida uppdateras när en besökare skickar in ett formulär? Som standard laddas hela sidan om när du klickar på formulärsknappen. Och det är när data som anges i formuläret överförs och lagras på servern.

I den här artikeln visar vi dig hur du aktiverar Ajax-inlämning på dina WordPress-formulär och förhindrar att sidan laddas om.

Varför aktivera Ajax-formulärinsändning i WordPress

Ajax-formulärinlämning är särskilt användbart om du vill bädda in ett formulär i en modal popup. Utan att AJAX-formulärinlämning är aktiverad, skulle hela sidan behöva uppdateras, vilket leder till att popup-fönstret stängs. På så sätt kan användare missa det viktiga bekräftelsemeddelandet som håller dem engagerade.

När AJAX-formulärinsändning är aktiverad kan dina användare se bekräftelsemeddelandet vid formulärsöverföring på samma sida utan omladdning.

ajaxformulär

För att aktivera inlämning av ajax-formulär på din WordPress-webbplats rekommenderar vi WPForms, den bästa formen plugin för WordPress.

Steg 1: Skapa en ny form

För att börja skapa ditt formulär måste du först installera WPForms-plugin på din WordPress-webbplats.

Är du inte säker på hur? Inga problem. Du kan hoppa över till vår guide om hur du installerar ett WordPress-plugin för att få ut det hela.

När plugin-programmet har installerats och aktiverats, gå till din WordPress-instrumentpanel och navigera till WPForms »Lägg till nytt. Du kommer nu att omdirigeras till en sida där du kan välja en mall för ditt formulär.

WPForms erbjuder 7 olika formmallar att välja mellan. Låt oss välja Enkelt kontaktformulär alternativet för denna handledning och lägg sedan till ett fält för filöverföring till formuläret.

WPForms-forminställning

Nu ser du formulärbyggaren på din skärm. På vänster sida av skärmen har du Lägg till fält och den Fältalternativ flik. Du kan använda dessa flikar för att konfigurera ditt kontaktformulär.

ta bort ett fält från wpforms

WPForms gör det enkelt för dig att lägga till fält till din form med dra och släpp. Du kan också ändra positionen för fälten genom att dra och släppa. Om du vill ta bort ett fält är det också lätt. Håll bara muspekaren över det oönskade fältet och klicka på radera ikon som kommer att visas längst upp till höger i fältet.

Under Fältalternativ fliken kan du ändra fältets etikett, ändra formatet för namnfältet, ändra teckenstorlek och aktivera eller inaktivera etiketter och underetiketter. Du har också ett alternativ för att aktivera villkorad logik alternativ.

När du är klar med att skapa ditt formulär med formulärbyggaren klickar du på spara -knappen så att dina ändringar förblir intakt.

Nu när vi har skapat ett enkelt kontaktformulär, låt oss lägga till filöverföringsfunktionen till det.

För att lägga till en filöverföringsfunktion behöver du bara klicka på fältet Filöverföring i den vänstra panelen. Alternativt kan du dra formulärfältet File Upload och släppa det till önskad position i formulärbyggaren.

filuppladdningsformulär

Steg 3: Aktivera inlämning av Ajax-formulär

När dina ändringar har sparats klickar du på inställningar på vänster sida av din sidbyggare. Du kommer att se flera alternativ här. Gå till Allmän alternativ. Under detta ser du ett antal fält. Här kan du ändra namnet på ditt formulär, lägga till en formulärbeskrivning, ändra knapptexten osv.

Om du bläddrar längre ner på skärmen ser du några kryssrutor. Du kan markera kryssrutan som säger Aktivera inlämning av Ajax-formulär. Slutför processen genom att klicka på Spara -knappen längst upp till höger på skärmen.

aktivera inlämning av ajax-formulär

Gå nu till Underrättelse under fliken Allmän flik. Det här alternativet meddelar dig varje gång någon skickar in ditt formulär. Så i det första fältet anger du e-postadressen till administratören eller den som ansvarar för att ta emot e-postmeddelanden. Du kan också ange e-postämne, avsändarens namn, mottagarens adress och ett eget meddelande.

När du är klar, se till att du sparar ändringarna. Du kan också ställa in ett bekräftelsemeddelande som besökarna kommer att få när de har tryckt på skicka-knappen.

inställningar för bekräftelse av filöverföring

Steg 4: Publicera ditt formulär med Ajax Submission

Det sista steget är att publicera ditt Ajax-inlämningsformulär på din webbplats. Gå till den sida där du vill att formuläret ska visas.

Du kan börja med att gå till Sidor »Lägg till nytt på din WordPress-instrumentpanel. Lägg nu till en titel på din sida. Klicka på textredigeraren på din sida Lägg till formulär alternativ. Ett nytt fönster dyker upp på skärmen.

wpforms bädda in form

Klicka på rullgardinspilen och välj det formulär som just skapades. Klicka nu på Lägg till formulär knapp. Du kommer att se inbäddningskoden återspeglas i textredigeraren på din sida. Du kan kontrollera hur formuläret ser ut genom att klicka på Förhandsvisning knappen till höger på skärmen.

Du kan sedan klicka på Publicera -knappen för att äntligen låta formuläret gå live.

Det var lätt, var det inte?

Du kanske nu vill spåra antalet knappklick som ditt kontaktformulär tar emot. För att göra detta, kolla in vår guide på spårningslänkar och knappklick.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map