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 7	Html Form	Description
[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>