The following Formlister example is based upon the "Anatomy of a Contact Form"
Rendered form
Snippet call
[!FormLister?
&formid=`ContactForm`
&to=`name@domain.com`
&config=`default:core`
&isHtml=`0`
&protectSubmit=`1`
&rules=`{
"name":{
"required":"Please enter your full name"
},
"email":{
"required":"Please enter your email",
"email":"Please enter a valid email"
},
"phone":{
"required":"Please enter your phone number",
"phone":"Please enter a valid phone number",
"minLength":{
"params":5,
"message":"Please enter a valid phone number"
}
},
"subject":{
"required":"Please enter your subject"
},
"message":{
"required":"Please enter your message",
"minLength":{
"params":100,
"message":"Your message must have at least 100 characters"
}
}
}`
&allowedFields=`name,email,phone,subject,message`
&messagesTpl=`@CODE:<div class="formvalidation">[+required+][+errors+][+messages+]</div>`
&messagesRequiredOuterTpl=`@CODE:<section class="requiredfields"><header>Required Fields</header><div>[+messages+]</div></section>`
&messagesErrorOuterTpl=`@CODE:<section class="invalidfields"><header>Invalid Fields</header><div>[+messages+]</div></section>`
&messagesOuterTpl=`@CODE:<section class="defaultfields"><header>Messages</header><div>[+messages+]</div></section>`
&errorTpl=`@CODE:<span class="error">[+message+]</span>`
&errorClass=`error`
&requiredClass=`required`
&formTpl=`@CODE:
[+form.messages+]
<form action="[~[*id*]~]" method="post">
<input type="hidden" name="formid" value="ContactForm">
<!-- Name -->
<div class="[+name.errorClass+][+name.requiredClass+]">
<label for="name">Name</label>
<input type="text" name="name" id="name" placeholder="Name" value="[+name.value+]">
</div>
<!-- Email -->
<div class="[+email.errorClass+][+email.requiredClass+]">
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="Email" value="[+email.value+]">
</div>
<!-- Phone Number -->
<div class="[+phone.errorClass+][+phone.requiredClass+]">
<label for="phone">Phone</label>
<input type="tel" name="phone" id="phone" placeholder="Only Enter Digits" value="[+phone.value+]">
</div>
<!-- Subject -->
<div class="[+subject.errorClass+][+subject.requiredClass+]">
<label for="subject">Subject</label>
<input type="text" name="subject" id="subject" placeholder="Subject" value="[+subject.value+]">
</div>
<!-- Message -->
<div class="[+message.errorClass+][+message.requiredClass+]">
<label for="message">Message</label>
<textarea rows="10" name="message" id="message" placeholder="Type your message here">[+message.value+]</textarea>
</div>
<!-- Submit Button -->
<button type="submit">Submit</button>
</form>`
&successTpl=`@CODE:<div>Thank you, we will get back to you ASAP.</div>`
&reportTpl=`ContactFormReport`
!]
Snippet call - using chunks
[!FormLister?
&formid=`ContactForm`
&to=`name@domain.com`
&config=`default:core`
&isHtml=`0`
&protectSubmit=`1`
&rules=`{
"name":{
"required":"Please enter your full name"
},
"email":{
"required":"Please enter your email",
"email":"Please enter a valid email"
},
"phone":{
"required":"Please enter your phone number",
"phone":"Please enter a valid phone number",
"minLength":{
"params":5,
"message":"Please enter a valid phone number"
}
},
"subject":{
"required":"Please enter your subject"
},
"message":{
"required":"Please enter your message",
"minLength":{
"params":100,
"message":"Your message must have at least 100 characters"
}
}
}`
&allowedFields=`name,email,phone,subject,message`
&messagesTpl=`@CODE:<div class="formvalidation">[+required+][+errors+][+messages+]</div>`
&messagesRequiredOuterTpl=`@CODE:<section class="requiredfields"><header>Required Fields</header><div>[+messages+]</div></section>`
&messagesErrorOuterTpl=`@CODE:<section class="invalidfields"><header>Invalid Fields</header><div>[+messages+]</div></section>`
&messagesOuterTpl=`@CODE:<section class="defaultfields"><header>Messages</header><div>[+messages+]</div></section>`
&errorTpl=`@CODE:<span class="error">[+message+]</span>`
&errorClass=`error`
&requiredClass=`required`
&parseDocumentSource=`1`
&formTpl=`ContactForm`
&successTpl=`@CODE:<div>Thank you, we will get back to you ASAP.</div>`
&reportTpl=`ContactFormReport`
!]
Form Chunk
In the example here we have called the chunk "ContactForm" - you can call it whatever you like, so long as the name is the same in the snippet call.
[+form.messages+]
<form action="[~[*id*]~]" method="post">
<input type="hidden" name="formid" value="ContactForm">
<!-- Name -->
<div class="[+name.errorClass+][+name.requiredClass+]">
<label for="name">Name</label>
<input type="text" name="name" id="name" placeholder="Name" value="[+name.value+]">
</div>
<!-- Email -->
<div class="[+email.errorClass+][+email.requiredClass+]">
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="Email" value="[+email.value+]">
</div>
<!-- Phone Number -->
<div class="[+phone.errorClass+][+phone.requiredClass+]">
<label for="phone">Phone</label>
<input type="tel" name="phone" id="phone" placeholder="Only Enter Digits" value="[+phone.value+]">
</div>
<!-- Subject -->
<div class="[+subject.errorClass+][+subject.requiredClass+]">
<label for="subject">Subject</label>
<input type="text" name="subject" id="subject" placeholder="Subject" value="[+subject.value+]">
</div>
<!-- Message -->
<div class="[+message.errorClass+][+message.requiredClass+]">
<label for="message">Message</label>
<textarea rows="10" name="message" id="message" placeholder="Type your message here">[+message.value+]</textarea>
</div>
<!-- Submit Button -->
<button type="submit">Submit</button>
</form>
Rendered HTML source code
Now that you have copied one of the versions from above, it's time to test the form. Simply preview the page in the browser and review your HTML source code, you should get something like the following.
Please note that the "action" will be different in your install
Default
<form action="contact-3.html" method="post">
<input type="hidden" name="formid" value="ContactForm">
<!-- Name -->
<div class="">
<label for="name">Name</label>
<input type="text" name="name" id="name" placeholder="Name" value="">
</div>
<!-- Email -->
<div class="">
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="Email" value="">
</div>
<!-- Phone Number -->
<div class="">
<label for="phone">Phone</label>
<input type="tel" name="phone" id="phone" placeholder="Only Enter Digits" value="">
</div>
<!-- Subject -->
<div class="">
<label for="subject">Subject</label>
<input type="text" name="subject" id="subject" placeholder="Subject" value="">
</div>
<!-- Message -->
<div class="">
<label for="message">Message</label>
<textarea rows="10" name="message" id="message" placeholder="Type your message here"></textarea>
</div>
<!-- Submit Button -->
<button type="submit">Submit</button>
</form>
With Validation (Errors and or Required fields).
To produce this code we simply clicked the "submit" button, the form was validated and came back empty as nothing was added, which then produced the error messages
<div class="formvalidation">
<section class="requiredfields">
<header>Required Fields</header>
<div>Please enter your full name<br>
Please enter your email<br>
Please enter your phone number<br>
Please enter your subject<br>
Please enter your message</div>
</section>
</div>
<form action="contact-3.html" method="post">
<input type="hidden" name="formid" value="ContactForm">
<!-- Name -->
<div class="required">
<label for="name">Name</label>
<input type="text" name="name" id="name" placeholder="Name" value="">
</div>
<!-- Email -->
<div class="required">
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="Email" value="">
</div>
<!-- Phone Number -->
<div class="required">
<label for="phone">Phone</label>
<input type="tel" name="phone" id="phone" placeholder="Only Enter Digits" value="">
</div>
<!-- Subject -->
<div class="required">
<label for="subject">Subject</label>
<input type="text" name="subject" id="subject" placeholder="Subject" value="">
</div>
<!-- Message -->
<div class="required">
<label for="message">Message</label>
<textarea rows="10" name="message" id="message" placeholder="Type your message here"></textarea>
</div>
<!-- Submit Button -->
<button type="submit">Submit</button>
</form>