Hoe een formulier in te dienen zonder paginavernieuwing in WordPress

verzend een formulier zonder paginavernieuwing


Wilt u voorkomen dat uw pagina vernieuwt wanneer een bezoeker een formulier indient? Standaard wordt de hele pagina opnieuw geladen wanneer u op de knop Verzenden van formulier klikt. En dat is wanneer de gegevens die in het formulier zijn ingevoerd, worden overgedragen en opgeslagen op de server.

In dit artikel laten we u zien hoe u Ajax-inzending op uw WordPress-formulieren kunt inschakelen en kunt voorkomen dat de pagina opnieuw wordt geladen.

Waarom Ajax Form Submission inschakelen in WordPress

Het indienen van Ajax-formulieren is vooral handig als u een formulier wilt insluiten in een modale pop-up. Zonder AJAX-formulierinzending ingeschakeld, zou de hele pagina moeten worden vernieuwd, wat leidt tot het sluiten van het pop-upvenster. Op die manier zouden gebruikers het belangrijke bevestigingsbericht kunnen missen waardoor ze betrokken blijven.

Met AJAX-formulierverzending ingeschakeld, konden uw gebruikers het bevestigingsbericht zien bij het indienen van het formulier op dezelfde pagina zonder opnieuw te laden.

ajax formulierinzendingen

Om het indienen van ajax-formulieren op uw WordPress-site mogelijk te maken, raden we aan WPForms, de beste vormplug-in voor WordPress.

Stap 1: een nieuw formulier maken

Om te beginnen met het maken van uw formulier, moet u eerst installeren de WPForms-plug-in op uw WordPress-website.

Weet je niet zeker hoe? Geen probleem. U kunt naar onze gids gaan voor het installeren van een WordPress-plug-in om dat allemaal voor elkaar te krijgen.

Zodra de plug-in is geïnstalleerd en geactiveerd, gaat u naar uw WordPress-dashboard en navigeert u naar WPForms »Nieuw toevoegen. U wordt nu doorgestuurd naar een pagina waar u een sjabloon voor uw formulier kunt selecteren.

WPForms biedt 7 verschillende formuliersjablonen om uit te kiezen. Laten we de selecteren Eenvoudig contactformulier optie voor deze zelfstudie en voeg vervolgens een veld voor het uploaden van bestanden toe aan het formulier.

WPForms vormen setup

U ziet nu de formulierbouwer op uw scherm. Aan de linkerkant van je scherm heb je de Velden toevoegen en de Veldopties tabblad. U kunt deze tabbladen gebruiken om uw contactformulier te configureren.

verwijder een veld van wpforms

Met WPForms kunt u eenvoudig velden toevoegen aan uw formulier met slepen en neerzetten. U kunt de positie van de velden ook wijzigen door te slepen en neer te zetten. Als u een veld wilt verwijderen, is dat ook eenvoudig. Beweeg uw cursor over het ongewenste veld en klik op verwijderen pictogram dat in de rechterbovenhoek van het veld verschijnt.

Onder de Veldopties tabblad kunt u het label van het veld wijzigen, de indeling van het naamveld wijzigen, de lettergrootte wijzigen en labels en sublabels in- of uitschakelen. Je hebt ook een optie om de voorwaardelijke logica keuze.

Als u klaar bent met het maken van uw formulier met de formulierbouwer, klikt u op opslaan knop, zodat uw wijzigingen intact blijven.

Nu we een eenvoudig contactformulier hebben gemaakt, gaan we er de functie voor het uploaden van bestanden aan toevoegen.

Om een ​​functie voor het uploaden van bestanden toe te voegen, hoeft u alleen maar op het veld Bestand uploaden in het linkerdeelvenster te klikken. U kunt ook het formulierveld Bestand uploaden slepen en neerzetten op de gewenste positie in de formulierbouwer.

bestand upload formulier

Stap 3: Inzending van Ajax-formulier inschakelen

Zodra uw wijzigingen zijn opgeslagen, klikt u op de Instellingen tabblad aan de linkerkant van uw paginabuilder. Je ziet hier verschillende opties. Ga naar de Algemeen keuze. Hieronder ziet u een aantal velden. Hier kunt u de naam van uw formulier wijzigen, een formulierbeschrijving toevoegen, de knoptekst wijzigen, enz.

Als je verder in het scherm scrolt, zie je een paar selectievakjes. U kunt het selectievakje selecteren dat zegt Inzending van Ajax-formulier inschakelen. Voltooi het proces door op de te klikken Opslaan knop in de rechterbovenhoek van uw scherm.

ajax formulierverzending inschakelen

Ga nu naar de Kennisgeving tabblad onder de Algemeen tabblad. Deze optie stelt u op de hoogte telkens wanneer iemand uw formulier indient. Voer dus in het 1e veld het e-mailadres in van de beheerder of degene die verantwoordelijk is voor het ontvangen van de e-mails. U kunt ook het e-mailonderwerp, de naam van de afzender, het adres van de ontvanger en een eigen bericht invoeren.

Zorg ervoor dat u de wijzigingen opslaat als u klaar bent. U kunt ook een bevestigingsbericht instellen dat de bezoekers zullen ontvangen nadat ze op de verzendknop hebben gedrukt.

instellingen voor het uploaden van bestandsformulieren

Stap 4: uw formulier publiceren met inzending van Ajax

De laatste stap is het publiceren van uw Ajax-inzendingsformulier op uw website. Ga daarvoor naar de pagina waar u het formulier wilt laten verschijnen.

U kunt beginnen door naar te gaan Pagina’s »Nieuw toevoegen op uw WordPress-dashboard. Voeg nu een titel toe aan uw pagina. Klik in de teksteditor van uw pagina op Formulier toevoegen keuze. Er verschijnt een nieuw venster op uw scherm.

wpforms embed formulier

Klik op de vervolgkeuzepijl en selecteer het formulier dat zojuist is gemaakt. Klik nu op de Formulier toevoegen knop. U zult zien dat de insluitcode wordt weerspiegeld in de teksteditor van uw pagina. U kunt controleren hoe het formulier eruitziet door op te klikken Voorbeeld knop aan de rechterkant van uw scherm.

Vervolgens kunt u op de klikken Publiceren knop om het formulier eindelijk live te laten gaan.

Dat was makkelijk, nietwaar?

Mogelijk wilt u nu het aantal knopklikken bijhouden dat uw contactformulier ontvangt. Bekijk hiervoor onze gids op het bijhouden van links en klikken op knoppen.

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