On March 26, 2019 we launched new MODX Forums. Please join us at the new MODX Community Forums.
Subscribe: RSS
  • MichaelHarringtonDesigns Reply #1, 8 years, 6 months 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@yahoo.com`
    &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>
    • 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
      • I am in the same boat: contact form will not validate...
        • 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
          • Here is all the code from my contact page:
            [[!FormIt?
            &hooks=`recaptcha,spam,email,redirect`
            &emailTpl=`sentEmailTpl`
            &emailSubject=`Message from the ABC website`
            &emailTo=`name@email.com`
            &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?
            • 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
              • 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...
                • 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!
                  • [[!FormIt?
                    &hooks=`recaptcha,spam,email,redirect`
                    &emailTpl=`sentEmailTpl`
                    &emailSubject=`Message from the ABC website`
                    &emailTo=`name@email.com`
                    &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
                    • 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.