pepebe
7/23/2013 - 7:16 AM

Simple Contact form with minimum markup. Validation and error/success message included.

Simple Contact form with minimum markup. Validation and error/success message included.

[[!FormIt?
   &hooks=`email,FormItAutoResponder`

   &emailTpl=`test_emailTpl`
   &emailTo=`ppb@webwohnraum.de`
   &emailSubject=`Neue Nachricht vom Kontaktformular`
   &emailReplyToName=`email`
   &emailFrom=`kontakt@webwohnraum.de`
   &emailFromName=`Kontaktformular`

   &fiarTpl=`test_fiarTpl`
   &fiarToField=`email`
   &fiarSubject=`Kopie ihrer Nachricht`
   &fiarReplyTo=`kontakt@webwohnraum.de`
   &fiarFrom=`kontakt@webwohnraum.de`
   &fiarFromName=`Kontaktformular`

   &placeholderPrefix=`fi.`

   &validationErrorMessage=`error`
   &successMessage=`success`

   &successMessagePlaceholder=`fi.successMessage`
  
   &validate=`name:required,
      email:email:required,
      subject:required,
      text:required:stripTags`
]]

<h2>Contact Form</h2>

[[!+fi.validation_error_message:!empty=`
<div> 
<h3>Ihr Formular konnte nicht versendet werden:</h3>
<p>Folgende Formularfelder sind unvollständig oder enthalten Fehler :</p>
<ul>
[[!+fi.error.name:!empty=`<li><a href="[[~[[*id]]]]#name">Name</a> ist ein Pflichtfeld.</li>`]]
[[!+fi.error.email:!empty=`<li><a href="[[~[[*id]]]]#email">Email</a> ist ein Pflichtfeld und muß eine gültige E-Mail Adresse enthalten.</li>`]]
[[!+fi.error.subject:!empty=`<li><a href="[[~[[*id]]]]#subject">Subject</a>  ist ein Pflichtfeld.</li>`]]
[[!+fi.error.message:!empty=`<li><a href="[[~[[*id]]]]#text">Text</a>  ist ein Pflichtfeld.</li>`]]
</ul>
</div>
`]]

[[!+fi.successMessage:!empty=`
        <div>
             Die Nachricht wurde erfolgreich versendet.
        </div>
`]]

[[!+fi.error_message:notempty=`<p>[[!+fi.error_message]]</p>`]]
 
<form action="[[~[[*id]]]]" method="post" class="form">
    <input type="hidden" name="nospam:blank" value="" />
<div>
    <label for="name">
        Name:
        <span class="error">[[!+fi.error.name]]</span>
    </label>
    <input type="text" name="name" id="name" value="[[!+fi.name]]" placeholder="Ihr Name"/>
</div>
<div> 
    <label for="email">
        E-Mail:
        <span class="error">[[!+fi.error.email]]</span>
    </label>
    <input type="text" name="email" id="email" value="[[!+fi.email]]" placeholder="Ihre E-Mail Adresse"/>
</div>
<div> 
    <label for="subject">
        Thema/Betreff:
        <span class="error">[[!+fi.error.subject]]</span>
    </label>
    <input type="text" name="subject" id="subject" value="[[!+fi.subject]]" placeholder="Ihr Thema"/> 
</div>
<div>
    <label for="text">
        Nachricht:
        <span class="error">[[!+fi.error.text]]</span>
    </label>
    <textarea name="text" id="text" cols="55" rows="7" value="[[!+fi.text]]" placeholder="Ihre Nachricht">[[!+fi.text]]</textarea>
</div>
 
    <br class="clear" />
    [[-!+formit.recaptcha_html]]
    [[-!+fi.error.recaptcha]]
 
    <br class="clear" />
 
    <div class="form-buttons">
        <input type="submit" value="Nachricht absenden" />
    </div>
</form>