11 - Customize form submission

Voting

Average rating

Click to subscribe

Last modified

Wednesday, 20 January 2021

In flexicontent you can customize item form via many way and in many place, the most important place are :

Backend
Front-end

We will check both view

Creating tab in backend

For now its impossible to change the backend form completly (we can with an override but need good php skill) but you can add Custom tab or html element inside the tab details. Basicly item form in flexicontent is like

All custom fields are in Type name (details)

Ordering field

Now we can discover a new field type, group maker field. This can add Tab, fieldset or html tag in backend form for each item

with this we create tab and element to help user on form submission, exemple

this manipulation isn't too hard but its important to be more precise if order this field in bad position you can broke the form. Lets start

Create a field with Tabstart name (juste to find it easier)
Select Item Form tab type
Assign to type
Choose a marker type

its imortant to understand rules of this field, you need Open and close field for eah type. Exemple to create tab inside form, you need :

Tab-set : Start
Tab Open
Tab Close
Tab-set : End

for this tuto we create this structure

and use drag and drop ordering to insert field between tab

Remenber the result

thats cool for end user ! not ?

You can go away with admin field set and html to add columns (i recommand tu use bootstrap class) inside your form

Changing tab in front

Now we can speak about front-end form submission, with same notice you can override it via good php trick not easier but workable

here i will describ how to do with a little setup, remenber this, you can set this settings in 3 places :

Global settings for all forms
Type settings for specific type form
Menu item settings for a specific form

you can works on 3 step :

Display fields
Display tabs
Change form via css or js

For this tutorial we will remove all tabs for front end submission to be more simple for beguinner

Go to global settings
Item form tab
At first go to general form behavior tab
Set button wanted
Position of button
Form security

In next step we will remove some options

Got to advanced editing tab
Disable metadata detail

Now we will the tabs

Go item form layout
Here you can change title of tab
Change icons
Set field in tabs

in each tab you can put the name of field and if you want to kill all tabs in order to display complet form in-line use _skip_ in each tab like this

In styling tab you can add specific css or js to polish your form !

Tags
field configuration | form submission
Categories
Tutorial

Login