All-In-One Form

• Rendered form
• Snippet call
• Using reCAPTCHA instead of modxCaptcha

The following FormLister call is here to give you a head start, it is based on the V.1 form with the addition of the majority of the standalone tutorials, it has the following:

• Custom Language
• Multiselect Options
• Anti BOT field
• modxCaptcha (with instructions to change to reCAPTCHA)
• Inline Form Report

The call has some minor parameter differences, compared to the other examples found in this section:

• &to=`name@domain.com` - changed to the default Evo email: &to=`[(emailsender)]`

• &isHtml=`0` - changed to &isHtml=`1`

• &allowedFields=`name,email,phone,subject,message` - removed, as all fields are allowed per default

• &subjectTpl=`` - added, takes the subject value from the form and adds it to the mail header

• [+form.date.value+] - added, adds a date and time value to the form report and success message

Rendered form

As can be seen in the image, the anti-bot message is also shown.

Snippet call

Feel free to "copy", "paste" and "test" the following code:

[!FormLister?
&formid=`ContactForm`
&lang=`english-uk`
&lexicon=`{
    "english-uk":{
        "form.protectSubmit":"Your message was successfully sent, there\\'s no need to send it again.",
        "form.submitLimit":"You can send a message again in ",
        "form.minutes":"min",
        "form.seconds":"sec",
        "form.dateFormat":"l d F Y \\a\\t H:i:sa",
        "form.default_successTpl":"@CODE:Your message was successfully sent on [+form.date.value+]",
        "form.form_failed":"Your message could not be sent."
    }
}`
&to=`[(emailsender)]`
&subjectTpl=`@CODE:[+subject.value+] | [(site_name)] Contact Form`
&config=`default:core`
&isHtml=`1`
&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"
},
"multiselect":{
    "required":"Please choose from the options",
    "minCount":{
        "params":1,
        "message":"At least 1 option is required"
    }
},
"message":{
    "required":"Please enter your message",
    "minLength":{
        "params":25,
        "message":"Your message must have at least 25 characters"
    }
},
"antispam":{
    "!required":"You must be a BOT"
}
}`
&formControls=`multiselect`
&arraySplitter=`<br>`
&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`
&captcha=`modxCaptcha`
&captchaParams=`{
    "width":"148",
    "height":"60",
    "errorEmptyCode":"Captcha Code Missing",
    "errorCodeFailed":"Captcha Code is Incorrect"
}`
&captchaField=`captchacode`
&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="Numbers Only" 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>
  <!-- Multiple Select Options -->
  <div class="[+multiselect.errorClass+][+multiselect.requiredClass+]">
    <label for="multiselect">Options</label>
    <select name="multiselect[]" id="multiselect" multiple="multiple">
      <option value="Option 1" [+s.multiselect.Option 1+]>Option 1</option>
      <option value="Option 2" [+s.multiselect.Option 2+]>Option 2</option>
      <option value="Option 3" [+s.multiselect.Option 3+]>Option 3</option>
      <option value="Option 4" [+s.multiselect.Option 4+]>Option 4</option>
      <option value="Option 5" [+s.multiselect.Option 5+]>Option 5</option>
    </select>
  </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>
  <!-- modxCaptcha -->
  <div class="[+captchacode.errorClass+][+captchacode.requiredClass+]">
    <label for="captchacode" class="compulsory">Captcha Code:</label>
    <img src="[+captcha+]" alt="Captcha Image"><br>
    <br>
    Enter Captcha Code here:<br>
    <br>
    <input type="text" name="captchacode" id="captchacode" value="">
  </div>
  <!-- Submit Button -->
  <input type="text" name="antispam" id="antispam" autocomplete="off" value="[+antispam.value+]">
  <button type="submit">Submit</button>
</form>`
&reportTpl=`@CODE:
<p>This is the information entered by <b>[+name.value+]</b> in the websites contact form, on the [+form.date.value+].</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>Selected Option(s):<br>[+multiselect.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>`
!]

Using reCAPTCHA instead of modxCaptcha

The modxCaptcha parameters need to be changed, from this:

&captcha=`modxCaptcha`
&captchaParams=`{
    "width":"148",
    "height":"60",
    "errorEmptyCode":"Captcha Code Missing",
    "errorCodeFailed":"Captcha Code is Incorrect"
}`
&captchaField=`captchacode`

to this:

&captcha=`reCaptcha`
&captchaParams=`{
    "siteKey":"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    "secretKey":"xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    "errorCodeFailed":"A reCAPTCHA validation error occured",
    "theme":"light"
}`
&captchaField=`g-recaptcha-response`

You must obviously replace the "X's" used in the "siteKey" and "secretKey" with your keys.

The changes in the form are as follows:

Swap the following:

<!-- modxCaptcha -->
<div class="[+captchacode.errorClass+][+captchacode.requiredClass+]">
  <label for="captchacode" class="compulsory">Captcha Code:</label>
  <img src="[+captcha+]" alt="Captcha Image"><br>
  <br>
  Enter Captcha Code here:<br>
  <br>
  <input type="text" name="captchacode" id="captchacode" value="">
</div>

for this:

<!-- reCAPTCHA -->
[+captcha+]

That's it, now you are up and running with reCAPTCHA - simple when you know how.

Suggest an edit to this page.