Form

De opbouw van een cms formulier wordt vanuit het cms geconfigureerd. Dit component zou echter ook voor andere formulieren gebruikt kunnen worden, zolang de structuur van de JSON boom maar hetzelfde is als die van het CMS.

Opbouw formulier:

On submit: worden alle velden gevalideerd, bij akkoord word het formulier gepost en bij een succesvolle respons wordt de ingestelde bedanktekst getoond of verwezen naar een bedankpagina of de default bedank tekst getoond.

• Api endpoint: /forms/form
• Locatie: /components/default/form/FormComponent.vue

Settable properties:

• data (Object): alle geconfigureerde gegevens (gebasseerd op CMS) voor het renderen van de juiste formuliervelden en instellingen
• customSubmitUrl: url anders dan het standaard endpoint waar de gegevens van het formulier bij submit naar toe worden verzonden
• enablePlaceHolderHelpText (Boolean): Zorgt ervoor dat de helptekst als placeholder in de input komt te staan
• Nice to know: Ingevulde formuliervelden worden in de localstorage opgeslagen, zodat je ingevoerde gegevens niet verloren gaan als je de pagina refreshed. Na submit worden deze wel leeggehaald.

Formulier velden

Omschrijving:

Formuliervelden (tekst velden, checkboxes, radio’s etc.) zijn op zichzelf staande componenten welke doormiddel van het zetten van een aantal properties ander gedrag vertonen.

Deze zijn los te gebruiken, maar worden ook in het formulier component zoals hierboven beschreven gebruikt.

• Locatie: /components/default/form/controls

Settable properties:

• data (Object): bevat de volgende settings voor elke formulierveld component:
• data.id (String): Unieke indentifier
• data.name (String): Naam van het formulierveld
• data.hidden (Boolean): Of het veld verborgen moet zijn
• data.type (Number): Sommige velden kunnen meerdere types of configuraties bevatten. Hiermee stel je de configuratie in. Dit kan verschillen per formulier veld.
• fieldData: Hiermee zet je al een waarde in het formulierveld.
• Nice to know:
  in het bestand /mixins/default/form/form.js staan een functie validation welke validatie per type formulierveld wordt gehanteerd.
  Validatie gebeurt met de plugin vee-validate en vertalingen van de foutmeldingen staan op: /assets/translations/validations.js.
  Daarnaast is er een formulierveld component gemaakt om een custom datumtijdsveld (met kalender) te tonen. Deze maakt gebruik van een extern vue-flatpickr-component

Voorbeeld JSON

  {
   "id":87,
   "name":"Test formulier",
   "type":1,
   "submitMessage":"Bedankt voor het invullen",
   "submitButton":"Send form",
   "categories":[  
      {  
         "id":118,
         "name":"Categorie 1",
         "hidden":false,
         "disablable":false,
         "disabled":false,
         "fields":[  
            {  
               "id":684,
               "name":"Dagen",
               "mandatory":true,
               "hidden":false,
               "unique":false,
               "type":14,
               "dataType":1,
               "maxAnswers":2,
               "helpText":"Dit is de uitleg voor de dagen",
               "maxChoicesText":"Teveel antwoorden",
               "values":[  
                  {  
                     "id":1054,
                     "name":"Maandag",
                     "maxChoices":1,
                     "choices":0,
                     "isSelected":false
                  },
                  {  
                     "id":1055,
                     "name":"Dinsdag",
                     "maxChoices":2,
                     "choices":0,
                     "isSelected":false
                  }
               ]
            },
            {  
               "id":685,
               "name":"Tekstveld",
               "mandatory":false,
               "hidden":false,
               "unique":false,
               "type":1,
               "dataType":1,
               "helpText":"Dit is uitleg voor het tekstveld"
            }
         ]
      }
   ]
}