CMS: Een aangepast formulier maken met invoerelementen voor je verzameling

Leestijd 21 minuten
Maak een aangepast formulier waarmee bezoekers invoerelementen kunnen gebruiken om hun informatie rechtstreeks in je CMS-verzamelingen in te dienen. Invoerelementen zijn onder andere tekstvakken, dropdowns, datum- en tijdkiezers, en meer. Dit artikel begeleidt je bij het maken van een verzameling om de inzendingen op te slaan, het toevoegen van invoerelementen en een verzendknop, en het gebruik van datasets om alles te koppelen. 
Een screenshot van het gebruik van invoerelementen om een aangepast formulier te maken.
Heb je een eenvoudiger, kant-en-klaar aangepast formulier nodig?
Bekijk Wix Forms om templateformulieren te bekijken die minder instellingen vereisen, zoals contactformulieren, bestelformulieren, registratieformulieren en meer. 
Voordat je begint:
Zorg ervoor dat je het CMS toevoegt aan je website als je dat nog niet hebt gedaan. 

Stap 1 | Maak een verzameling en stel de machtigingen in

Maak een verzameling waarin je de aangepaste formulierinzendingen opslaat en stel de machtigingen voor de verzameling in. Je kunt kiezen uit vooraf ingestelde machtigingsinstellingen, zoals Formulierinzendingen, waarmee bezoekers inhoud kunnen toevoegen. Indien nodig kun je de machtigingen aanpassen om te bepalen wie de verzamelingsitems kan toevoegen, bewerken, bekijken en verwijderen. 

Je kunt op dit punt velden aan de verzameling toevoegen, maar we raden aan ze later toe te voegen (stap 3) wanneer je de invoerelementen koppelt. Op die manier kun je er zeker van zijn dat je alleen de soorten velden toevoegt die kunnen worden gekoppeld aan elk type invoerelement. 

Om een verzameling te maken voor het opslaan van formulierinzendingen:

  1. Ga naar je CMS op het dashboard van je website.
  2. Klik op Verzameling maken.
  3. Voer een naam in voor je verzameling. 
  4. Laat Meerdere items (standaard) geselecteerd en klik op Maken
  5. Klik op Meer acties en selecteer Machtigingen en privacy.
Een screenshot van het selecteren van Machtigingen en privacy in een verzameling.
  1. Klik op de Wat voor soort inhoud ga je in deze verzameling opslaan?-dropdown en selecteer Formulierinzendingen. Indien nodig kun je een andere optie kiezen en op de dropdowns klikken om aan te passen wie inhoud kan bekijken, toevoegen, verwijderen en bijwerken. Lees meer over het instellen van verzamelingsmachtigingen
  2. Klik op Opslaan.
Een screenshot van het instellen van verzamelingsmachtigingen en privacy.

Stap 2 | Voeg invoerelementen toe aan je website

Ga naar de pagina of het onderdeel in je Editor waar je het aangepaste formulier wilt maken. Voeg vervolgens alle invoerelementen toe die bezoekers zullen gebruiken om hun reacties in te dienen. Houd er rekening mee dat elk invoerelement beperkingen heeft wat betreft de soorten gegevens die het kan verzamelen en de veldtypes waaraan het kan koppelen. 
Wix Editor
Editor X
Studio Editor
  1. Ga naar je Editor.
  2. Ga naar de pagina of het onderdeel waar je een aangepast formulier wilt maken. 
  3. Klik links in de Editor op Elementen toevoegen.
  4. Klik op Invoer.
  5. Klik op het type invoerelement dat je wilt toevoegen.
  6. Klik en sleep het relevante invoerelement naar de pagina. 
Een screenshot van het toevoegen van het dropdownelement in de Editor.
  1. Herhaal stap 3-6 hierboven om zoveel invoerelementen toe te voegen als je formulier nodig heeft. 
Een screenshot van veel invoerelementen die aan een pagina zijn toegevoegd.

Stap 3 | Koppel de invoerelementen aan je verzameling

Koppel elk van je invoerelementen aan een dataset die aansluit bij je verzameling. Koppel de invoerwaarden vervolgens aan nieuwe verzamelingsvelden die overeenkomen met het type gegevens dat je wilt verzamelen. 

Voor de opties die verschijnen in de dropdown- en selectietaglijsten, kun je items uit een andere verzameling gebruiken. Om dit te doen, koppel je hun lijstitems aan een andere dataset die gekoppeld is aan een veld in een andere verzameling. 
Wix Editor
Editor X
Studio Editor
  1. Klik in je Editor op een van de invoerelementen die je zojuist hebt toegevoegd. 
  2. Klik op het Aan CMS koppelen-pictogram
  3. Koppel een dataset die is gekoppeld aan de verzameling waar je de inzendingen opslaat: 
    • Als je geen dataset op de pagina hebt: 
      1. Klik rechts op + Dataset toevoegen. Kies vervolgens de verzameling die je wilt koppelen, voer de naam van de dataset in en klik op Maken.  
      2. Klik op Inhoud verzamelen.
    • Als je al een dataset op de pagina hebt:
      1. Klik op Inhoud verzamelen
      2. Klik op de Kies een dataset-dropdown en selecteer de relevante dataset. Je kunt ook op Dataset toevoegen klikken om een nieuwe te maken, vervolgens de verzameling kiezen die je wilt koppelen, de naam van de dataset invoeren en op Maken klikken.
  4. Klik op de Waarde is gekoppeld aan-dropdown en selecteer Nieuw veld toevoegen
    1. Voer een Veldnaam in voor het nieuwe verzamelingsveld. 
    2. Selecteer het Veldtype in de dropdown. Het veldtype bepaalt wat voor soort gegevens je in het veld kunt opslaan
    3. Klik op Toevoegen
  1. (Indien nodig) Klik op de Lijstitems koppelen-schakelaar om te kiezen waar je de keuzes van het element wilt beheren:
    • Ingeschakeld: Gebruik een veld uit een andere CMS-verzameling voor de keuzes. Koppel de relevante dataset en kies de velden die je wilt gebruiken uit het Labels en waarden gekoppeld aan-dropdownmenu.
    • Uitgeschakeld: Klik op Keuzes beheren om de keuzes voor het element los van de CMS te maken. 
  1. Herhaal deze stappen voor elk van de invoerelementen van je aangepaste formulier. 

Stap 4 | Stel de datasetmodi in

Datasets bepalen de koppeling tussen je pagina-elementen en verzamelingen, dus zorg ervoor dat elke dataset zich in de juiste modus bevindt. Stel de modus in op Schrijven in de dataset die gekoppeld is aan je inzendingenverzameling, zodat de invoer items aan de verzameling kan toevoegen.

Als je de dropdown- of selectietaglijsten hebt gekoppeld aan een andere dataset en verzameling, zou de dataset automatisch correct moeten worden ingesteld op Lezen en schrijven. Als je ze echter aan een bestaande dataset hebt gekoppeld, zorg er dan voor dat je de modus instelt op Lezen en schrijven of Lezen. Hierdoor kunnen de keuzelijsten items uit de andere verzameling tonen.
Wix Editor
Editor X
Studio Editor
  1. Klik in het rechterpaneel op Dataset-instellingen onder de eerste Kies een dataset-dropdown. Deze dataset is gekoppeld aan de verzameling waarin je de inzendingen opslaat. 
  1. Klik op de Dataset-modus-dropdown en selecteer Schrijven.
  1. (Als je lijstitems hebt gekoppeld aan het CMS) Stel de modus in voor de dataset die is gekoppeld aan de lijstitems:
    1. Klik bovenaan het paneel op Terug naar dropdown-element
    2. Klik op Dataset-instellingen onder de dataset die is geselecteerd in het Lijstkoppelingen-gedeelte. 
    3. Klik op de Datasetmodus-dropdown en selecteer Lezen of Lezen en schrijven.
    4. (Optioneel) Klik op + Filter toevoegen als je een filter wilt maken om bepaalde items van de keuzelijst uit te sluiten. 
    5. (Optioneel) Klik op + Nieuwe sortering toevoegen als je de volgorde wilt kiezen waarin de items worden weergegeven in de keuzelijst. 

Stap 5 | Maak een verzendknop

Nadat bezoekers interactie hebben gehad met je aangepaste formulierinvoerelementen, hebben ze een manier nodig om hun reacties in te dienen. Voeg een knop of afbeelding toe en koppel deze aan dezelfde dataset die gekoppeld is aan je inzendingenverzameling. Stel vervolgens de klikactie voor de knop of afbeelding in op Verzenden. Wanneer bezoekers op de verzendknop klikken, wordt een nieuw item in de verzameling aangemaakt met waarden van elk invoerelement in de relevante velden.
Wix Editor
Editor X
Studio Editor
  1. Klik links in de Editor op Elementen toevoegen.
  2. Klik op Knop.
  3. Klik en sleep de knop die je als verzendknop wilt gebruiken naar de pagina. Je kunt elk van de volgende soorten knoppen gebruiken: Themaknoppen, Tekst- en pictogramknoppen, Pictogramknoppen, of Afbeeldingsknoppen.
    Tip: Je kunt ook een afbeelding toevoegen en deze gebruiken als verzendknop. 
Een screenshot van het toevoegen van een knop om te gebruiken als verzendknop.
  1. Klik op Tekst en pictogram wijzigen en voer de tekst in die je op de knop wilt weergeven (bijvoorbeeld: 'Indienen'). 
  2. Klik op het Aan CMS koppelen-pictogram.
  3. Klik op de Verbind een dataset-dropdown en selecteer de dataset die gekoppeld is aan je inzendingsverzameling. 
  4. Klik op de Klikken is gekoppeld aan-dropdown en selecteer Verzenden
  5. (Optioneel) Voeg succes- en foutberichten toe die verschijnen wanneer inzendingen succesvol of niet succesvol zijn ingediend:
    1. Klik op + Succesbericht toevoegen en vervolgens op + Foutmelding toevoegen.
    2. Klik en sleep beide berichten naar de plaats waar je ze wilt laten verschijnen. Ze kunnen elkaar overlappen omdat de berichten niet tegelijkertijd worden weergegeven.
    3. Klik op elk bericht op Tekst bewerken om de berichten te bewerken.
  6. Selecteer de knop en klik op het Aan CMS koppelen-pictogram. Klik vervolgens op de Bij succes, navigeren naar-dropdown en selecteer een optie:
    • Blijf op deze pagina: De bezoeker blijft op dezelfde pagina na het indienen van het formulier.
    • Een link: De bezoeker wordt doorgestuurd naar een andere pagina na het indienen van het formulier. Klik op Kiezen onder Kies een link en stel de link in.
  1. Klik op de knop en selecteer het Ontwerp-pictogram om het uiterlijk van je verzendknop aan te passen

Stap 6 | Pas de invoerelementen aan

Je kunt elk van je invoerelementen aanpassen om een samenhangend formulier te maken dat past bij het uiterlijk van je website. 
Wix Editor
Editor X
Studio Editor
  1. Klik in je Editor op een van de invoerelementen die je wilt aanpassen. 
  2. Klik op Instellingen om de veldtitel in te voeren, het veld naar wens in te stellen of verschillende instellingen aan te passen, afhankelijk van het invoertype. 
  1. Klik op het Indeling-pictogramom de tekstuitlijning en andere indelingsopties aan te passen.
  2. Klik op het Ontwerp-pictogramom een vooraf ingesteld ontwerp te kiezen en selecteer vervolgens Ontwerp aanpassen om het uiterlijk van het element verder aan te passen. 
  3. (Optioneel) Klik op het Animatie-pictogramom een animatie toe te voegen aan het element. 
  4. Herhaal deze stappen voor elk invoerelement dat je wilt aanpassen.
Klaar om live te gaan?
Klik rechtsboven in de Editor op Voorbeeld om je nieuwe aangepaste formulier te testen. Wanneer alles er goed uitziet en perfect werkt, klik je op Publiceren om de wijzigingen live te laten gaan. 

Als je Sandbox hebt ingeschakeld, synchroniseer je de Sandbox-verzameling met de live verzameling om de databasewijzigingen live te laten gaan. 

Veelgestelde vragen

Klik op een vraag hieronder voor antwoorden op de meest voorkomende vragen over het maken van aangepaste formulieren met behulp van invoerelementen.

Vond je dit artikel nuttig?

|