We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 36931
    • 206 Posts
    Hello

    I created a working form.
    Here is the code
    [[!FormIt? &hooks=`math,spam,email,redirect,FormItAutoResponder` &store=`0` &emailUseFieldForSubject=`1` &emailTpl=`emailTpl` &emailTo=`[email protected]` &redirectTo=`[[*id]]` &fiarTpl=`autoResponseTplFr` &fiarSubject=`Merci pour votre message` &fiarToField=`email` &fiarFromName=`DK Management ([email protected])` &fairReplyTo=`[email protected]` &validate=`name:required,firstname:required,email:email:required,comment:required:stripTags`]]
    
    
    <h4>Contact</h4>
    [[!+fi.error_message:notempty=`[[!+fi.error_message]]`]]
    <form id="form" action="/fr/[[~[[*id]]]]" method="post">
    <input name="nospam:blank" type="hidden" />
    <input name="subject" value="Message envoyé de votre site web" type="hidden" />
    	  <span class="error">[[!+fi.error.name]]</span>
          <input name="name" type="text" id="name" placeholder="Nom *" value="[[!+fi.name]]" />
    	  <span class="error">[[!+fi.error.firstname]]</span>
          <input name="firstname" type="text" id="first name" placeholder="Prénom *" value="[[!+fi.firstname]]" />
    	  <span class="error">[[!+fi.error.phone]]</span>
          <input name="phone" id="phone" placeholder="Tél." value="[[!+fi.phone]]" />
    
    	  <span class="error">[[!+fi.error.email]]</span>
          <input name="email" type="email" id="email" placeholder="E-mail *" value="[[!+fi.email]]" />
    
    
    	  <span class="error">[[!+fi.error.comment]]</span>
          <textarea name="comment" id="comment" placeholder="Message *" rows="4">[[!+fi.comment]]</textarea>
    
    
          <span style="text-decoration:underline;margin-bottom:5px;">Code de sécurité* : </span><span></span><br>
          <table class="tb_form"><tr><td width="60">[[!+fi.op1]] [[!+fi.operator]] [[!+fi.op2]] =</td><td>
    
          <input id="captcha" type="text" name="math:required" value="[[!+fi.math]]" style="width:26px; height:16px;" />
          <input type="hidden" name="op1" value="[[!+fi.op1]]" />
          <input type="hidden" name="op2" value="[[!+fi.op2]]" />
    	   <input type="hidden" name="operator" value="[[!+fi.operator]]" />
    
    	   </td>
    	   <td>
          <input type="submit" name="submit"  id="submit" value="Envoyer" style="margin-left:3px;width:68px;"/> 
    	  </td>
    	  </tr>
    	  </table>
    	  [[!+fi.error.math]]
    </form>
    


    It works but, the user asked me to remove all validation error as
    [[!+fi.error.email]]
    [[!+fi.error.name]]
    etc
    


    I would like to the field in red if the name is empty. Same for all other field if it's empty.
    And to have at the top of the form, the error message.

    How can I adapt it?

    Tks
      • 3109 ☆ A M B ☆
      • 894 Posts
      Just add a class parameter this to your inputs and make sure you change each error placeholder for each input, that way each input will have an error class if there are errors.

      <input name="email" type="email" id="email" placeholder="E-mail *" value="[[!+fi.email]]" [[!+fi.error.email:!empty=`class="error"`]] />
      


      I explain this and some other tips in my FormIt tutorial

      Good Luck.
        Benjamin Marte
        Interactive Media Developer
        Follow Me on Twitter | Visit my site | Learn MODX