Naar inhoud springen

FR Forms/en: verschil tussen versies

Uit KB Van Loenhout
FuzzyBot (overleg | bijdragen)
Bijgewerkt vanwege een nieuwe basisversie van de bronpagina
Label: Handmatige ongedaanmaking
Geen bewerkingssamenvatting
 
(Een tussenliggende versie door dezelfde gebruiker niet weergegeven)
Regel 74: Regel 74:
Each theme has its own settings, or none: '''No styling'''
Each theme has its own settings, or none: '''No styling'''


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


See (C) for examples by theme.
See (C) for examples by theme.
<br clear="all">
<br clear="all">


=== '''B - Visual Layout Editor''' ===
=== '''B - Visual Layout Editor''' ===
[[File:'Layout-editor.png|left|492x492px|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 arrange the fields in 1, 2, or 3 columns. See the example.


You can also spread the fields across multiple rows.  
You can also spread the fields across multiple rows.  


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


  You can set the rows using the position selection buttons.
You can set the rows using the position selection buttons.
<br clear="all">
<br clear="all">


Regel 111: Regel 111:
==== Theme: “Material UI (standard)”[[File:Layout-uistandard.png|alt=Layout material UI standard]] ====
==== Theme: “Material UI (standard)”[[File:Layout-uistandard.png|alt=Layout material UI standard]] ====


== Messages ==
== Messaging ==
“Messages” lets you set the formatting as it appears on the web page.
“Messaging” lets you set the formatting as it appears on the web page.
[[File:Messaging.png|left|417x417px]]
[[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 configuration:''' The module checks the email configuration. You can set this up in WB under the Settings menu, in the Mailer Settings section.

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