JS Animated. Wie fügt man ein zusätzliches Feld ins Kontaktformular (für Vorlagen mit dem Skript TMForm)hinzu

Das jeweilige Tutorial zeigt, wie fügt man ein zusätzliches Feld ins Kontaktformular für Vorlagen JS Animated mit dem Skript TMForms hinzu.

1. Öffnen Sie .html Datei, die den Code Ihres Kontaktformulars mittels Dreamweaver oder anderes Editor HTML Code enthält. Aktivieren Sie den Modus Split view. In diesem Tutorial fügen wir 2 zusätzliche Felder “Fax” (“Fax”) und “Organisation” (“Organization”) auf der Basis von Standard-Code des Kontaktformulars hinzu.

2. Um ein Feld “Fax” (“Fax”) hinzuzufügen, wählen Sie das Feld “Telefon” (“Phone”), weil es ähnlichen Code hat, dann wird im Codefenster notwendigen zur Bearbeitung Teil sein.

   

   Unten gibt es ein Beispiel des Code-Felders “Telefon” (“Phone”):

   <label class="phone">
       <input type="text" placeholder="Phone:" data-constraints="@Required @JustNumbers"/>
       <span class="empty-message">*This field is required.</span>
       <span class="error-message">*This is not a valid phone.</span>
   </label>
   

   Kopieren Sie diesen Code und fügen Sie ihn am Ende des Tags </label>hinzu, damit sich das Feld “Fax” (“Fax”) unter dem Feld “Telefon” (“Phone”) befindet.

   Ersetzen Sie das Wort “phone” durch das Wort “fax” in allen Zeilen des neuen Codes:

   <label class="fax">
       <input type="text" placeholder="Fax:" data-constraints="@Required @JustNumbers"/>
       <span class="empty-message">*This field is required.</span>
       <span class="error-message">*This is not a valid fax number.</span>
   </label>
   

3. Um noch ein Feld “Organisation” (“Organization”)hinzuzufügen, markieren Sie den Code für das Feld “Name“ (“Name“), der so aussieht:

   <label class="name">
       <input type="text" placeholder="Name:" data-constraints="@Required @JustLetters" />
       <span class="empty-message">*This field is required.</span>
       <span class="error-message">*This is not a valid name.</span>
   </label>
   

   Kopieren Sie diesen Code und fügen Sie ihn am Ende des Tags </label>ein, damit sich das Feld “Organisation” (“Organization”) unter dem Feld “Name“ (“Name“) befindet.

   Ersetzen Sie das Wort “name“ durch das Wort “organization” in allen Zeilen des neuen Codes:

   <label class="organization">
       <input type="text" placeholder=" Organization:" data-constraints="@Required @JustLetters" />
       <span class="empty-message">*This field is required.</span>
       <span class="error-message">*This is not a valid organization.</span>
   </label> 
   

   Speichern Sie die Änderungen in der Datei .html.

4. Öffnen Sie die Datei TMForm.js aus dem Ordner ‘js’ und finden Sie die Zeile 121-125, die folgende Skript enthält:

   name:getValue($('label.name input'))
   ,email:getValue($('label.email input'))
   ,phone:getValue($('label.phone input'))
   ,fax:getValue($('label.fax input'))
   ,state:getValue($('label.state input'))
   

   Obwohl in dieser Skript schon notwendigen Zeilen für Felder “Fax” (“fax”) und “state” (“state”)sind, werden sie gewöhnlich in Standard-Kontaktformular nicht benutzt. Sie sollen noch eine ähnliche Zeile für das Feld “Organisation” (“оrganization”) hinzufügen.

   Kopieren Sie eine von den Zeilen des jeweiligen Skriptes, zum Beispiel, für das Feld “email”:

   , email:getValue($('label.email input'))
   

   Fügen Sie neue Zeile unter die kopierende ein und ersetzen Sie ‘email’ durch “оrganization”, damit im Ergebnis das Skript wird:

       
       name:getValue($('label.name input'))
       ,email:getValue($('label.email input'))
       ,phone:getValue($('label.phone input'))
       ,fax:getValue($('label.fax input'))
       ,organization:getValue($('label.organization input'))
       ,state:getValue($('label.state input'))
       ,message:getValue($('label.message textarea'))
     

   Scrollen Sie nach unten und ersetzen Sie das Symbol # durch Ihre E-Mail-Adresse in folgendem Skript:

    
   $(window).load(function(){
       $('#form').TMForm({
       ownerEmail:'#' 
       })
   })
   

   Speichern Sie die Änderungen.

5. Öffnen Sie MailHandler.php aus dem Ordner ‘bat’. In dieser Datei gibt es auch notwendige Zeilen für die Felder “Fax” (“fax”) und “state” (“state”). Für das Feld “Organisation” (“оrganization”) kopieren Sie erst und dann fügen Sie das Code-Feld “Name“ (“name“) ein:

    
   if($_POST['name']!='false'){
       $messageBody .= '<p>Visitor: ' . $_POST["name"] . '</p>' . "\n";
       $messageBody .= '<br>' . "\n";
   }
   

   Und ersetzen Sie “name“ durch “оrganization”, um folgendes Ergebnis zu bekommen:

    
   if($_POST['organization']!='false'){
       $messageBody .= '<p>Organization: ' . $_POST["organization"] . '</p>' . "\n";
       $messageBody .= '<br>' . "\n";
   }
   

   Speichern Sie die Änderungen.

6. Jetzt können Sie Ihre Webseite auf dem Server testen, um zu prüfen, wie neue Felder des Kontaktformulars funktionieren.

   

Sie können auch das ausführliche Video-Tutorial nutzen: