Anatomy of a Contact Form

This information is here to give you a better understanding of what you are doing when creating a basic contact form with some validation.

"Copy + paste" is a mentality that should in certain circumstances not be used - this is one of them. It is imperative that you know what effect parameters have when they are changed or added.

It is important to note that there IS a difference between snippet calls when using "chunks", there is a need of an extra parameter.

Important:

Do not copy and paste the code found in this page - it is not meant for doing so.

Please view the Basic Contact Form tutorials, as they are specifically meant for copying.

Rendered form

Please note that the form here is for demonstration purposes only.

The form will look different in your setup, as the "prettifying" is down to you.

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><ul>[+required+][+errors+][+messages+]</ul></div>`
&messagesOuterTpl=`@CODE:<li>[+messages+]</li>`
&messagesRequiredOuterTpl=`@CODE:<li>[+messages+]</li>`
&messagesErrorOuterTpl=`@CODE:<li>[+messages+]</li>`
&messagesSplitter=`</li><li>`
&messagesRequiredSplitter=`</li><li>`
&messagesErrorSplitter=`</li><li>`
&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 -->
  <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><ul>[+required+][+errors+][+messages+]</ul></div>`
&messagesOuterTpl=`@CODE:<li>[+messages+]</li>`
&messagesRequiredOuterTpl=`@CODE:<li>[+messages+]</li>`
&messagesErrorOuterTpl=`@CODE:<li>[+messages+]</li>`
&messagesSplitter=`</li><li>`
&messagesRequiredSplitter=`</li><li>`
&messagesErrorSplitter=`</li><li>`
&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

Here we have to create the form chunk - in our example it's name is ContactForm:

[+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 -->
  <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>

Important Note: the snippet call now has an additional parameter: parseDocumentSource.

Whereas the form code has not changed at all, it has simply been removed from the snippet call and added to a chunk.

Understand the snippet call

Property Description
&formid

This is the bespoke ID of the form that is being processed.

The same name needs to be in a hidden field in the form itself.

&to

The email address where you want the form to be sent when submitted. You only need to set this if you don't want it to use the default email set in the manager.

&config

See official documentation.

&isHtml

When submitted the form is sent as plain text, not as HTML - change to "1" to send as HTML.

&protectSubmit

Prevents the form from being submitted recursively with the same information.

&rules

Defines the ruleset for each field that is in use in the form - for more details please read the "Validation rules" documentation.

&allowedFields

Defines the fields that are allowed to be used in the form - if not set, all fields are allowed.

(&*)Tpl

Please read the template documentation for further information about the individual templating options.

&errorClass

You can define your own CSS class for errors here.

&requiredClass

You can define your own CSS class for required fields here.

&formTpl

Can be inline code or a chunk - important: view the Snippet call differences.

&successTpl

Displays a message when the form has been successfully sent.

&reportTpl

This is the chunk that contains the form placeholders that is sent to your email address when the form is processed.

Snippet call differences

The following table explains the differences between the two calls.

Property Description
&parseDocumentSource

This parameter is used specifically for rendering the form in the page source (due to the way Evo parses information) when a chunk is used for the form - if not used, errors will occur.

For technical details, please read the documentation

&formTpl

This is the most obvious difference - one uses inline code, whereby the other uses the name of the chunk where the form can be found.

Suggest an edit to this page.