11 - Customize form submission

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

  1. Create a field with Tabstart name (juste to find it easier)
  2. Select Item Form tab type
  3. Assign to type
  4. 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 :

  1. Tab-set : Start
  2. Tab Open
  3. Tab Close
  4. 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 :

  1. Global settings for all forms
  2. Type settings for specific type form
  3. Menu item settings for a specific form

you can works on 3 step :

  1. Display fields
  2. Display tabs
  3. Change form via css or js

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

  1. Go to global settings
  2. Item form tab
  3. At first go to general form behavior tab
  4. Set button wanted
  5. Position of button
  6. Form security

 

In next step we will remove some options

  1. Got to advanced editing tab
  2. Disable metadata detail

Now we will the tabs

  1. Go item form layout
  2. Here you can change title of tab
  3. Change icons
  4. 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 !