Create a Form Report

All forms need to be able to be reviewed in some form or another, either plain text or in HTML.

The following information is here to help you create your own form reports

Default setup in Evo

When you install Evo with the pre-configured site, you will find the default form report in the chunks section, under the name "ContactFormReport".

As of writing this example the chunk contained the following:

<p>This is a response sent by <b>[+name+]</b> using the feedback form on the website. The details of the message follow below:</p>

<p>Name: [+name+]</p>
<p>Email: [+email+]</p>
<p>Regarding: [+subject+]</p>
<p>comments:<br />[+message+]</p>

<p>You can use this link to reply: <a href="mailto:[+email+]?subject=RE: [+subject+]">[+email+]</a></p>

Build Your Own Report

This is quite simple, because you already have all of the fields in your form, it's now simply a question of copying the values.

Our form (based on V.1) has all the information we require, here the form code:

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

All we need from the above code are the named values:

[+name.value+]
[+email.value+]
[+phone.value+]
[+subject.value+]
[+message.value+]

Putting this into something that is readable and makes sense is the next step:

<p>This is the information entered by <b>[+name.value+]</b> in the websites contact form.</p>
<p>The full details are as follows:</p>

<p>Name: [+name.value+]</p>
<p>Email: [+email.value+]</p>
<p>Phone: [+phone.value+]</p>
<p>Subject: [+subject.value+]</p>
<p>Message:<br>[+message.value+]</p>

<p>Send a Reply: <a href="mailto:[+email.value+]?subject=RE: [+subject.value+]">[+email.value+]</a></p>

How you output the information in the report is down to you, the above is simply an example.

Add the Report to FormLister

There are two possibilities to add a report to the FormLister call, either with a chunk or directly in the FormLister call.

In both cases the parameter is:

[!FormLister?
BLAH…
&reportTpl=``
!]

Using a chunk:

Create a chunk, call it whatever you want and then add the name of the chunk to the parameter, our chunk uses the name "ContactFormReport".

[!FormLister?
BLAH…
&reportTpl=`ContactFormReport`
!]

The chunk "ContactFormReport" (in this example) contains the following:

<p>This is the information entered by <b>[+name.value+]</b> in the websites contact form.</p>
<p>The full details are as follows:</p>

<p>Name: [+name.value+]</p>
<p>Email: [+email.value+]</p>
<p>Phone: [+phone.value+]</p>
<p>Subject: [+subject.value+]</p>
<p>Message:<br>[+message.value+]</p>

<p>Send a Reply: <a href="mailto:[+email.value+]?subject=RE: [+subject.value+]">[+email.value+]</a></p>

Directly in the call:

[!FormLister?
BLAH…
&reportTpl=`@CODE:
<p>This is the information entered by <b>[+name.value+]</b> in the websites contact form.</p>
<p>The full details are as follows:</p>

<p>Name: [+name.value+]</p>
<p>Email: [+email.value+]</p>
<p>Phone: [+phone.value+]</p>
<p>Subject: [+subject.value+]</p>
<p>Message:<br>[+message.value+]</p>

<p>Send a Reply: <a href="mailto:[+email.value+]?subject=RE: [+subject.value+]">[+email.value+]</a></p>`
!]

Add Date & Time

If you want to add a date and time to your form report you can, simply add the following (where you want it to be shown) to the report:

[+form.date.value+]

Example:

<p>This is the information entered by <b>[+name.value+]</b> in the websites contact form, on the [+form.date.value+].</p>

Depending on your chosen language, the date will be shown in form from: "Month.Date.Year at Hour.Minute.Second".

As defined in: assets/snippets/FormLister/core/lang/LANGUAGE/form.inc.php

$_lang['form.dateFormat'] = 'm.d.Y \a\t H:i:s';

You can customise the output by either:

  • modifying the language file for the language you have chosen
  • adding a language lexicon

Read more about customising the language.

An example:

&lang=`dateformat`
&lexicon=`{
    "dateformat":{
        "form.dateFormat":"l d F Y \\a\\t H:i:sa"
    }
}`

The above example results in something like this:

Monday 05 March 2018 at 17:00:30pm

Note: In this example, "am" and "pm" are displayed depending on the time of day.

Please read the official PHP date function documentation to apply your custom output.

Suggest an edit to this page.