Form view: customise the form with the visual editor
Updated on
This article covers the customisation of a form view, from its Configure form button. If you have not created that view yet, start with Form view.
The TimeTonic Visual Form Editor lets you configure the structure and presentation of your forms independently. The structure stays in your tables (fields, types, and relations), and the design is defined in the editor (layout, colors, typography, sections, steps, and actions).
This visual editor gives you full control over the readability and graphic consistency of your forms, without affecting the data model. You design clearer interfaces, aligned with your visual identity and accessible to your users, whether internal or external.
Goal : separate substance from form to simplify maintenance and speed up customization.
Prerequisite: the table first, the form second. In TimeTonic, the form does not create fields: it displays the fields of the table. If you come from a tool where the form creates its own database, the reflex is reversed here. Four steps, in this order.
1
Create the columns in the table Add to the table every piece of information the form must collect, with the right column type.
Switch the view to Form view Change the view type from Table to Form. At this step, you can still apply the per-view restrictions to each field: Read / Write, Read only or Invisible. See Restrict access to a column by view.
4
Click Configure form The visual editor opens: it only handles the layout and formatting of the form, never the structure of the data.
Before opening the visual editor, you need to create a Form-type view in your table.
1
Open your table
Go to the view containing the fields you want to use.
2
Create a new view
Click + Add → New view.
3
Select the Form type
Click the current display type and choose Form from the list of available displays.
4
Save the view
Click Save with view to confirm.
5
Open the visual editor
In the toolbar, click Configure form to start the configuration.
Choose the field grouping mode
Click Configure form in the view's toolbar. The Choose grouping mode window opens and offers three modes.
None
Displays all fields one after another without any distinction. Suited for simple forms and quick data entry.
By group
Organizes fields into collapsible accordion sections. Suited for long forms : HR, structured FAQs, onboarding.
Step by step
Creates a guided, sequential entry flow. Suited for applications, complex requests, or customer-facing forms.
Click Confirm to validate your choice and access the editor interface.
If you previously defined field groups in the field organization options of the table, they are automatically applied to the selected option. Otherwise, you can define them later in the editor.
Customize the page layout
The visual editor lets you adjust the layout, appearance, and completion message of your form.
1
Open the editor
Click Configure form to access the customization options.
2
Adjust the layout
In the PAGE tab, edit the layout and global properties.
3
Manage form content
Use the FORM tab to organize fields, steps, and groups.
4
Control spacing
Link or unlink the spacing values applied between form elements. Click the options icon to open advanced settings and fine-tune horizontal or vertical spacing.
5
Control margins
Link or unlink the margin values to adjust the form's edges. Click the options icon to open advanced settings and fine-tune the margin on each side.
6
Change the background color
Select a new color, then click OK to apply it.
7
Restore the default layout
Click RESET LAYOUT, then confirm the full reset.
Customize the completion message
The completion message is the message or page shown after the form is submitted. It is configured in a dedicated tab of the editor.
1
Open the COMPLETION MESSAGE tab
Configure a thank-you message or a custom confirmation page.
2
Adjust the layout
Center the content, edit the margins, and adjust the background color.
3
Reset if needed
Click RESET LAYOUT to return to the default layout.
4
Customize the confirmation icon
Select a new icon or logo to illustrate a successful submission.
5
Edit the completion message
Click the message text inside the form and edit it in the editor's side panel.
6
"Add new record" button
Visible only in the workspace, on the form view used for record creation.
Add content blocks
Content blocks let you add information or layout elements that are not stored in the table, but specific to this form. They also let you place fields independently of the groups defined in the table.
Drag and drop the content block onto your form's page. Then click the dropped block to configure it.
Title block
The Title block adds a text header inside the form to visually structure sections and guide the reading flow. It contributes to content hierarchy and improves the overall readability of the form.
Setting
Description
Title text
Content of the header shown in the form (e.g. Employee information).
Prefix icon
Adds an icon before the text to reinforce the meaning of the title.
Margin
Sets the space around the title (top, right, bottom, left).
Background color
Background color of the title block.
Text color
Color of the title text (e.g. #1c2c39).
Heading level
Hierarchical level (H1 to H6) to visually structure titles and subtitles.
Alignment
Text position (Left, Center, Right).
Border
Adds a frame (color, style, thickness).
Border radius
Sets the corner radius of the block.
Paragraph block
The Paragraph block lets you add descriptive or informative text inside a form. Use it to introduce a section, provide instructions, or add clarifications between fields.
Setting
Description
Text content
Free text input with formatting tools (bold, italic, font size, etc.).
Margin
Sets the space around the text (top, right, bottom, left).
Background color
Applies a background color to highlight the text.
Alignment
Text position within the block (Left, Center, Right).
Border
Adds a frame around the paragraph (color, style, thickness).
Spacer block
The Spacer block lets you add empty vertical space between two elements of a form. It helps to air out the layout, visually separate sections, or create a smoother reading rhythm.
Setting
Description
Height
Sets the size of the vertical space (in px, e.g. 100 px).
Background color
Applies a color to the spacer area (optional, useful for visibility or design).
Icon block
The Icon block lets you add a visual icon to the form to attract attention, illustrate an idea, or reinforce the understanding of a field or section. It is useful to make your forms more intuitive and visually appealing.
Setting
Description
Icon
Select an icon from the library (e.g. mdi-information, mdi-alert, mdi-check).
Description
Optional text shown next to the icon to provide additional information.
Margin
Space around the icon (top, right, bottom, left).
Text color
Sets the color of the icon and its associated text (e.g. #1c2c39).
Font size
Adjusts the icon size (in px, e.g. 22 px).
Alignment
Icon position (Left, Center, Right).
Image block
The Image block lets you add an illustration, a logo, or a photo directly inside the form. It is used to reinforce visual identity, illustrate an instruction, or make the form more engaging.
Setting
Description
Image upload
Click or drag and drop a file from your computer.
Height
Sets the display height of the image (in px).
Alignment
Positions the image inside the form (Left, Center, Right).
Margin
Space around the image (top, right, bottom, left).
Border
Adds a frame around the image (color, style, thickness).
Border radius
Sets the corner radius for a softer effect.
Use container blocks
Container blocks let you structure the form into sections, steps, or groups. Three containers are available : Section, Step by step, and Group.
Section container
The Section container lets you structure and organize content : you can group several fields, text blocks, or visual elements inside it. Drag and drop a container onto the form page, configure it, then insert the fields you need.
Setting
Description
Width
Sets the maximum width of the section (e.g. 1000 px).
Columns
Number of columns to arrange fields side by side (e.g. 1 or 2).
Spacing
Sets the spacing between columns or internal elements (in px).
Margin
Outer space around the section (top, right, bottom, left).
Background color
Customizes the section's background to create visual contrast.
Border
Adds a border (color, style, thickness).
Border radius
Sets the corner radius for a softer rendering.
Step by step container
The Step by step container lets you split a form into several sequential sections. Each section becomes a distinct step with guided navigation, making progressive entry and step-by-step validation easier.
The button at the top right of the container lets you add steps, and the red crosses let you delete them. Each step must be configured individually (adding fields, color, etc.) by clicking on it.
Setting
Description
Allow skipping steps
Enables or disables non-linear navigation (jumping between steps without following the order).
Width
Sets the maximum width of the container (e.g. 1000 px).
Margin
Outer space around the stepper (top, right, bottom, left).
Background color
General background color of the container.
Border
Customizes color, style (solid, dashed, etc.), and thickness.
Border radius
Adjusts the corner radius for a softer rendering.
Sub-panel « Steps »
Setting
Description
Background color
Color of the active step or stepper elements.
Separator color
Color of the line connecting the steps.
Sub-panel « Content »
Setting
Description
Columns
Number of columns inside each step (e.g. 2).
Spacing
Horizontal and vertical spacing between fields.
Margin
Inner margin applied to each step.
Background color
Background of the content area of each step.
Group container
The Group container lets you organize form fields into stackable collapsible blocks in accordion style. Each block acts as an independent section that users can open or close to navigate the information more easily.
Setting
Description
Collapsed by default
Enables or disables the collapsed display when the form opens.
Width
Sets the maximum width of the group (e.g. 1000 px).
Border
Configures color (#1c2c39), style (solid, dashed, etc.), and thickness (in px).
Border radius
Adjusts the corner radius for a softer effect.
Sub-panel « Header »
Setting
Description
Title
Text of the group title (e.g. General information).
Prefix icon
Adds an icon to the left of the title.
Margin
Space around the header (top, right, bottom, left).
Background color
Sets the background color of the group's banner (e.g. #ffdf23).
Text color
Title color (e.g. #1c2c39).
Font size
Size of the title text (in px).
Sub-panel « Content »
Setting
Description
Columns
Number of internal columns for arranging fields.
Spacing
Spacing between fields inside the group (in px).
Margin
Inner margin around the content.
Background color
Background of the group's content area (e.g. #ffffff).
Manage form fields
The Fields tab displays all fields available from the table linked to your form. You can freely add, organize, or remove them with simple drag and drop.
1
Drag and drop a field
Drag a field from the list to drop it into a container : Section, Group, or Step by step depending on the structure you want.
2
Remove a field from the form
Click the red cross (✖) on the right side of the field to remove it from the form. The field then becomes available again in the field list on the left and is placed back in its original group as defined in the table.
3
Reorder fields
Drag fields directly within the edit view to adjust their position inside the containers.
4
Edit container styles
Customize the background color to distinguish areas, the internal padding to air out content, and the border to visually delimit blocks.
Fields that cannot be inserted in a form
Not all fields of a table can be added to a form view. This behavior is intentional : it existed before the migration to the WYSIWYG visual editor and remains unchanged. It guarantees data integrity and system stability.
Field types not allowed
These field types can never be added to a form :
External form
Comments
Activity
Encrypted field
Locked system fields
Some tables contain locked fields automatically created by TimeTonic : technical identifiers, system data, fields generated by the platform. These fields are unalterable and cannot be inserted into a form.
Customize the form header
The header corresponds to the top area of the form. It lets you add a logo, a cover image, and decide whether this area stays fixed on screen during navigation. The goal is to ensure a consistent visual identity and a smooth user experience.
Setting
Description
Sticky option
When enabled, the header stays visible at the top of the form even when the user scrolls the content.
Upload a logo file
Adds a logo (.png or .jpg format). Prefer a lightweight logo (< 100 KB). It is automatically resized to a height of 150 px while keeping the original ratio. The sharper the source image, the better the rendering quality after resizing.
Upload a cover file
Adds a cover image or a graphic banner that spans the full width of the form. The recommended ratio is 4:1 (example : for a Full HD image of 1920 px wide, the ideal height is 480 px). If the image does not meet this ratio, a cropping tool will be offered during upload. The higher the image height, the better the visual rendering quality.
Customize the form footer
The footer corresponds to the bottom area of the form. It lets you add an action bar with the navigation and save buttons (e.g. Next, Previous, Save), while customizing its visual style. It is an essential element for guiding user progress and finalizing form submission.
Setting
Description
Sticky
Keeps the footer visible while scrolling through the form. Ideal for long forms, so that the action buttons remain accessible at all times.
Width
Sets the maximum width of the footer (e.g. 1000 px).
Inner padding
Adjusts the space between the content (buttons, text) and the edges of the footer.
Background color
Customizes the footer background color. Example : #373E64FF for a dark blue background.
Border
Adds a top or side frame (color, style, thickness).
Border radius
Adjusts the corner radius of the footer.
Sub-panel « Actions »
Setting
Description
Action area background color
Sets the background color of the button area.
Save button label
Lets you edit the label of the save button (e.g. Save, Submit, Send).
Preview the form
The Preview mode lets you view your form under real conditions before publishing. It helps you check the design rendering, the section structure, readability on different screens (desktop, tablet, or mobile), and the behavior of the completion message.
Enable or disable the preview
Enable the preview to switch from edit mode (where you configure the elements) to simulation mode, where you see the final result. This lets you test field arrangement, transitions between steps, and the consistency of colors and margins.
View icons : Desktop, Tablet, Mobile
Desktop view
Simulates the display on a wide screen (desktop). Ideal for checking the overall layout and alignments.
Tablet view
Shows an intermediate size to check readability and the behavior of responsive elements.
Mobile view
Lets you test vertical display, button size, and field arrangement on a small screen. Essential for external users accessing from a smartphone.
Tabs : Form and Completion message
Form
Shows the active version of the form, as it will appear to users when they fill it in.
Completion message
Displays the confirmation page or thank-you message that will appear after the form is submitted. You can check the message text, the color and style of the "Add another record" button, and the final layout.
Share the form
The sharing feature lets you make a form accessible to users outside your TimeTonic workspace, through a public URL or an embed code (iframe). It is ideal for collecting information from a website, an intranet, or external partners.
Sharing options
When you click Share form, you can configure the public distribution settings.
Redirect URL
Lets you set the address users will be redirected to after submitting the form (for example, a confirmation page or a website).
Use a column as the redirect source
Dynamically redirects users based on the value of a specific column in the table (useful for personalized forms).
Protect with an invisible captcha
Adds a layer of security against automated submissions.
Require authentication
Restricts access to users signed in with an authorized account (useful for internal forms).
URL and embed code
Once sharing is enabled, two ways to access the form are available.
Public URL
The direct link to the form, copyable with the Copy button.
Embed code
Lets you embed the form into a web page or external portal using an <iframe> tag. Useful for displaying the form directly inside your website, intranet, or CRM.
When you click Remove the view's share URL, a confirmation window appears.
Permanent action. Once the configuration is saved, the form is disabled and its URL is removed. If you reactivate it later, a new URL will be generated.
The public link and embed code immediately stop working.
If you reactivate sharing later, a new unique URL will be generated
The previous URL becomes invalid.
This action is permanent and cannot be undone.
Read more
Share the form view to another workspace
Duplicate an existing view (table, form, etc.) into another workspace as a mirror view.