1. Home
  2. Docs
  3. Flexi Gallery
  4. Shortcode
  5. [flexi-form] attributes

[flexi-form] attributes


[flexi-form] will render to html <form> </form> tag. 
With the help of parameters the attributes are added inside form tag.

  • title = Title of the form used internally.
  • class = CSS class name of the form to customize look & feel according to theme
  • name = name of the form required if multiple form on same page.
  • detail_layout = Name of the layout. If you want to specifically set the detail layout. It will override the default layout used. (default: basic)
  •  ajax = true or false
    * true : Ajax will be enabled and page will be submitted without any page refresh.
    * false: It will change the page during form submission.
  • edit = true or false
    * true : Treat this form as modification form. Let user to edit own submitted false
    * false (default) : General new submission form
  • type = url or image (Determines how form should be handled)
    * url (default): When youtube,vimeo and other online video urls are used to post
    * image: When any type of file including images, pdf,mp3 etc. are used to submit
  • unique = Custom field names. eg. felxi_field_1
    This will restrict form to get submitted if “flexi_field_1” value already present in other posts.

[flexi-form-tag] attributes.
This shortcode should always be between [flexi-form] & [/flexi-form] tag.
Each [flexi-form-tag] will generate different type of input fields and parameters changes according to it.
The attributes depends on the type of parameter used.

type : This is mandatory attributes & according to it other attributes plays roles.
* post_title
* file
* category
* tag
* article
* text
* textarea
* select
* radio
* checkbox
* other
* captcha
* submit

required : This attribute specifies that the user must fill in a value before submitting a form.
placeholder : A hint to the user of what can be entered in the control.

Title field

This field is used as a post title and support required & placeholder attributes.
[flexi-form-tag type="post_title" title="Main Title" value="" placeholder="Main Title" required="true"]

File input field

This field is let’s user to select the file
Select single file
[flexi-form-tag type="file" title="Select file"]

OR
Drag & drop multiple files
[flexi-form-tag type="file_multiple" title="Drag & Drop multiple files" class="flexi_drag_file" multiple="true"]

Select category/album field

This will render to display category/album select input box as created at Flexi category
[flexi-form-tag type="category" title="Select category" ]

Tag field

This will render to display tag input field, where user can enter tags separated by comma
[flexi-form-tag type="tag" title="Insert tag"]

Article field

This will display the content/description/article area of the post. It also support editor=”true” attribute which will convert traditional textarea description field into GUI rich text input box which lets user to make different styles of text. Eg. bold, italic, colors
[flexi-form-tag type="article" title="Description" placeholder="Content" editor="true"]

Text field

Basic input text field.
flexi_field_1 to flexi_field_5 are Flexi internal reserved input field names.
[flexi-form-tag type="text" name="flexi_field_1" title="My subject" value="" placeholder=""]

Textarea field

Basic textarea fields with option of adjusting number of rows & cols
​[flexi-form-tag type="textarea" name="flexi_field_2" title="Description" placeholder="" rows="3" cols="20"]

Other field

You must specify type=”other” and mention new_type attributes with various parameters. Each parameters will display different type of input fields.
hidden, numbers, passwords, tel, time, week, url
Check examples as below
Display hidden input field
[flexi-form-tag type="other" new_type="hidden" name="flexi_field_3" value="blank"]

Display input fields which accepts only numbers
[flexi-form-tag type="other" new_type="number" name="flexi_field_4" value="0"]

Display password input field
[flexi-form-tag type="other" new_type="password" name="flexi_field_5"]

Captcha field

Display captcha security input fields before submitting the forms
[flexi-form-tag type="captcha" title="Security"]

Select field

This tag will render element used to create a drop-down list
Since, drop down list requires some values which can be passed using value attribute. 

As on a example: 
jan is the value and January is label.
feb is the value and February is label.

value and the label should be divided by : (ratio) sign. Each extra list requires ,(comma) between them.

[flexi-form-tag type="select" name="flexi_field_1" title="Select Month" value="jan:January,feb:February" placeholder="-Month-"]

Radio Select field

This tag will render element used to create a radio selection.
Since, radio list requires some values which can be passed using value attribute. 

As on a example: 
cherry is the value and Cherry is label.

value and the label should be divided by : (ratio) sign. Each extra list requires ,(comma) between them.

[flexi-form-tag type="radio" name="flexi_field_2" title="Choose fruits" value="cherry:Cherry,banana:Banana"]

Checkbox Input field

This tag will render element used to create a checkbox selection
Since, checkbox requires some values which can be passed using value attribute. User can select more then one value. No name attribute is required.  

As on a example: 
flexi_field_4 is the value and Blue is label.
flexi_field_5 is the value and Black is label.

[flexi-form-tag type="checkbox" title="Which colors you like ?" value="flexi_field_4:Blue,flexi_field_5:Black"]

Submit button

This is the compulsory input tag must be specified just before the closing of [/flexi-form] tag.
This will generate the submit button with specified label as value.
[flexi-form-tag type="submit" name="submit" value="Submit Now"]

Leave a Reply