CMS: Een aangepast formulier instellen met behulp van dropdown-invoerelementen
26 min
In dit artikel
- Stap 1 | Voeg het dropdown-element toe
- Stap 2 | Koppel aan het CMS
- Stap 4 | Stel de machtigingen voor de verzameling in
- Stap 5 | Maak een verzendknop
- Stap 5 | Pas het dropdown-element aan
- Veelgestelde vragen
Maak aangepaste formulieren waarin 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.
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
Studio Editor
- Ga naar je editor.
- Ga naar de pagina waaraan je invoerelementen wilt toevoegen.
- Klik links in de Editor op Elementen toevoegen
. - Klik op Invoer.
- Klik op Dropdown.
- Klik en sleep de dropdown die je wilt gebruiken naar de pagina.
Tip:
Voeg meer invoerelementen toe voor elk type informatie dat bezoekers moeten indienen. De invoerelementen die je toevoegt, bepalen aan welke types velden ze kunnen gekoppeld worden en het type gegevens dat ze kunnen opslaan.
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. Je kunt ook items uit een andere CMS-verzameling gebruiken. Koppel om items uit het CMS te gebruiken, de opties van de dropdown aan een andere dataset die koppelt aan een veld in een andere verzameling.
Wix Editor
Studio Editor
- Voeg in je editor een dataset toe die koppelt aan een verzameling waar je de inzendingen opslaat:
- Klik links op CMS
. - Klik op + Contentelementen.
- Klik op Formulier dataset.
- Klik op de Kies een verzameling-dropdown en selecteer een verzameling om de inzendingen op te slaan.
- Geef de dataset een naam (bijvoorbeeld: 'Inzendingen').
- Klik op Maken.
- Klik links op CMS
- Klik rechts op het dropdown-element en selecteer Inhoud verzamelen in het Koppelen-dropdownpaneel.
- Klik op de Kies een dataset-dropdown en selecteer de 'Inzendingen'-dataset.
- Koppel het dropdown-invoerelement aan een nieuw verzamelingsveld voor het opslaan van de inzendingen:
- Klik op de Waarde is gekoppeld aan-dropdown en selecteer Nieuw veld toevoegen.
- Voer de Veldnaam in voor het nieuwe verzamelingsveld.
- (Alleen coderen) Voer de Veldsleutel in die dit veld identificeert in de code van je website. Dit kan later niet worden gewijzigd.
- Klik op de Veldtype-dropdown en selecteer het veldtype 'Tekst', 'Nummer' of 'Verwijzing', afhankelijk van het type gegevens dat je wilt verzamelen.
Tip: Voor 'Verwijzing'-veldtypes selecteer je de verzameling waarnaar wordt verwezen in de dropdown. - Klik op Toevoegen.
- Klik op de Opties uit verzameling tonen-schakelaar om te kiezen waar je de keuzes van de dropdown 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 statische keuzes te maken voor het element, los van het CMS.
- (Als je andere invoerelementen hebt toegevoegd) Koppel de invoer aan je 'Inzendingen'-dataset:
- Klik op het betreffende invoerelement.
- Klik op het Aan CMS koppelen-pictogram
. - Herhaal stap 3-4 hierboven om de invoer aan je 'Inzendingen'-dataset te koppelen.
- Herhaal deze stap voor elk invoerelement dat je wilt toevoegen aan je aangepaste CMS-formulier.
Hoe zit het met de dataset-modi?
- Als je een 'Formulier-dataset' hebt toegevoegd, is dit al correct ingesteld op de 'Schrijven'-modus. In deze modus kan de dataset nieuwe items toevoegen aan je 'Inzendingen'-verzameling op basis van de inzendingen van het dropdown-invoerelement.
- Als je de lijstopties die bezoekers selecteren in het dropdown-element hebt gekoppeld, zorg er dan voor dat die afzonderlijke dataset in de 'Lezen'- of 'Lezen en schrijven'-modus staat.
- Als je je CMS-formulier nodig hebt om bestaande verzamelingsitems bij te werken, stel dan de 'Inzendingen'-dataset in op de 'Lezen en schrijven'-modus. Zorg ervoor dat de verzamelingsmachtigingen mensen met de relevante rollen ook toestaan om inhoud bij te werken.
Stap 4 | Stel de machtigingen voor de verzameling in
Stel de machtigingen in voor de verzameling waar je de inzendingen opslaat. Je kunt de vooraf ingestelde Inhoud verzamelen-instelling kiezen waarmee bezoekers inhoud kunnen toevoegen en vervolgens specificeren wie dit kan toevoegen. Of je kunt Geavanceerde machtigingen kiezen om te bepalen wie de verzamelingsitems kan bekijken, toevoegen, bijwerken en verwijderen.
Wix Editor
Studio Editor
- Klik links in de Editor op CMS
. - Klik op Je verzamelingen.
- Wijs je 'Inzendingen'-verzameling aan en klik op het Meer acties-pictogram
. - Klik op Machtigingen en privacy.
- Kies welke machtigingen je wilt gebruiken voor de verzameling:
- Kies het type machtigingen dat je voor je verzameling wilt gebruiken:
Inhoud verzamelen
Advanced
Stap 5 | Maak een verzendknop
Je moet een manier creëren voor bezoekers om de reacties op het invoerelement die ze hebben ingevoerd of geselecteerd in te dienen. Maak een Verzenden-knop door een gewone knop of afbeelding toe te voegen en deze te koppelen aan de 'Verzenden'-klikactie van de dataset. Wanneer bezoekers op de 'Verzenden'-knop klikken, worden de waarden van je dropdown-invoer en alle andere invoer die je koppelt aan je 'Inzendingen'-dataset, opgeslagen in je verzameling. Afhankelijk van de dataset-modus en je verzamelingsmachtigingen worden de waarden toegevoegd als nieuwe items of gebruikt om bestaande items bij te werken.
Je kunt ook aparte knoppen maken voor de volgende dataset-acties:
- Nieuw: Voeg de verzamelingsitems toe of werk deze bij (afhankelijk van de dataset-modus) en reset de invoer om nieuwe waarden te accepteren.
- Terugzetten: Reset de waarden in de invoerelementen die nog niet zijn ingediend.
- Verwijder: Verwijder geselecteerde items uit je verzameling (alleen in 'Lezen en schrijven'-modus).
- Volgende pagina/ Vorige pagina: Als je de items weergeeft die bezoekers bewerken in een galerij of repeater, kun je deze knoppen toevoegen om bezoekers door 'pagina's' met items te laten navigeren. Als je je formulier op een dynamische itempagina hebt gemaakt, gebruik dan de Volgende dynamische pagina / Vorige dynamische pagina-klikactie.
Wix Editor
Studio Editor
- Klik links in de Editor op Elementen toevoegen.
- Klik op Knop.
- 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.
- Klik op Tekst en pictogram wijzigen en voer de tekst in die je op de knop wilt weergeven (bijvoorbeeld: 'Indienen').
- Klik op het Aan CMS koppelen-pictogram.
- Klik op de Verbind een dataset-dropdown en selecteer de dataset die gekoppeld is aan je inzendingsverzameling.
- Klik op de Klikken is gekoppeld aan-dropdown en selecteer Verzenden.
- (Optioneel) Voeg succes- en foutberichten toe die verschijnen wanneer inzendingen succesvol of niet succesvol zijn ingediend:
- Klik op + Succesbericht toevoegen en vervolgens op + Foutmelding toevoegen.
- 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.
- Klik op elk bericht op Tekst bewerken om de berichten te bewerken.
- 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.
- Klik op de knop en selecteer het Ontwerp-pictogram
om het uiterlijk van je verzendknop aan te passen.
Stap 5 | 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
Studio Editor
- Klik in je Editor op het dropdown-element.
- 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.
- Klik op het Indeling-pictogram
om de tekstuitlijning en de opvulling en afstand van het element aan te passen. - Klik op het Ontwerp-pictogram
om een vooraf ingesteld ontwerp te kiezen en selecteer vervolgens Ontwerp aanpassen om het uiterlijk van het dropdown-element verder aan te passen. - (Optioneel) Klik op het Animatie-pictogram
om 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.
Hoe los ik problemen op met formulierinzendingen die niet zijn opgeslagen in de CMS-verzameling?
Kan ik de inzendingen die in mijn verzameling worden opgeslagen exporteren?
Kan ik automatiseren wat er gebeurt als ik formulierinzendingen ontvang?
Kunnen websitebezoekers invoerelementen gebruiken om de inhoud die op mijn website verschijnt te filteren?
Kan ik formulierinzendingen weergeven in een tabel, galerij of repeater?
Hoe kan ik leden toestaan hun eigen inzendingen bij te werken?
Waar komt de lijst met opties vandaan als ik mijn dropdown-element aan een 'Verwijzing'-veld koppel?
Hoe koppel ik meerdere formulieren aan één CMS-verzameling?