We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Cannot get my contact form to validate

    • 19298
    • 76 Posts
    MichaelHarringtonDesigns Reply #1, 13 years, 1 month ago
    Hello everyone

    I have managed to get my contact form to work correctly, apart from validation
    Here is the code I am using

    [[!FormIt?
    &hooks=`recaptcha,spam,email,redirect`
    &emailTpl=`sentEmailTpl`
    &emailSubject=`Contact Form`
    &emailTo=`[email protected]`
    &validate=`contact_name:required:minLength=`2`,
    contact_email:email:required,
    contact_message:required`
    &redirectTo=`12`
    ]]

    Does anyone have ideas how to get the validation to work correctly
    I have been trying a few example for the docs but still no luck
    http://rtfm.modx.com/display/ADDON/FormIt.Validators

    Also what is the best way to customize the submit button?
    <input name="submit" class="submit" type="submit" value="Submit"/>

    I tried using CSS, which kind of works but I am sure there is a easier way, I just don’t know it.

    <div id="submit">
    <input name="submit" class="submit" type="submit" value="Submit"/>
    </div>
      • 22019
      • 390 Posts
      odeclas Reply #2, 13 years, 1 month ago
      Difficult to tell without the code for the form.

      Formit hooks are triggered in sequence, so if you don’t have a recaptcha key I don’t think it will get to the ’email’ bit where it does the required validation.

      On the second bit I always create a class for formbuttons, as I want them all styled the same. There tend to be more variations in layout among different browsers for form elements than other elements, so I just put up with a least-bad scenario. You could also use an attribute selector
      input [type="submit"] { background-color: blue;}
        Writer > E-consultant > MODx developer || Salesforce || modx 2.x || PHP 5.2.13 || MySQL client 5.0.86
        • 23299
        • 1,161 Posts
        Photowebmax Reply #3, 13 years, 1 month ago
        I am in the same boat: contact form will not validate...
          • 28215
          • 4,149 Posts
          splittingred Reply #4, 13 years, 1 month ago
          1. Change your validate call to this:

          &validate=`contact_name:required:minLength=^2^,
      contact_email:email:required,
      contact_message:required`


          2. Give your submit button a name="" attribute, and put that into the &submitVar property on the FormIt snippet call.

          3. Ensure you have reCaptcha setup correctly.
            shaun mccormick | bigcommerce mgr of software engineering, former modx co-architect | github | splittingred.com
            • 23299
            • 1,161 Posts
            Photowebmax Reply #5, 13 years, 1 month ago
            Here is all the code from my contact page:
            [[!FormIt?
&hooks=`recaptcha,spam,email,redirect`
&emailTpl=`sentEmailTpl`
&emailSubject=`Message from the ABC website`
&emailTo=`[email protected]`
&validate=`contact_name:required:minLength=^2^,
      contact_email:email:required,
      contact_message:required`
&redirectTo=`6`
]]
 
<form id="contactForm" class="formBox " action="[[~[[*id]]]]" method="post">
<strong>Please use the form below to send us an email:</strong>
<div>
<label for="contact_name">Name </label><em>(required, at least 2 characters)</em><br />
<input id="contact_name" class="required" name="contact_name" size="30" value="[[!+fi.name]]" />
</div>
<div>
<label for="contact_email">E-Mail </label><em>(required)</em><br />
<input id="contact_email" class="required email" name="contact_email" size="30" value="[[!+fi.email]]" />
</div>
<div>
<label for="contact_phone">Phone </label><em>(optional)</em><br />
<input id="contact_phone_NA_format" class="phone" maxlength="14" name="contact_phone_NA_format" size="14" value="[[!+fi.phone]]" />
<label for="contact_ext">ext. </label>
<input id="contact_ext_NA_format" class="ext" maxlength="5" name="contact_ext_NA_format" size="5" value="[[!+fi.ext]]" />
</div>
<div>
<label for="contact_message">Your comment </label><em>(required)</em><br />
<textarea id="contact_message" class="required" cols="70" rows="7" name="contact_message">[[!+fi.text]]</textarea>
</div>
<div>
[[+formit.recaptcha_html]]
[[!+fi.error.recaptcha]]
</div>
<div>
<input class="submit" name="submit" type="submit" value="Submit" />
</div>
</form>


            The form works, the recaptcha works, the redirect funtion works. But the validation does nothing? Does the validation need to go into the hooks?
              • 28215
              • 4,149 Posts
              splittingred Reply #6, 13 years, 1 month ago
              Your fi. placeholders need to match the name of the fields. And you need to add the error placeholders. For example:

              <label for="contact_name">Name </label><em>(required, at least 2 characters)</em><br />
<input id="contact_name" class="required" name="contact_name" size="30" value="[[!+fi.name]]" />

              Is wrong. It should be:

              <label for="contact_name">Name </label><em>(required, at least 2 characters)</em>
<span class="error">[[!+fi.error.contact_name]]</span><br />
<input id="contact_name" class="required" name="contact_name" size="30" value="[[!+fi.contact_name]]" />


              Also, you need to add &submitVar=`submit` to your FormIt tag, as that is the name of the submit button.
                shaun mccormick | bigcommerce mgr of software engineering, former modx co-architect | github | splittingred.com
                • 23299
                • 1,161 Posts
                Photowebmax Reply #7, 13 years, 1 month ago
                Shaun,

                Thanks! That fixed the name validation!

                I then tested the form but this time left out the email address and there was no validation happening. Looking at your revised code for the name section I added this span (with change) inside the email section:
                <span class="error">[[!+fi.error.contact_email]]</span><br />


                That seems to do the trick!

                Thanks!

                Max

                PS: hopefully this will help the OP as well...
                  • 23299
                  • 1,161 Posts
                  Photowebmax Reply #8, 13 years, 1 month ago
                  Quote from: splittingred at Mar 09, 2011, 09:29 PM

                  Also, you need to add &submitVar=`submit` to your FormIt tag, as that is the name of the submit button.

                  I just need to be clear here: where exactly does this go?

                  Thanks!
                    • 22019
                    • 390 Posts
                    odeclas Reply #9, 13 years, 1 month ago 
                    [[!FormIt?
&hooks=`recaptcha,spam,email,redirect`
&emailTpl=`sentEmailTpl`
&emailSubject=`Message from the ABC website`
&emailTo=`[email protected]`
&validate=`contact_name:required:minLength=^2^,
      contact_email:email:required,
      contact_message:required`
&redirectTo=`6`
&submitVar=`submit`
]]
                      Writer > E-consultant > MODx developer || Salesforce || modx 2.x || PHP 5.2.13 || MySQL client 5.0.86
                      • 8609
                      • 607 Posts
                      einsteinsboi Reply #10, 13 years, 1 month ago
                      Quote from: splittingred at Mar 09, 2011, 09:29 PM


                      Also, you need to add &submitVar=`submit` to your FormIt tag, as that is the name of the submit button.

                      Is this a required parameter? I have been using FormIt without it and it works just fine for me. Curious to know the answer to this.
                        The Coding Pad - MODx        MODx Beginner Tutorials     
                        MODx Video Tutorials 
                        MODx Development