Building a Clean Simple Contact Form with FormLister

A basic contact form is one of the most common things teams build in Evolution CMS, but it is also one of the places where unnecessary complexity appears very quickly. This approach works well because it stayed focused on a small, reliable goal: collect a name, an email, and a message, validate them clearly, and send a readable email without turning the page into a form framework.

If you want a clean FormLister setup, the safest starting point is to keep the whole flow visible: one snippet call, one form template, one report template, and one success state.

What a minimal FormLister contact form needs

• A stable formid so FormLister can identify the request.
• Required rules for the essential fields.
• A form template that repopulates submitted values after validation errors.
• A simple email template so the resulting message is readable by humans.

Example snippet call

[!FormLister?
&formid=`contactForm`
&to=`team@example.com`
&subject=`New contact request`
&rules=`{
  "name":{"required":"Enter your name"},
  "email":{"required":"Enter your email","email":"Enter a valid email"},
  "message":{"required":"Enter your message"}
}`
&formTpl=`@CODE:
<form method="post" class="contact-form">
  <input type="hidden" name="formid" value="contactForm">

  <label>Name</label>
  <input type="text" name="name" value="[+name.value+]">
  <div class="field-error">[+name.error+]</div>

  <label>Email</label>
  <input type="email" name="email" value="[+email.value+]">
  <div class="field-error">[+email.error+]</div>

  <label>Message</label>
  <textarea name="message" rows="6">[+message.value+]</textarea>
  <div class="field-error">[+message.error+]</div>

  <div class="form-messages">[+form.messages+]</div>
  <button type="submit">Send</button>
</form>`
&reportTpl=`@CODE:
<p><strong>Name:</strong> [+name.value+]</p>
<p><strong>Email:</strong> [+email.value+]</p>
<p><strong>Message:</strong></p>
<p>[+message.value+]</p>`
&successTpl=`@CODE:
<div class="alert alert-success">
  Thank you. Your message has been sent successfully.
</div>`
!]

Why this pattern works

The important part is not the exact HTML classes. The important part is that every field pulls its value from FormLister placeholders such as [+name.value+] and prints field-level errors close to the input. That keeps the form readable when validation fails and prevents users from having to retype everything.

What to watch for

• If you do not output [+form.messages+], global validation or send-state messages can disappear.
• If you hardcode static field values, the form will not restore submitted data correctly.
• If the email body is left as raw field dumps, the recipient gets a messy unreadable message.

When to keep it this simple

This starter structure is enough for many brochure sites, lead pages, service-company websites, and internal contact forms. Only add AJAX, file uploads, conditional fields, or external integrations when the business case really requires them.

That is the core lesson: a good contact form is often a matter of clean defaults, not more moving parts.