Basic Contact Form With modxCaptcha

• Rendered form
• Snippet call
• Additional modxCaptcha Parameters

The following form is based on the Basic Contact Form - V.1 example, note that the code used does not use a chunk for the form.

If you prefer to use a chunk for the form, make sure you remember to add the "&parseDocumentSource" parameter to the Formlister call, as can be seen here.

Rendered form

As can be seen from the image above, when the form is submitted and or the page is refreshed, the captcha code is regenerated.

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`
&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="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>
  <!-- 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 -->
  <button type="submit">Submit</button>
</form>`
&successTpl=`@CODE:<div>Thank you, we will get back to you ASAP.</div>`
&reportTpl=`ContactFormReport`
!]

Additional modxCaptcha Parameters

The following code shows you what has been added to the Formlister call to make modxCaptcha work, it is broken down into its specific elements:

Code added to the Formlister call

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

Please read the documentation found here for more information about the parameters used in this example.

FOR CLARITY: the &captchaField=`` parameter is the name of the input field where the user has to type the generated code in to. In our example the name of the input field (found in > code added to the form) is "captchacode".

Code added to the Form

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

Remember:

You can change the name of the fields used in the example, we don't suggest you use the name(s), captcha code, captchacode or captcha image.

The only thing you can't change is the the form source: src="[+captcha+]", because it has a mandatory pre-defined name.

Suggest an edit to this page.