Cirilla Documentations

  1. Home
  2. Docs
  3. Cirilla Documentations
  4. Features
  5. Dynamic form

Dynamic form

Effortlessly create versatile forms using Contact Form 7 or HTML input, adapting to your unique needs. Enjoy a native form experience and employ robust HTTP requests for seamless data submission. From dynamic fields to conditional logic, this feature provides unparalleled flexibility.

Html Attributes Order

required | type | … other attributes | placeholder | value

Examples

Contact Form 7Html FormDescription
[text* your-name]<input required type=”text” name=”your-name” />Input text required value with name “your-name”
[text your-name]<input type=”text” name=”your-name” />Input text optional value with name “your-name”
[text* your-name-6 class:form-control]<input required type=”text” name=”your-name-6″ class=”form-control” />Input text with classname
[text* your-name-7 id:form-control]<input required type=”text” name=”your-name-7″ id=”form-control” />Input text with Id
[text* your-name-9 minlength:10]<input required type=”text” name=”your-name-9″ minlength=”10″ />Input text with minlength
[text* your-name-10 maxlength:10]<input required type=”text” name=”your-name-10″ maxlength=”10″ />Input text with maxlenght
[text* your-name-12 size:10]<input required type=”text” name=”your-name-12″ size=”10″ />Input text with size
[text* your-name-13 placeholder “Your name”]<input required type=”text” name=”your-name-13″ placeholder=”Your name” />Input text with placeholder
[text* your-name-14 “Your name”]<input required type=”text” name=”your-name-14″ value=”Your name” />Input text with default value
[text* your-name-16 default:username placeholder “Your name”]<input required type=”text” name=”your-name-16″ placeholder=”Your name” value=”{{username}}” />Input text with param in value
[submit “Submit”]<input type=”submit” value=”Submit” />Input submit

Conditional

To show or hidden a input in form, you should add input to this code:

<div class="conditional" data-key="_key" data-value="_value">
    // Input check conditional
<div>

Example: Show input name “your-email” when input name “your-name” have value is “show”

[text* your-name autocomplete:name]
<div class="conditional" data-key="your-name" data-value="show">
    [email* your-email autocomplete:email]
<div>

Was this article helpful to you? Yes No

How can we help?