Priority support
Help Center > Themes > Hello biz theme > Form lite

Form lite

Laatste update: september 3, 2025

Deze post is vertaald met behulp van automatische vertaling, waardoor er kleine onnauwkeurigheden of verschillen in formulering ten opzichte van het origineel kunnen zijn. Sorry voor eventuele foutjes of onduidelijkheden, neem gerust contact met ons op als wij iets voor je mogen verhelderen.

Widget toevoegen

Om een widget te openen en te gebruiken:

  1. Klik op + in de Elementor Editor.
    Alle beschikbare widgets worden weergegeven.

  2. Klik op de widget of sleep deze naar het canvas. Voor meer informatie, zie Elementen aan een pagina toevoegen.

Wat is de form lite widget?

Het verzamelen van informatie van bezoekers kan een van de belangrijkste dingen zijn die je website voor je kan doen.

De Form Lite widget stelt je in staat om snel en efficiënt een formulier te bouwen waarmee bezoekers informatie kunnen indienen die naar je wordt gemaild en opgeslagen in je WP Admin gebied.

Bekijk alle opties die beschikbaar zijn met de Form Lite widget.

Veelvoorkomend gebruiksscenario

Alex wil e-mailreserveringen accepteren voor hun sportcafé. Ze plaatsen een CTA op hun homepage die linkt naar een reserveringsformulier. Wanneer gebruikers het formulier invullen met een reserveringsverzoek, wordt dit naar het e-mailadres van het café gestuurd zodat Alex een tafel kan reserveren.

Aanvullende gebruiksscenario's

  • Laat bezoekers een formulier invullen om zich te abonneren op je nieuwsbrief.
  • Verzamel sollicitaties met behulp van een formulier op je site.
  • Bezoekers van je site kunnen een formulier indienen zodat een van je vertegenwoordigers contact met hen kan opnemen.

Een form lite widget toevoegen: stap-voor-stap

In het onderstaande voorbeeld maken we een reserveringsformulier. Klanten die een tafel willen reserveren vullen het formulier in en wanneer ze het indienen ontvangt de caféeigenaar, Alex, een e-mail. De informatie is ook beschikbaar in het WP Admin gebied.

Een formulier toevoegen

Om een Form Lite widget toe te voegen:

  1. Voeg een Form Lite widget toe aan het canvas.
  2. Selecteer een van de Preset formulierontwerpen.
  3. Open het Tekst veld.
  4. Voer in het paneel, in het tekstvak Kop in: Reserveer nu!

  5. Voer in het tekstvak Beschrijving in: Garandeer je plek door ons een reserveringsverzoek te sturen.
    De Form Lite widget heeft standaard velden voor Naam, E-mail en Bericht. We willen echter ook mensen bellen om hun reservering te bevestigen, dus voegen we een Telefoonveld toe.
  6. Open in het paneel de sectie Formuliervelden.
  7. Klik op Item toevoegen.
  8. Gebruik het Type dropdown menu en selecteer Tel.
  9. Voer in het Label tekstveld Telefoon in.
  10. Zet verplicht op Ja.
  11. Sleep het nieuwe veld zodat het onder het E-mail veld staat.
    Nu zorgen we ervoor dat de formulierinzendingen naar de juiste plaats gaan.
  12. Sluit de sectie Formuliervelden.
  13. Open het veld Acties na indienen.
  14. Voer in het Aan veld je e-mailadres in.
  15. Voer in de Onderwerp regel Reserveringsverzoek in.

    Wanneer gebruikers hun formulier indienen door op de Verzenden knop te klikken, wordt er een e-mail gestuurd naar het adres dat je hebt ingevoerd. De inzending wordt ook opgeslagen in je WP Admin. Voor details, zie Formulierinzendingen beheren.

Instellingen voor de form lite widget

Je kunt je widgets aanpassen met behulp van inhoud, stijl en andere geavanceerde parameters, wat je veel flexibiliteit biedt om ze aan te passen aan je behoeften. Klik op de tabbladen hieronder om alle instellingen te zien die beschikbaar zijn voor de Form widget.

Inhoud tab

Voeg formuliervelden, stappen, knoppen en bedieningselementen toe, verwijder en bewerk ze. Bepaal wat er gebeurt nadat bezoekers hun reacties hebben ingediend.

Selecteer een van de formuliersjablonen om te beginnen met je ontwerp.

  • Kop: Voer een kop voor je formulier in het tekstvak in. De kop moet zo kort mogelijk zijn, onder de vijf woorden.
  • Kop HTML tag: De HTML tag vertelt zoekmachines en toegankelijkheidssoftware het belang van het element. We raden aan de standaardinstelling te behouden, maar je kunt het dropdown menu gebruiken om de HTML tag te wijzigen.
  • Beschrijving: Voer alle details in die je wilt geven over je formulier.

Geef je formulier een naam.

Bewerk en maak velden voor je formulier. Elk veld vertegenwoordigt gegevens die je verzamelt van je bezoekers zoals Naam en E-mail.

Er zijn twee pictogrammen die rechts van de veldnaam verschijnen:

– Dupliceer dit menu-item. Kopiëren helpt consistentie in je menu te behouden.

– Verwijder dit menu-item.

Wanneer je op een veldnaam klikt, verschijnen er aanvullende opties onder twee tabbladen – Inhoud en Geavanceerd.

In het Inhoud tabblad zijn de volgende opties beschikbaar:

  • Type: Stel het type veld in om irrelevante gegevens eruit te filteren. Het instellen van het type op e-mail betekent bijvoorbeeld dat bezoekers geldige e-mailadressen moeten indienen. Zie Veldtypen voor meer details.
  • Label: Maak een naam voor het veld, zoals Naam, om gebruikers te vertellen welke informatie ze moeten invoeren.
  • Placeholder: Ook bekend als spooktekst, dit is tekst die in het veld verschijnt om meer gedetailleerde informatie over het veld te geven, bijvoorbeeld in een veld genaamd Favoriete films zou de spooktekst kunnen zijn: “Vermeld je drie topkeuzes.”
  • Verplicht: Gebruik de schakelaar om te bepalen of gebruikers dit veld moeten invullen om het formulier in te dienen.
  • Kolombreedte: Stel in hoeveel ruimte het veld zal innemen. Dit kan worden gebruikt voor velden waar je korte antwoorden verwacht of als je wilt dat meerdere velden op één regel verschijnen. Als je bijvoorbeeld twee velden op één regel wilt laten verschijnen, geef ze elk een breedte van 50%.

Maak een leeg veld voor je formulier.

Gebruik de schakelaar om de naam van het veld te Tonen of te Verbergen.

Gebruik de schakelaar om te Tonen of te Verbergen of het veld verplicht is of niet. Standaardpraktijk is om deze velden te markeren zodat bezoekers weten dat ze ze moeten invullen.

Kolombreedte: Stel de grootte in van het gebied dat is toegewezen voor de knop. Dit beïnvloedt de plaatsing van de knop.

Als je kolomgrootte bijvoorbeeld 100% is en je de knop rechts uitlijnt, staat de knop rechts. Als je echter een kolombreedte van 50% instelt en de knop rechts uitlijnt, verschijnt deze in het midden van het formulier.

De Indienen knop stuurt de informatie in het formulier naar de website-eigenaar. Deze wordt toegevoegd aan de laatste pagina van het formulier.

Als je de knop niet Indienen wilt noemen, gebruik dan het tekstvak om een ander label in te voeren.

Je kunt een kleine afbeelding aan de knop toevoegen:

  • Voor geen pictogram, klik op .
  • Om je eigen .svg afbeelding te uploaden om als pictogram te gebruiken, klik op
  • Om een pictogram uit de bibliotheek te selecteren, klik op het pictogramsymbool.

Wijs een ID toe aan je knop zodat je deze later kunt identificeren. Dit helpt vaak bij het verwerken van de informatie die je verzamelt.

Zet op Ja als je bezoekers een andere pagina wilt tonen nadat ze een formulier hebben ingediend. De pagina zou een eenvoudig bedankje kunnen bevatten of extra informatie zoals: “We nemen binnen 48 uur contact met je op.”

Als je op Ja zet, moet je de URL van de pagina toevoegen.

Wanneer een bezoeker een formulier indient, kun je de inzendingen als e-mail ontvangen. Gebruik deze sectie om deze e-mails te definiëren.

  • Aan: Het e-mailadres waar de inzendingen worden ontvangen.
  • Onderwerp: De onderwerpregel van de e-mail die wordt gestuurd naar het e-mailadres in de Aan instelling.
  • Bericht: Alle tekst en formulierinformatie die in de e-mail wordt verzonden. De standaardinstelling is [all-fields], dit omvat alle formulierinformatie in de e-mail.
  • Van e-mail: Voeg het e-mailadres toe van waaruit de e-mail wordt verzonden.
  • Van naam: Bepaal onder welke naam de e-mail wordt verzonden. Dit kan je helpen deze e-mails later te filteren.
  • Antwoord aan: Bewerk dit e-mailadres als je op deze e-mails wilt antwoorden en deze antwoorden naar een ander adres wilt laten sturen.
  • Cc: Stuur een kopie van deze e-mails naar een ander adres.
  • Bcc: Stuur een blinde kopie van deze e-mails naar een ander adres.
  • Metadata: Standaard bevatten de e-mails die door het formulier worden verzonden metadata zoals Tijd, Datum, Pagina URL, User Agent (browserinformatie), Remote IP (IP-adres van de persoon die het formulier indient), Credit (de software die het formulier heeft gemaakt).
  • Verzenden als: Gebruik het dropdown menu om te bepalen of de e-mail die door het formulier wordt verzonden in HTML of platte tekst formaat is.

Alleen voor Elementor Pro gebruikers.

Zet Aan om de formulierinzendingen functie te activeren. Deze functie stelt je in staat om formulierinzendingen te bekijken vanuit WP Admin>Elementor>Inzendingen.

Aangepaste code kan soms vereisen dat je je formulier een ID geeft.

Zorg ervoor dat je Formulier ID uniek is.

Over het algemeen hebben browsers al ingebouwde berichten voor formulierinzendingen die succes of formulierfouten aangeven.

Aangepaste berichten op Ja zetten stelt je in staat om je eigen berichten te maken die worden weergegeven voor het geval de browser van de bezoeker deze berichten niet levert of de berichten om een of andere reden niet worden weergegeven.

Stijl tab

Bepaal het uiterlijk van menu-items en besturingselementen.

Bepaal of de kop en beschrijving rechts, links of in het midden van het formulier verschijnen.

Beheer het uiterlijk van de Kop.

Beheer het uiterlijk van de Kop.

Beheer de lay-out van je formulier.

  • Kolomafstand: Als je formulier meer dan één kolom heeft, gebruik dan de schuifregelaar om de ruimte tussen de kolommen in te stellen. Dit gebeurt wanneer er meer dan één veld in een rij staat.
  • Rijafstand: Gebruik de schuifregelaar om de ruimte tussen velden te vergroten en verkleinen.

Beheer het uiterlijk van de labels van het formulier.

Deze sectie bepaalt het uiterlijk van de formuliervelden. Dit omvat de placeholder tekst, veldrand en meer.

Gebruik het dropdown menu om een van de volgende te selecteren:

  • Knop: Verschijnt als een standaard knop.
  • Link: Verschijnt als tekst.

Stel de lettergrootte en het type in voor alle knoppen in het formulier.

Je kunt de knop laten veranderen wanneer gebruikers hun muis bewegen:

  • Normaal: Hoe de knop standaard verschijnt.
  • Hover: Hoe de knop verschijnt wanneer bezoekers er met hun muis overheen gaan. Hover modus laat je een overgangsduur instellen. Dit is de tijd die het duurt voordat de knop van uiterlijk verandert.

Hieronder staan de kenmerken die kunnen veranderen:

Voeg een rand toe aan je knop. Als je een rand toevoegt, kun je ook instellen:

Kies een van de volgende:

  • Rond: Knoppen verschijnen met gladde hoeken.
  • Afgerond: Knoppen verschijnen met gelijkmatig gebogen randen.
  • Scherp: Rechthoekige knoppen.

Bepaal de afstand tussen de knoprand en de tekst. Voor meer details, zie Padding en marges.

Het gedeelte Berichten regelt de stijl van alle berichten die aan bezoekers worden getoond nadat ze een formulier hebben ingediend:

  • Typografie: Bepaal de grootte en het type van het lettertype dat in het bericht wordt gebruikt.
  • Kleur Succesbericht: Stel de kleur van het bericht in als het formulier van de bezoeker naar de website-eigenaar is verzonden. Voor meer details, zie Kies een kleur of Gebruik globale lettertypen en kleuren.
  • Kleur Foutbericht: Stel de kleur van het bericht in als het formulier van de bezoeker niet naar de website-eigenaar is verzonden. Voor meer details, zie Kies een kleur of Gebruik globale lettertypen en kleuren.
  • Kleur Inline Bericht: Dit is alleen relevant als je ervoor hebt gekozen om aangepaste berichten weer te geven. Sommige aangepaste berichten verschijnen binnen het formulier zelf, deze worden inline berichten genoemd en deze instelling bepaalt hun kleur.

Voeg een achtergrond toe aan je formulier. Voor details, zie Maak een achtergrond.

Gebruik de schuifregelaar om de breedte van het formulier te bepalen.

Creëer ruimte tussen de inhoud van het formulier en de randen van het formulier. Voor details, zie Padding en marges.

Geavanceerd tab

Beheer de plaatsing van je widget, voeg links toe, voeg aangepaste code toe en meer.

Lees meer over de Geavanceerde tab instellingen.

Op deze pagina

Deel dit artikel

Hosted with