Index

Form theme customization

In the form editor, available in the process editor, you can select a template for the form that is being created. This style can be customized by any user who has permission to access the control panel.

Now browse through the tabs below to follow the step-by-step instructions to create a new custom theme in TOTVS Fluig Platform.

...

Recommendations 

When uploading themes, it is important to follow these rules:

...

Below are each of the classes and structure of a form generated from the editor.

In some cases, it is necessary to use the !important, as these are classes that are already used by TOTVS Fluig Platform and can be subscribed.

HTML

...

<form name="formulario">
	<h1 class="title-form-application">Formulario Exemplo</h1>
	<div class="form-field">
		<label class="label-field-properties">Campo Nome</label>
		<span class="is-required">
			<b>*</b>
		</span>
		<div class="form-input">
			<input type="text" name="nome" />
		</div>
	</div>
</form>

...

Example

Now, we'll create a theme with:

1. Input type fields with black background and white color.
2. Labels in bold and maroon color.
3. Form title with a margin, color and bottom edge.
4. Each block of field will have a bottom margin, with internal spacing and a red border.
5. Red color and font size for the mandatory asterisk.

• For this result, the following CSS must be created and registered on the themes:

  Bloco de código
  language css title exemplo.css linenumbers true
  input { padding:0 15px !important; background-color:#000; color:#fff; } label { font-weight:bold; color:#8B0000; } .title-form-application { margin:20px; padding: 0 0px 10px; font-size: 1.5em; color: #006699; border-bottom: 1px dashed #ccc; } .form-field { margin-bottom: 15px; border:1px solid red; padding:10px; } .is-required { color:red; font-size:2em; }