We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 37619
    • 79 Posts
    Using Revo 2.2.0

    I have one page that have 2 forms (Form A and Form B). I'm using the latest version of FormIt.

    Each form has [[!+fi.validation_error_message]].

    When I try to submit Form A with empty fields, the validation error message for BOTH forms shows up.
    When I try to submit Form B with or without empty fields, nothing happens.

    Please help. Thank you.
      Jean-Marc Buytaert (@jmbuytaert)

      MODX truly is the greatest thing that's ever happened to the Internet.
      • 40627
      • 2 Posts
      Are you using &submitVar, and/or are you using jQuery.validate?
        • 37619
        • 79 Posts
        I am using submitVar.
        I was using jQuery Validate but removed it.
          Jean-Marc Buytaert (@jmbuytaert)

          MODX truly is the greatest thing that's ever happened to the Internet.
          • 37638
          • 63 Posts
          Source?
            • 37619
            • 79 Posts
            CONTACT FORM:

            [[!FormIt?
            	&hooks=`spam,FormSave,email,redirect`
            	&emailTpl=`contact-report`
            	&emailFromName=`[[+contact-name]]`
            	&emailTo=`[[++form_emails]]`
            	&emailSubject=`[[++site_name]] - Contact Form Submission`
            	&redirectTo=`83`
            	&fsFormTopic=`Contact Form`
            	&submitVar=`contact_submit`
            	&validate=`contact-name:required,contact-phone:required,contact-email:email:required,contact-comments:required`
            ]]
            
            <div class="contact-form left">
            	<h2>Contact</h2>
            	<div>
            		<form id="contact" action="[[~[[*id]]]]" method="post" name="contact_submit">
            			<input type="hidden" name="nospam:blank" value="" />
            			
            			<fieldset>
            				[[!+fi.validation_error_message]]
            				<label for="contact-name">Name <span class="req">*</span></label>
            				<input id="contact-name" type="text" placeholder="Name *" name="contact-name" class="required" />
            				
            				<label for="contact-email">Email <span class="req">*</span></label>
            				<input id="contact-email" type="email" placeholder="Email *" name="contact-email" class="required" />
            				
            				<label for="contact-phone">Phone <span class="req">*</span></label>
            				<input id="contact-phone" type="text" placeholder="Phone *" name="contact-phone" class="required" />
            				
            				<label for="contact-company">Company</label>
            				<input id="contact-company" type="text" placeholder="Company" name="contact-company" class="required" />
            				
            				<label for="contact-comments">Comments or Question <span class="req">*</span></label>
            				<textarea id="contact-comment" name="contact-comments" rows="5" cols="19" placeholder="Comments or Question *"></textarea>
            			</fieldset>
            			
            			<input type="submit" class="submit right" value="submit" name="contact_submit" id="submitContact" />
            			<hr style="clear:both; visibility:hidden; margin:0; padding:0;">
            		</form>
            	</div>
            </div>
            
              Jean-Marc Buytaert (@jmbuytaert)

              MODX truly is the greatest thing that's ever happened to the Internet.
              • 37619
              • 79 Posts
              NEWSLETTER FORM:

              [[!FormIt?
              	&hooks=`spam,FormSave,email,redirect`
              	&emailTpl=`newsletter-report`
              	&emailFromName=`[[+newsletter_name]]`
              	&emailFrom=`[[+newsletter_name]]`
              	&emailTo=`[[+newsletter_email]]`
              	&emailSubject=`[[++site_name]] - Newsletter Form Submission`
              	&redirectTo=`101`
              	&fsFormTopic=`Newsletter Subscription Form`
              	&submitVar=`nlSubmit`
              	&validate=`newsletter_name:required,newsletter_email:required`
              ]]
              
              <div id="newsletter">
              	<h4>Subscribe to our Newsletter</h4>
              	<form id="newsletterForm" action="[[~[[*id]]]]" method="post" name="nlSubmit">
              		[[!+fi.validation_error_message]]
              
              		<fieldset>
              			<label for="newsletter_name">Enter your name:</label>
              			<input type="text" id="newsletter_name" name="newsletter_name" placeholder="Enter your name *" class="required">
              		</fieldset>
              		
              		<fieldset>
              			<label for="newsletter_email">Enter your email address:</label>
              			<input type="email" id="newsletter_email" name="newsletter_email" placeholder="Enter your email address *" class="required">
              		</fieldset>
              		
              		<input type="submit" name="nlSubmit" value="Submit">
              	</form>
              </div>
              
                Jean-Marc Buytaert (@jmbuytaert)

                MODX truly is the greatest thing that's ever happened to the Internet.
                • 37638
                • 63 Posts
                I am assuming they are both all on one page.

                Couple of things, first, try setting placeholderPrefix to different values for each form. I.e.,

                [[!FormIt?
                &placeholderPrefix=`contactFI`
                ]]
                ...
                <form>
                [[!+validation_error_message]]
                ...
                
                [[FormIt?
                &placeholderPrefix=`form2FI`
                ...
                <form>
                [[!+form2FI.validation_error_message]]
                ...
                


                Second, you want to insert the value fields using FormIt. If you don't and the form has a validation error the user loses the form.

                I.e.,
                <input type="text" name="myInput" value="[[!+fi.myInput]]" />
                


                Or if you changed the placeholderPrefix
                <input type="text" name="myInput" value="[[!+contactFI.myInput]]" />
                
                  • 37619
                  • 79 Posts
                  Thank you jmaddington, that definitely did something: now both forms work.

                  However, the only thing is that when I submit a blank form, the validation_error_message doesn't show up. It just reloads the page.
                    Jean-Marc Buytaert (@jmbuytaert)

                    MODX truly is the greatest thing that's ever happened to the Internet.
                    • 37638
                    • 63 Posts
                    You should see http://rtfm.modx.com/display/ADDON/FormIt.Examples.Simple+Contact+Page

                    Typically you want specific error messages for each field. My forms usually look like:
                          <div class="grid_6 alpha">
                    	<label for="apply-Message" class="[[!+fi.error.Message:notempty=`error`]]">Why do you want to be a Palmer?</label><br />
                    	<textarea class="grid_6 alpha" rows="4" name="Message" id="apply-Message">[[!+fi.Message]]</textarea>
                          </div>
                    


                    So the class "error" only is inserted if that field had a problem. Error usually looks like:
                    .error {
                    color: red;
                    font-size: 1.5em;
                    }
                    


                    Or the like.

                    Alternatively, you can do something like:
                          <div class="grid_6 alpha [[!+fi.error.Message:notempty=`error`]]">
                    	<label for="apply-Message">Why do you want to be a Palmer?</label><span class="errorMessage">This field is required!</span><br />
                    	<textarea class="grid_6 alpha" rows="4" name="Message" id="apply-Message">[[!+fi.Message]]</textarea>
                          </div>
                    


                    CSS:
                    .errorMessage{display:none;}
                    .error .errorMessage{display: inline-block;}
                    


                    Or whatever tricky CSS you want to use.
                      • 28883
                      • 35 Posts
                      Hi guys,

                      I've had two forms working off a page for some time, however, since upgrading to Revo 2.2.5, neither want to work.

                      I've introduced the placeholderPrefix, which has got the top form working, but the bottom one is still giving me issues.

                      I've double and tripple checked ids and names but still having issues. If I display only one form on a page, they both send. Am I missing something?

                      Here is my second form and snippet call:

                      [[!FormIt?  
                         &hooks=`spam,email,FormItAutoResponder,redirect`
                         &placeholderPrefix=`bottomFI`
                         &redirectTo=`1263`
                         &validate=`phone:blank`
                         &emailTpl=`BottomEmailTemplate`
                         &emailSubject=`My Subject`
                         &emailFrom=`[[+bottomEmail]]`
                         &emailTo=`[email protected]`
                         &fiarTpl=`AutoResponder`
                         &fiarSubject=`Auto Responder`
                         &fiarToField=`bottomEmail`
                         &fiarFrom=`[email protected]`
                         &fiarReplyTo=`[email protected]`
                         &fiarReplyToName=`Reply Name`
                         &store=`1`
                         &submitVar=`bottomSubmit`
                      ]]
                      
                      <div class="bottomPriceGuideForm">
                      <form id="bottomEnquiryForm" name="bottomEnquiryForm" action="[[~[[*id]]]]" method="post">  
                          <div class="bottomFormSplit">
                      	<input type="hidden" name="phone" value="" />
                              <input type="hidden" name="bottomUrl" id="bottomUrl" value="[[~[[*id]]? &scheme=`full`]]" [[!+bottomFI.bottomUrl]] />
                      	<input type="text" class="priceInput" name="bottomName" id="bottomName" value="[[!+bottomFI.bottomName]]" />
                      	<input type="text" class="priceInput" name="bottomEmail" id="bottomEmail" value="[[!+bottomFI.bottomEmail]]" />
                      	<input type="text" class="priceInput" name="bottomEmailc" id="bottomEmailc" value="[[!+bottomFI.bottomEmailc]]" />
                          </div>
                          <div class="bottomFormSplit">
                              <textarea class="priceInput comments" name="bottomComments" id="bottomComments" cols="20" rows="5" value="[[!+bottomFI.bottomComments]]" /></textarea>
                          </div>
                          <div class="clear"></div>
                          <div class="bottomFormButton">
                      	<input type="submit" class="enquiry-button" name="bottomSubmit"></input>
                          </div>
                      </form>
                      </div>