Naar inhoud springen

FR Forms/en: verschil tussen versies

Uit KB Van Loenhout
Nieuwe pagina aangemaakt met 'FR Forms'
 
Geen bewerkingssamenvatting
 
(5 tussenliggende versies door 3 gebruikers niet weergegeven)
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>
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
== Layout ==
== Opmaak ==
''Layout'' lets you set the formatting as it will appear on the web page.
Met ''Opmaak'' stel je opmaak vast zoals die op de webpagina wordt getoond.
[[File:Layout.png|left|421x421px|layout]]
[[File:Opmaak.png|left|421x421px|opmaak]]
'''Form Style:''' Choose the alignment of the input field labels: on the same line or with the label above the input field
'''Formulierstijl:''' kies uitlijning van de labels van de invoervelden: op één lijn of label boven het invoerveld
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
''' Field theme:''' Select a predefined style from the table; see (A)
'''  Veldthema:''' kies een voorgedefinieerde stijl uit de tabel, zie (A)
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
'''Grid spacing:''' Select the desired distance between the label and an input field
'''Grid tussenruimte:''' kies de gewenste afstand tussen het label en een invoerveld
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
'''Visual layout editor:''' Specify the grid in which the fields are displayed; see (B)
'''Visuele layout-editor:''' bepaal het raster waarin de velden worden getoond, zie (B)
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
'''Submit button text:''' Enter the text to be displayed on the submit button
'''Verzendknoptekst:''' geef de tekst op die op de verzendknop wordt getoond
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
''' Submit button alignment:''' Specify the alignment for the text on the submit button
'''  Uitlijning verzendknop:''' geef de uitlijning aan voor de tekst op de verzendknop
<br clear="all">
<br clear="all">
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
=== '''A - Field Theme''' ===
=== '''A - veldthema''' ===
[[File:Layout-theme.png|left|Layout theme]]
[[File:Veldthema.png|left|veldthema]]
Each theme has its own settings, or none: '''No styling'''
<nowiki> </nowiki>Elk thema heeft eigen instellingen, of geen: '''Geen styling''<nowiki/>'
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
Try them out, and choose the theme that best suits your website.
 Probeer ze uit, en kies het thema wat het meest bij jouw website past.
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
See (C) for examples by theme.
 Zie (C) voor voorbeelden per thema.
<br clear="all">
<br clear="all">
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
=== '''B - Visual Layout Editor''' ===
=== '''B - visuele layout editor''' ===
[[File:Layout-editor.png|left|492x492px|Visual Layout Editor]]
[[File:Visuele layout editor.png|left|492x492px|visuele layout editor]]
You can arrange the fields in 1, 2, or 3 columns. See the example.
  Je kunt de velden verdelen over 1, 2 of 3 kolommen. Zie het voorbeeld.
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
You can also spread the fields across multiple rows.  
  Ook kan je de velden verdelen over meerdere rijen.
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
Move the columns by dragging them or using the position selection buttons.
  Verplaats de kolommen door ze te slepen of via de positie keuzeknoppen.
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
You can set the rows using the position selection buttons.
  De rijen bepaal je middels de positie keuzeknoppen.
<br clear="all">
<br clear="all">
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
<span id="C_-_voorbeelden_veldthema&#039;s"></span>
=== '''C - voorbeelden veldthema's''' ===
=== '''C - examples of field themes''' ===
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
<span id="thema:_Geen_stylingalt=geen_stijling"></span>
===== thema: ''Geen styling''[[File:Geen stijling.png|alt=geen stijling]] =====
===== Theme: ''No Styling''[[File:Layout-nostyling.png|alt=Layout no styling]] =====
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
<span id="thema:_Nice_formalt=nice_form"></span>
==== thema: ''Nice form''[[File:Nice form.png|alt=nice form]] ====
==== Theme: ''Nice form''[[File:layout-niceform.png|alt= Layout nice form]] ====
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
<span id="thema:_Bootstrapalt=bootstrap"></span>
==== thema: ''Bootstrap''[[File:Bootstrap.png|alt=bootstrap]] ====
==== Theme: ''Bootstrap''[[File:Layout-bootstrap.png|alt=Layout bootstrap]] ====
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
<span id="thema:_Material_UI_(filled)alt=material_UI_filled"></span>
==== thema: ''Material UI (filled)''[[File:Material UI filled.png|alt=material UI filled]] ====
==== Theme: ''Material UI (filled)''[[File:Layout-uifilled.png|alt=Layout material UI filled]] ====
</div>


<div lang="nl" dir="ltr" class="mw-content-ltr">
<span id="thema:_Material_UI_(outlined)alt=material_UI_outlined"></span>
==== thema: ''Material UI (outlined)''[[File:Material UI outlined.png|alt=material UI outlined]] ====
==== 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>
==== thema: ''Material UI (standard)''[[File:Material UI standard.png|alt=material UI standard]] ====
==== Theme: “Material UI (standard)”[[File:Layout-uistandard.png|alt=Layout material UI standard]] ====
</div>
 
== Messaging ==
“Messaging” lets you set the formatting as it appears on the web page.
[[File:Messaging.png|left|417x417px]]
'''Email configuration:''' The module checks the email configuration. You can set this up in WB under the Settings menu, in the Mailer Settings section.
 
'''Email Templates:''' Create your own templates to use as automatic replies to a submitter and/or to the email handler. See (A); under (B) you'll find an example
 
'''Form submissions:''' If you save them, you can view them. Keep in mind that data collection is subject to the GDPR. See (C)
<br clear="all">
 
=== A - Email Templates ===
[[File:Messaging-reply.png|left|391x391px|Message reply]]
'''Name:''' Choose a short, clear name
 
'''To:''' sender > use the placeholder, e.g., [email address], recipient > type in the email address
 
'''From (email address):''' Enter an email address
 
'''Name:''' Enter the sender's name or title
 
'''Reply-to field:''' Enter an email address, or leave it blank
 
'''Subject:''' Type a subject line
 
'''Email text:''' Use the editor to create your own formatting; use [field name] to retrieve data from the data fields
<br clear="all">
 
=== '''B - Sample Email Template''' ===
[[File:Messaging-example.png|alt=Messaging example|503x503px]]
<br clear="all">
 
<span id="C_-_formulierinzendingen"></span>
=== '''C - Form Submissions''' ===
 
The storage of personal data is subject to the GDPR. It is recommended that you indicate this in the form field so that potential submitters are aware of it in advance. Tip: Not storing any data poses no risk to you.
 
Click on a received comment to view the details:
 
[[File:Messaging-responses.png|alt=Messaging responses|497x497px]]
 
== Success ==
Use ''Success'' to set up a success page or a success message
 
<gallery widths=400>
File:File:Success-page.png|alt=Success page|398x398px|'''Page:''' Select the desired page (that you created yourself)
File:Success-text.png|alt=Success message|398x398px|'''Message:''' select ''Page -- None --'' and enter some text
</gallery>

Huidige versie van 16 jul 2026 20:28

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.

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

Messaging

“Messaging” lets you set the formatting as it appears on the web page.

Email configuration: The module checks the email configuration. You can set this up in WB under the Settings menu, in the Mailer Settings section.

Email Templates: Create your own templates to use as automatic replies to a submitter and/or to the email handler. See (A); under (B) you'll find an example

Form submissions: If you save them, you can view them. Keep in mind that data collection is subject to the GDPR. See (C)


A - Email Templates

Message reply
Message reply

Name: Choose a short, clear name

To: sender > use the placeholder, e.g., [email address], recipient > type in the email address

From (email address): Enter an email address

Name: Enter the sender's name or title

Reply-to field: Enter an email address, or leave it blank

Subject: Type a subject line

Email text: Use the editor to create your own formatting; use [field name] to retrieve data from the data fields

B - Sample Email Template

Messaging example

C - Form Submissions

The storage of personal data is subject to the GDPR. It is recommended that you indicate this in the form field so that potential submitters are aware of it in advance. Tip: Not storing any data poses no risk to you.

Click on a received comment to view the details:

Messaging responses

Success

Use Success to set up a success page or a success message