JS Animated. Wie man das Kontaktformular zur Seite hinzufügt

Von diesem Tutorial erfahren Sie, wie man das Kontaktformular zur Seite in Ihrer JS-animierten Vorlage hinzufügt:

Führen Sie die folgenden Schritte aus:

1. Finden Sie die Seite, die das Kontaktformular darstellt.

2. Nutzen Sie FTP, finden Sie auf dem Server die index.html Datei der Seite, an der Sie die Änderungen vornehmen möchten.

3. Laden Sie die Datei index.html aus dem Kontaktformular und die Datei .html der Seite, zu der Sie das Kontaktformular hinzufügen möchten, herunter.

4. Öffnen Sie die Dateien in jedem Codee-Editor.

5. Finden Sie den Code des Kontaktformulars. Zum Beispiel:

   <section class="well1 well1__ins">
               <div class="container">
                   <h4 class="h4_line">contact us <span class="line"></span></h4>
   
                   <h2>contact information</h2>
   
                   <div class="row off3 ">
                       <form class='mailform' method="post" action="bat/rd-mailform.php">
                           <input type="hidden" name="form-type" value="contact"/>
                           <fieldset>
                               <div class="col-md-12 col-sm-12 col-xs-12">
                                   <label data-add-placeholder="">
                                       <input type="text"
                                              name="name"
                                              placeholder="Your Name"
                                              data-constraints="@LettersOnly @NotEmpty"/>
                                   </label>
                               </div>
                               <div class="col-md-6 col-sm-12 col-xs-12">
                                   <label data-add-placeholder="">
                                       <input type="text"
                                              name="email"
                                              placeholder="Your Email"
                                              data-constraints="@Email @NotEmpty"/>
                                   </label>
                               </div>
                               <div class="col-md-6 col-sm-12 col-xs-12">
                                   <label data-add-placeholder="">
                                       <input type="text"
                                              name="phone"
                                              placeholder="Your Phone Number"
                                              data-constraints="@Phone"/>
                                   </label>
                               </div>
   
                               <div class="col-md-12 col-sm-12 col-xs-12 off">
                                   <label class="textarea" data-add-placeholder="">
                                       <textarea name="message" placeholder="Your Message"
                                                 data-constraints="@NotEmpty"></textarea>
                                   </label>
                               </div>
   
                               <div class="col-md-12 col-sm-12 col-xs-12 off2">
                                   <div class="mfControls">
                                       <button class="btn btn-sm" type="submit">Send</button>
                                   </div>
                               </div>
                           </fieldset>
                       </form>
                   </div>
               </div>
           </section>
   </code>
   

6. Kopieren Sie und fügen Sie diesen Code in die index-Seitendatei ein, um das Kontaktformular zu ihr hinzuzufügen.

7. Öffnen Sie die index-Seitendatei, wo ursprünglich das Kontaktformular angezeigt war, und kopieren Sie die folgende Codezeile. Diese Zeile fügt Stile für das Kontaktformular auf der neuen Seite hinzu:

   <link rel="stylesheet" href="css/mailform.css">
   

8. Sie sollen die Datei speichern und auf den Server hochladen. Ersetzen Sie die vorhandene Datei.

9. Aktualisieren Sie und überprüfen Sie die Seite Ihrer Website.

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