CMS: Een aangepast formulier instellen met behulp van dropdown-invoerelementen

Leestijd 25 minuten
Maak aangepaste formulieren waarmee bezoekers dropdowns kunnen gebruiken om hun selecties rechtstreeks in je CMS-verzamelingen in te dienen. Dit artikel leidt je door het proces van het toevoegen van een dropdown-invoerelement en een verzendknop. Je koppelt beide elementen aan een dataset waarmee inzendingen van bezoekers kunnen worden opgeslagen in je CMS-verzameling. 

Na het voltooien van deze stappen, kun je je formulier uitbreiden door meer invoerelementen toe te voegen en ze aan dezelfde dataset te koppelen. 
Een screenshot van een dropdown-invoerelement dat wordt gebruikt op een live website.
Voordat je begint:
Zorg ervoor dat je het CMS toevoegt aan je website als je dat nog niet hebt gedaan. 

Stap 1 | Voeg het dropdown-element toe

Ga naar de pagina in je Editor waar je een aangepast formulier wilt maken en voeg vervolgens het dropdown-element toe.

Wix Editor
Editor X
Studio Editor
  1. Ga naar je Editor.
  2. Ga naar de pagina waaraan je invoerelementen wilt toevoegen.
  3. Klik links in de Editor op Elementen toevoegen.
  4. Klik op Invoer.
  5. Klik op Dropdown.
  6. Klik en sleep de dropdown die je wilt gebruiken naar de pagina. 
Een screenshot van het toevoegen van het dropdownelement in de Editor.

Stap 2 | Koppel aan het CMS

Koppel je dropdown aan een dataset die koppelt aan een CMS-verzameling waar je de inzendingen opslaat. 

De opties die in de dropdownlijst verschijnen kun je handmatig toevoegen of je kunt items uit een andere CMS-verzameling gebruiken. Om items uit het CMS te gebruiken, koppel je de dropdownlijst 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 het dropdown-element dat 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. 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. 

Stap 3 | Stel de datasetmodi in

Aangezien datasets de koppeling tussen je verzamelingen en pagina-elementen bepalen, moet je ervoor zorgen dat elke dataset zich in de juiste modus bevindt. Stel de modus in op Schrijven voor de dataset die is gekoppeld aan je inzendingsverzameling. Hierdoor kunnen de dropdownselecties 'schrijven' of toevoegen aan je verzameling na indiening. 

Als je de dropdownlijstitems via een nieuwe dataset aan een andere verzameling hebt gekoppeld, zou de dataset automatisch correct moeten worden ingesteld op Lezen en schrijven. Als je echter verbinding hebt gemaakt met een bestaande dataset, zorg er dan voor dat je deze instelt op Lezen en schrijven of Lezen. Hierdoor kan het dropdown-invoerelement de items uit de verzameling 'lezen' of bekijken, zodat het ze in de lijstopties kan gebruiken. 
Wix Editor
Editor X
Studio Editor
  1. Klik in het rechterpaneel op Dataset-instellingen onder de eerste Kies een dataset-dropdown. Deze dataset koppelt 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 4 | Stel de machtigingen voor de verzameling in

Stel de machtigingen in voor de verzameling waar je de inzendingen opslaat. 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. 
Wix Editor
Editor X
Studio Editor
  1. Klik links in de Editor op CMS.
  2. Klik op Je verzamelingen.
  3. Wijs de verzameling aan die is ingesteld om de inzendingen te verzamelen en klik op het Meer acties-pictogram.
  4. Klik op Machtigingen en privacy
Een screenshot van het selecteren van de machtigingen en privacy-instellingen voor een CMS-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
Een screenshot van het instellen van verzamelingsmachtigingen en privacy.
  1. Klik op Opslaan

Stap 5 | Maak een verzendknop

Je moet een manier creëren waarop bezoekers hun keuzes kunnen indienen nadat ze deze hebben geselecteerd in het dropdown-element. Voeg een knop of afbeelding toe en koppel deze aan dezelfde dataset die gekoppeld is aan je inzendingsverzameling. Stel vervolgens de klikactie voor de knop of afbeelding in op Verzenden. Hierdoor kan de dropdown een nieuw item in de inzendingsverzameling 'schrijven' of creëren door op de verzendknop te klikken. 

Als je andere invoerelementen aan dezelfde dataset koppelt, stuurt de verzendknop hun invoer ook naar de verzameling. 
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. 
  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 onder Kies een link op Kiezen 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 het dropdown-element aan

Stel de titel, tijdelijke aanduiding en andere opties in via de dropdown. Pas het uiterlijk van het element aan vanuit het Ontwerp-paneel en pas de uitlijning, afstand en opvulling aan vanuit het Indeling-paneel. 
Wix Editor
Editor X
Studio Editor
  1. Klik in je Editor op het dropdown-element. 
  2. Klik op Instellingen en bewerk het volgende:
    • Veldtitel: Voer een titel in die bovenaan het dropdown-element zal verschijnen.
    • Toon voorbeeldtekst: Kies de tekst die bezoekers zien voordat ze op het dropdown-element klikken:
      • Geen: Bezoekers zien een leeg vak voordat ze op het dropdown-element klikken.
      • Voorbeeldtekst: Gebruik je eigen tekst op het dropdownelement (bijvoorbeeld 'Kies je kleur'). Voer de tekst in het Voorbeeldtekst-veld in. 
      • Item uit dropdown: Toon een item uit de dropdown menu. Als je de lijst aan het CMS hebt gekoppeld, is het item dat verschijnt de eerste dropdown die bezoekers kunnen selecteren. Als je de lijstitems niet aan het CMS hebt gekoppeld, klik je op Kies een item uit je lijst om te kiezen welk item wordt weergegeven. 
      • Automatisch aanvullen: Klik op de schakelaar om te bepalen wat er gebeurt als bezoekers typen om te zoeken in de dropdown:
        • Ingeschakeld: Alleen keuzes die overeenkomen met de getypte tekst verschijnen in de dropdown. 
        • Uitgeschakeld: Alle keuzes verschijnen in de dropdown. 
    • Type dropdownlijst: Kies een optie:
      • Aangepast: Pas het dropdown-element aan in het Ontwerp-paneel. Op mobiel is het lijsttype altijd ingesteld op Browser.
      • Browser: Gebruik het standaardthema van de browser in het dropdown-element.
    • Veldtype: Schakel het Verplicht-selectievakje in om te vereisen dat bezoekers een item uit deze dropdownlijst selecteren voordat hun inzending kan worden ingediend.
  1. Klik op het Indeling-pictogramom de tekstuitlijning en de opvulling en afstand van het element 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 dropdown-element verder aan te passen. 
  3. (Optioneel) Klik op het Animatie-pictogramom een animatie toe te voegen aan het dropdown-element. 
Klaar om live te gaan?
Klik rechtsboven in de Editor op Voorbeeld om je nieuwe aangepaste dropdownformulier 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 gestelde vragen over het koppelen van dropdown-elementen aan het CMS. 

Vond je dit artikel nuttig?

|