Naar inhoud springen

FR Forms/en: verschil tussen versies

Uit KB Van Loenhout
Nieuwere bewerking →

FuzzyBot (overleg | bijdragen)

465 bewerkingen
VisueelWikitekst
Nieuwe pagina aangemaakt met 'FR Forms'
 
FuzzyBot (overleg | bijdragen)
465 bewerkingen
Bijgewerkt vanwege een nieuwe basisversie van de bronpagina
Regel 1: Regel 1:
<languages />
<languages />


<div lang="nl" dir="ltr" class="mw-content-ltr">
FR Forms is a module that allows you to create various (contact) forms.
FR Forms is een module waarmee je diverse (contact-)formulieren kan aanmaken.
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
Each form has its own settings:
Ieder formulier bevat eigen instellingen:
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
* Fields: Create various types of data fields as needed
* velden: vrije aanmaak van diverse typen data-velden
* Layout: For the “front end” of your website
* opmaak: voor de ‘voorkant’ van jouw website
* Messages: Create automatically generated notifications and emails as needed
* berichten: vrije aanmaak van automatisch gegenereerde meldingen en e-mails
* Success: Choose between a custom page or a simple notification (text)
* succes: keuze uit een zelfgemaakte pagina of eenvoudige melding (tekst)
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
As an additional option, you can use CAPTCHA to protect against spam.
Als aanvullende optie kan jeCaptcha toepassen als bescherming tegen spam.
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
== Fields ==
== Velden ==
[[File:Fields.png|left|117x117px|Fields]]
[[File:Velden.png|left|117x117px|velden]]
Click the ''Add Field'' button to add new fields
Klik op keuzeknop ''Veld toevoegen'' om nieuwe velden toe te voegen
<br clear="all">
<br clear="all">
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
Depending on the field type, several properties are displayed:
Afhankelijk van het type veld worden er meerdere eigenschappen getoond:
[[File:Fields-add.png|left|397x397px|Add fields]]
[[File:Velden toevoegen.png|left|397x397px|velden toevoegen]]
'''Type:''' Select the desired type; see (A)  
'''Type:''' kies het gewenste type, zie (A)
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
'''Label:''' Enter a label for this field
'''Label:''' geef een label voor dit veld
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
'''Placeholder key:''' This is automatically filled in when a new field is created
'''Placeholder-sleutel:''' bij aanmaak van een nieuw veld wordt dit automatisch ingevuld
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
'''Status:''' Is the field mandatory, optional, or something else? See (B)
'''Status:''' is het veld verplicht, optioneel of anders? Zie (B)
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
'''Default value:''' optional
'''Standaardwaarde:''' optioneel te gebruiken
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
'''Placeholder text:''' optional, to help visitors enter information
'''Plaatshouder tekst:''' optioneel, als invoerhulp voor bezoekers
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
'''Help text:''' optional; displays a help message for visitors
'''Helptekst:''' optioneel, toont een helptekst voor bezoekers
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
'''Maximum length:''' optional; use this to limit input
'''Maximale lengte:''' optioneel, gebruik deze om invoer te beperken
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
'''Layout selection button:''' optional; set the page view; see (C)
'''Keuzeknop voor layout:''' optioneel, stel pagina weergave in, zie (C)
<br clear="all">
<br clear="all">
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
=== Example of a created field ===
=== Voorbeeld van een aangemaakt veld ===
[[File:Fields-example.png|left|345x345px|example]]
[[File:Aangemaakt veld.png|left|345x345px|aangemaakt veld]]
<br clear="all">
<br clear="all">
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
=== Order - as displayed on the web page ===
=== Volgorde - wordt getoond op webpagina ===
[[File:Fields-order.png|alt=field order]]
[[File:Volgorde velden.png|alt=volgorde velden]]
<br clear="all">
<br clear="all">
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
The web page displays the created fields in the order they appear in the page section. You can change this order using the '''up''' and '''down''' buttons.
Op de webpagina worden de aangemaakte velden getoond volgens de volgorde in de pagina sectie. Je kan deze volgorde aanpassen met knoppen '<nowiki/>''omhoog''<nowiki/>' en '''omlaag''<nowiki/>'.
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
<gallery widths=250>
<gallery widths=250>
File:Veldtypen.png|alt=veldtypen|149x149px|'''A - veldtypen'''
File:Fields-type.png|alt=veldtypen|149x149px|'''A - field types'''
File:Veldstatussen.png|alt=veldstatussen|168x168px|'''B - veldstatussen'''
File:Fields-status.png|alt=veldstatussen|168x168px|'''B - field status'''
File:Veld pagina weergave.png|alt=veld pagina weergave|353x160px|'''C - instellingen voor pagina weergave'''
File:Fields-layout.png|alt=veld pagina weergave|353x160px|'''C - field layout'''
</gallery>
</gallery>
== Layout ==
''Layout'' lets you set the formatting as it will appear on the web page.
[[File:Layout.png|left|421x421px|layout]]
'''Form Style:''' Choose the alignment of the input field labels: on the same line or with the label above the input field
'''  Field theme:''' Select a predefined style from the table; see (A)
'''Grid spacing:''' Select the desired distance between the label and an input field
'''Visual layout editor:''' Specify the grid in which the fields are displayed; see (B)
'''Submit button text:''' Enter the text to be displayed on the submit button
'''  Submit button alignment:''' Specify the alignment for the text on the submit button
<br clear="all">
<div class="mw-translate-fuzzy">
=== '''A - Field Theme''' ===
[[File:Layout-theme.png|left|Layout theme]]
<nowiki> </nowiki>Each theme has its own settings, or none: '''No styling'''
</div>
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
Try them out, and choose the theme that best suits your website.
== Opmaak ==
 
Met ''Opmaak'' stel je opmaak vast zoals die op de webpagina wordt getoond.
See (C) for examples by theme.
[[File:Opmaak.png|left|421x421px|opmaak]]
<br clear="all">
'''Formulierstijl:''' kies uitlijning van de labels van de invoervelden: op één lijn of label boven het invoerveld
 
</div>
=== '''B - Visual Layout Editor''' ===
[[File:'Layout-editor.png|left|492x492px|Visual Layout Editor]]
  You can arrange the fields in 1, 2, or 3 columns. See the example.
 
You can also spread the fields across multiple rows.
 
  Move the columns by dragging them or using the position selection buttons.
 
  You can set the rows using the position selection buttons.
<br clear="all">
 
<span id="C_-_voorbeelden_veldthema&#039;s"></span>
=== '''C - examples of field themes''' ===
 
<span id="thema:_Geen_stylingalt=geen_stijling"></span>
===== Theme: ''No Styling''[[File:Layout-nostyling.png|alt=Layout no styling]] =====
 
<span id="thema:_Nice_formalt=nice_form"></span>
==== Theme: ''Nice form''[[File:layout-niceform.png|alt= Layout nice form]] ====
 
<span id="thema:_Bootstrapalt=bootstrap"></span>
==== Theme: ''Bootstrap''[[File:Layout-bootstrap.png|alt=Layout bootstrap]] ====
 
<span id="thema:_Material_UI_(filled)alt=material_UI_filled"></span>
==== Theme: ''Material UI (filled)''[[File:Layout-uifilled.png|alt=Layout material UI filled]] ====


<div lang="nl" dir="ltr" class="mw-content-ltr">
<span id="thema:_Material_UI_(outlined)alt=material_UI_outlined"></span>
'''  Veldthema:''' kies een voorgedefinieerde stijl uit de tabel, zie (A)
==== Theme: “Material UI (outlined)”[[File:Layout-uioutlined.png|alt=Layout material UI outlined]] ====
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
<span id="thema:_Material_UI_(standard)alt=material_UI_standard"></span>
'''Grid tussenruimte:''' kies de gewenste afstand tussen het label en een invoerveld
==== Theme: “Material UI (standard)”[[File:Layout-uistandard.png|alt=Layout material UI standard]] ====
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
<div lang="nl" dir="ltr" class="mw-content-ltr">
'''Visuele layout-editor:''' bepaal het raster waarin de velden worden getoond, zie (B)
== Berichten ==
Met ''Berichten'' stel je opmaak vast zoals die op de webpagina wordt getoond.
[[Bestand:Berichten.png|links|417x417px]]
'''E-mailconfiguratie:''' de module controleert de e-mailconfiguratie. Deze stel je in WB in, menu Instellingen, onderdeel Mailerinstellingen.
</div>
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
<div lang="nl" dir="ltr" class="mw-content-ltr">
'''Verzendknoptekst:''' geef de tekst op die op de verzendknop wordt getoond
'''E-mailtemplates:''' stel je eigen templates samen, als automatisch antwoord naar een inzender en of naar de e-mailafhandelaar. Zie (A), ​​onder (B) vind je een voorbeeld
</div>
</div>  


<div lang="nl" dir="ltr" class="mw-content-ltr">
<div lang="nl" dir="ltr" class="mw-content-ltr">
'''  Uitlijning verzendknop:''' geef de uitlijning aan voor de tekst op de verzendknop
 '''Formulierinzendingen:''' indien je deze laat opslaan kan je ze bekijken. Denk er aan dat gegevens vastleggen onder de AVG valt. Zie (C)
<br clear="all">
<br clear="all">
</div>
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
<div lang="nl" dir="ltr" class="mw-content-ltr">
=== '''A - veldthema''' ===
=== A - e-mailtemplates ===
[[File:Veldthema.png|left|veldthema]]
[[Bestand:Berichten antwoord.png|links|391x391px|Berichten antwoord]]
<nowiki> </nowiki>Elk thema heeft eigen instellingen, of geen: '''Geen styling''<nowiki/>'
'''Naam:''' bedenk een korte, duidelijke naam
</div>
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
<div lang="nl" dir="ltr" class="mw-content-ltr">
 Probeer ze uit, en kies het thema wat het meest bij jouw website past.
'''Aan:''' inzender > gebruik de placeholder, bv [e-mailadres], afhandelaar > type het mailadres in
</div>
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
<div lang="nl" dir="ltr" class="mw-content-ltr">
 Zie (C) voor voorbeelden per thema.
'''Van (e-mailadres):''' type een e-mailadres in
<br clear="all">
</div>
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
<div lang="nl" dir="ltr" class="mw-content-ltr">
=== '''B - visuele layout editor''' ===
'''Van naam:''' type een e-mailadres in
[[File:Visuele layout editor.png|left|492x492px|visuele layout editor]]
  Je kunt de velden verdelen over 1, 2 of 3 kolommen. Zie het voorbeeld.
</div>
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
<div lang="nl" dir="ltr" class="mw-content-ltr">
  Ook kan je de velden verdelen over meerdere rijen.
'''Reply-to veld:''' type een e-mailadres in, of laat leeg
</div>  
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
<div lang="nl" dir="ltr" class="mw-content-ltr">
  Verplaats de kolommen door ze te slepen of via de positie keuzeknoppen.
'''Onderwerp:''' type een onderwerptekst in
</div>
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
<div lang="nl" dir="ltr" class="mw-content-ltr">
  De rijen bepaal je middels de positie keuzeknoppen.
'''E-mailtekst:''' gebruik de editor om je eigen opmaak te creëren, gebruik [veldnaam] om de gegevens op te halen uit de datavelden
<br clear="all">
=== '''B - voorbeeld e-mailtemplate''' ===
[[Bestand:Berichten voorbeeld.png|alt=Berichten voorbeeld|503x503px]]
<br clear="all">
<br clear="all">
</div>
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
<div lang="nl" dir="ltr" class="mw-content-ltr">
=== '''C - voorbeelden veldthema's''' ===
=== '''C - formulierinzendingen''' ===
</div>
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
<div lang="nl" dir="ltr" class="mw-content-ltr">
===== thema: ''Geen styling''[[File:Geen stijling.png|alt=geen stijling]] =====
Het opslaan van persoonlijke gegevens valt onder de AVG. Het is aanraden om op het formulierveld dit aan te geven zodat de potentiele inzender dit vooraf weet. Advies: niets opslaan levert geen risico's op voor jou.
</div>
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
<div lang="nl" dir="ltr" class="mw-content-ltr">
==== thema: ''Nice form''[[File:Nice form.png|alt=nice form]] ====
Klik op een ontvangen reactie om de details in te zien:
</div>
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
<div lang="nl" dir="ltr" class="mw-content-ltr">
==== thema: ''Bootstrap''[[File:Bootstrap.png|alt=bootstrap]] ====
[[Bestand:Berichten reacties.png|alt=Berichten reacties|497x497px]]
</div>
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
<div lang="nl" dir="ltr" class="mw-content-ltr">
==== thema: ''Material UI (filled)''[[File:Material UI filled.png|alt=material UI filled]] ====
== Succes ==
Met ''Succes'' stel je een succespagina of een succesbericht in
</div>
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
<div lang="nl" dir="ltr" class="mw-content-ltr">
==== thema: ''Material UI (outlined)''[[File:Material UI outlined.png|alt=material UI outlined]] ====
<gallery widths=400>
</div>
File:Bestand:Succes-pagina2.png|alt=Succes pagina|398x398px|'''Pagina:''' kies de gewenste pagina (die je zelf hebt aangemaakt)
 
File:Succes melding.png|alt=Succes melding|398x398px|'''Bericht:''' kies bij Pagina -- Geen -- en vul een tekst in
<div lang="nl" dir="ltr" class="mw-content-ltr">
</gallery>
==== thema: ''Material UI (standard)''[[File:Material UI standard.png|alt=material UI standard]] ====
</div>
</div>

Versie van 15 jul 2026 14:36

Andere talen:

FR Forms is a module that allows you to create various (contact) forms.

Each form has its own settings:

  • Fields: Create various types of data fields as needed
  • Layout: For the “front end” of your website
  • Messages: Create automatically generated notifications and emails as needed
  • Success: Choose between a custom page or a simple notification (text)

As an additional option, you can use CAPTCHA to protect against spam.

Fields

Fields
Fields

Click the Add Field button to add new fields

Depending on the field type, several properties are displayed:

Add fields
Add fields

Type: Select the desired type; see (A)

Label: Enter a label for this field

Placeholder key: This is automatically filled in when a new field is created

Status: Is the field mandatory, optional, or something else? See (B)

Default value: optional

Placeholder text: optional, to help visitors enter information

Help text: optional; displays a help message for visitors

Maximum length: optional; use this to limit input

Layout selection button: optional; set the page view; see (C)

Example of a created field

example
example


Order - as displayed on the web page

field order

The web page displays the created fields in the order they appear in the page section. You can change this order using the up and down buttons.

  • veldtypen
    A - field types
  • veldstatussen
    B - field status
  • veld pagina weergave
    C - field layout

Layout

Layout lets you set the formatting as it will appear on the web page.

layout
layout

Form Style: Choose the alignment of the input field labels: on the same line or with the label above the input field

Field theme: Select a predefined style from the table; see (A)

Grid spacing: Select the desired distance between the label and an input field

Visual layout editor: Specify the grid in which the fields are displayed; see (B)

Submit button text: Enter the text to be displayed on the submit button

Submit button alignment: Specify the alignment for the text on the submit button

A - Field Theme

Layout theme
Layout theme

Each theme has its own settings, or none: No styling 

Try them out, and choose the theme that best suits your website.

See (C) for examples by theme.


B - Visual Layout Editor

Visual Layout Editor
Visual Layout Editor
 You can arrange the fields in 1, 2, or 3 columns. See the example.

You can also spread the fields across multiple rows. 

 Move the columns by dragging them or using the position selection buttons.

 You can set the rows using the position selection buttons.


C - examples of field themes

Theme: No StylingLayout no styling

Theme: Nice formLayout nice form

Theme: BootstrapLayout bootstrap

Theme: Material UI (filled)Layout material UI filled

Theme: “Material UI (outlined)”Layout material UI outlined

Theme: “Material UI (standard)”Layout material UI standard

Berichten

Met Berichten stel je opmaak vast zoals die op de webpagina wordt getoond.

E-mailconfiguratie: de module controleert de e-mailconfiguratie. Deze stel je in WB in, menu Instellingen, onderdeel Mailerinstellingen.

E-mailtemplates: stel je eigen templates samen, als automatisch antwoord naar een inzender en of naar de e-mailafhandelaar. Zie (A), ​​onder (B) vind je een voorbeeld

 Formulierinzendingen: indien je deze laat opslaan kan je ze bekijken. Denk er aan dat gegevens vastleggen onder de AVG valt. Zie (C)

A - e-mailtemplates

Berichten antwoord
Berichten antwoord

Naam: bedenk een korte, duidelijke naam

Aan: inzender > gebruik de placeholder, bv [e-mailadres], afhandelaar > type het mailadres in

Van (e-mailadres): type een e-mailadres in

Van naam: type een e-mailadres in

Reply-to veld: type een e-mailadres in, of laat leeg

Onderwerp: type een onderwerptekst in

E-mailtekst: gebruik de editor om je eigen opmaak te creëren, gebruik [veldnaam] om de gegevens op te halen uit de datavelden

B - voorbeeld e-mailtemplate

Berichten voorbeeld

C - formulierinzendingen

Het opslaan van persoonlijke gegevens valt onder de AVG. Het is aanraden om op het formulierveld dit aan te geven zodat de potentiele inzender dit vooraf weet. Advies: niets opslaan levert geen risico's op voor jou.

Klik op een ontvangen reactie om de details in te zien:

Berichten reacties

Succes

Met Succes stel je een succespagina of een succesbericht in

  • Succes pagina
    Pagina: kies de gewenste pagina (die je zelf hebt aangemaakt)
  • Succes melding
    Bericht: kies bij Pagina -- Geen -- en vul een tekst in
Overgenomen van "https://wiki.vloenhout.nl/w/index.php?title=FR_Forms/en&oldid=576"