Basic Contact Form - V.2

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`
&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">
  [+form.messages+]
  <!-- Name -->
  <div class="[+name.errorClass+][+name.requiredClass+]">
    <label for="name">Name</label>
    <input type="text" name="name" id="name" placeholder="Name" value="[+name.value+]">
    [+name.error+]
  </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+]">
    [+email.error+]
  </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+]">
    [+phone.error+]
  </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+]">
    [+subject.error+]
  </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>
    [+message.error+]
  </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`
&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" novalidate>
  <input type="hidden" name="formid" value="ContactForm">
  [+form.messages+]
  <!-- Name -->
  <div class="[+name.errorClass+][+name.requiredClass+]">
    <label for="name">Name</label>
    <input type="text" name="name" id="name" placeholder="Name" value="[+name.value+]">
    [+name.error+]
  </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+]">
    [+email.error+]
  </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+]">
    [+phone.error+]
  </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+]">
    [+subject.error+]
  </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>
    [+message.error+]
  </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-2.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

<form action="contact-2.html" method="post">
  <input type="hidden" name="formid" value="ContactForm">
  <div class="form-messages"></div>
  <!-- Name -->
  <div class="required">
    <label for="name">Name</label>
    <input type="text" name="name" id="name" placeholder="Name" value="">
    <span class="error">Please enter your full name</span>
  </div>
  <!-- Email -->
  <div class="required">
    <label for="email">Email</label>
    <input type="email" name="email" id="email" placeholder="Email" value="">
    <span class="error">Please enter your email</span>
  </div>
  <!-- Phone Number -->
  <div class="required">
    <label for="phone">Phone</label>
    <input type="tel" name="phone" id="phone" placeholder="Only Enter Digits" value="">
    <span class="error">Please enter your phone number</span>
  </div>
  <!-- Subject -->
  <div class="required">
    <label for="subject">Subject</label>
    <input type="text" name="subject" id="subject" placeholder="Subject" value="">
    <span class="error">Please enter your subject</span>
  </div>
  <!-- Message -->
  <div class="required">
    <label for="message">Message</label>
    <textarea rows="10" name="message" id="message" placeholder="Type your message here"></textarea>
    <span class="error">Please enter your message</span>
  </div>
  <!-- Submit Button -->
  <button type="submit">Submit</button>
</form>

Suggest an edit to this page.