Erstellen eines Webbuchungsformulars mit dem Smart Forms-Skript

() translation by (you can also view the original English article)

Buchungsformulare können vielen Zwecke auf einer Website dienen. Sie können sie verwenden, um Ihren Besuchern entweder die Buchung eines Hotelzimmers oder Tickets für eine beliebte Veranstaltung zu ermöglichen. Sie können auch für andere Dinge wie die Buchung von Terminen mit Kunden verwendet werden.

Sie sind eine großartige Möglichkeit für Menschen, Ihnen einfach alle notwendigen Informationen über ihren Aufenthalt oder Besuch zu geben und die Verfügbarkeit zu einem bestimmten Datum zu überprüfen. Das erspart Ihnen und Ihren Kunden viel Ärger.

Es gibt viele Plugins und Skripte für Sie, um Buchungsformulare zu Ihrer Website hinzuzufügen. Die richtige Wahl für Ihre Situation hängt von den Funktionen ab, die Sie suchen, sowie von Faktoren wie Benutzerfreundlichkeit und Budget. In diesem Tutorial zeige ich Ihnen, wie Sie ein Buchungsformular für Ihre Website mit dem Smart Forms-Skript von CodeCanyon erstellen.

Warum Smart Forms verwenden?

Bevor wir anfangen, tiefer in das Thema einzutauchen, möchte ich erklären, warum ich mich für diese Aufgabe für Smart Forms entschieden habe.

Eines der ersten Dinge, die Sie auf der Beschreibungsseite von Smart Forms beachten werden, ist, dass es eine Menge von Funktionen bietet und es Ihnen ermöglicht, alle Arten von Formularen zu erstellen. Es besteht eine gute Chance, dass die Website, die Sie erstellen, mindestens ein paar andere Arten von Formularen benötigt, z. B. ein Kontaktformular oder ein Kommentarformular. Mit Smart Forms können Sie all dies in kürzester Zeit erstellen.

Sie erhalten auch viele Optionen, wenn es um Anpassung und Funktionen geht. Das Skript wird regelmäßig aktualisiert und erhält immer wieder neue Funktionen. Es bietet auch eine große Anzahl von Starter-Vorlagen mit verschiedenen Formen in drei einzigartigen Stilen und Farbschemata. Auf diese Weise können Sie sicher sein, dass jede Form, die Sie erstellen, sich perfekt mit dem Rest Ihrer Webseite vermischt.

Was wir bauen werden

Erstellen wir das Front-End eines Buchungsformulars mit Smart Forms. Wir erstellen ein Formular, um Hotelzimmer zu buchen. Die gleichen Grundsätze gelten für die Erstellung eines Buchungsformulars für eine Veranstaltung oder eine andere Art von Formular. Sie müssen nur entsprechende Änderungen an Eingabefeldern vornehmen.

Hier ist, was wir erstellen werden:

Erste Schritte

Wenn Sie dies noch nicht getan haben, wäre der erste Schritt, das Skript von CodeCanyon zu kaufen. Sie können die Dateien herunterladen, nachdem Sie das Skript gekauft haben, und Sie haben auch Anspruch auf kostenlose lebenslange Updates und Support für 6 Monate.

Nachdem Sie die heruntergeladene .zip Datei extrahiert haben, werden Sie feststellen, dass sie bereits viele Vorlagen für alles enthält, das von einfachen Kommentar- und Kontaktformularen bis hin zu einigen mehrstufigen Formularen reicht. Sie können einfach eine dieser Vorlagen in Ihren Projekten verwenden und in zehn bis fünfzehn Minuten fertig sein.

Um Ihnen zu helfen, alle Grundlagen zu verstehen, erstellen wir unser Buchungsformular von Grund auf neu.

Erstellen des Buchungsformulars

Das Markup der Buchungsformularseite sollte am Anfang etwa so aussehen.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title> Booking Form - XYZ Hotels </title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="path/to/css/smart-forms.css">
        <link rel="stylesheet" href="path/to/css/font-awesome.min.css">      
  </head>
  <body>
 
        <!-- OUR BOOKING FORM MARKUP -->
 
  </body>
</html>

Smart Forms verlässt sich auf Font Awesome, um alle Symbole zum Formular hinzuzufügen, sodass Sie beide CSS-Dateien laden müssen.

Nun gehen wir zum Inhalt unseres Buchungsformulars über. Das Smart Forms-Framework unterteilt das Formular in drei Abschnitte: den Formularkopf, den Formulartext und die Formularfußzeile.

Der Formularkopfabschnitt oben wird verwendet, um den Formulartitel in einer vorzeigbaren Weise anzuzeigen. Für ein Buchungsformular können Sie so etwas wie Online-Zimmer buchen oder Reservierungen in wenigen Minuten vornehmen.

Der Formkörper enthält eine Reihe von Elementen, die von den Besuchern ausgefüllt werden müssen. Sie können hier nach relevanten Informationen fragen, wie die Anzahl der erwachsenen Gäste und die Anzahl der begleitenden Kinder. Ebenso können Sie nach deren Aufenthaltsdauer, Kontaktinformationen und anderen notwendigen Details fragen.

Der Abschnitt "Formularfußzeile" enthält die Schaltflächen zum Absenden oder Abbrechen des Formulars. Er wird prominent am unteren Rand des Formulars angezeigt.

Hinzufügen des Smart Form Boilerplate

Hier ist das Formular-Markup, das wir im Text unserer Webseite hinzufügen müssen, um unser Buchungsformular anzuzeigen.

<div class="smart-wrap">
  <div class="smart-forms smart-container wrap-2">
  
    <div class="form-header header-primary">
      <h4><i class="fa fa-calendar"></i>Make Room Reservations in Minutes</h4>
    </div>
    
    <form method="post" action="/" id="contact">
      <div class="form-body">
      
       <!-- OUR FORM ELEMENTS WILL GO HERE -->                                                
        
      </div>
      <div class="form-footer">
        <button type="submit" class="button btn-primary">Confirm Booking</button>
        <button type="reset" class="button">Cancel</button>
      </div>
      
    </form>
    
  </div>
</div>

Mit all dem Markup, das wir bisher zu unserer Seite hinzugefügt haben, sollten Sie etwas Ähnliches wie das Bild unten erhalten.

Erstellen der Formularkomponenten

Fügen Sie jetzt unsere aktuellen Formularelemente zum Buchungsformular hinzu. Dies ist das Markup, das Sie dazu benötigen. Es wird in das div-Tag mit Klasse form-body gehen.

<div class="section">
  <label for="guestname" class="field-label">Please Enter Your Name</label>
  <label for="guestname" class="field prepend-icon">
    <input type="text" name="guestname" id="guestname" class="gui-input" required="" placeholder="John Doe/Jane Doe">
    <span class="field-icon"><i class="fa fa-user"></i></span>  
  </label>
</div>
              
<div class="frm-row">
  <div class="section colm colm6">
    <label for="guestemail" class="field-label">Email Address</label>
    <label for="guestemail" class="field prepend-icon">
      <input type="email" name="guestemail" id="guestemail" class="gui-input" required="" placeholder="john@something.com">
      <span class="field-icon"><i class="fa fa-envelope"></i></span>  
    </label>
  </div>
  
  <div class="section colm colm6">
    <label for="guestelephone" class="field-label">Telephone / Mobile</label>
    <label for="guestelephone" class="field prepend-icon">
      <input type="text" name="guestelephone" id="guestelephone" class="gui-input" required="" placeholder="Telephone / Moble Number">
      <span class="field-icon"><i class="fa fa-phone-square"></i></span>  
    </label>
  </div>
</div>

<div class="frm-row">
  <div class="section colm colm6">
    <label for="adults" class="field-label">Number of Adults</label>
    <label for="adults" class="field prepend-icon">
      <input type="number" id="adults" name="adults" class="gui-input" required="" placeholder="Number of adults">
      <span class="field-icon"><i class="fa fa-users"></i></span>  
    </label>
  </div>
  
  <div class="section colm colm6">
    <label for="children" class="field-label">Number of Children</label>
    <label for="children" class="field prepend-icon">
      <input type="number" id="children" name="children" class="gui-input" required="" placeholder="Number of children">
      <span class="field-icon"><i class="fa fa-users"></i></span>  
    </label>
  </div>
</div>

<div class="frm-row">
  <div class="section colm colm6">
    <label for="checkin" class="field-label">Check-in Date</label>
    <label for="checkin" class="field prepend-icon">
      <input type="text" id="checkin" name="checkin" class="gui-input" required="" placeholder="mm/dd/yyyy">
      <span class="field-icon"><i class="fa fa-calendar"></i></span>  
    </label>
  </div>
  
  <div class="section colm colm6">
    <label for="checkout" class="field-label">Check-out Date</label>
    <label for="checkout" class="field prepend-icon">
      <input type="text" id="checkout" name="checkout" class="gui-input" required="" placeholder="mm/dd/yyyy">
      <span class="field-icon"><i class="fa fa-calendar"></i></span>  
    </label>
  </div>
</div>

<div class="spacer-t20 spacer-b30">
  <div class="tagline"><span>Please answer these questions for a pleasant stay</span></div>
</div>

<div class="frm-row">
  <div class="option-group field">
  
    <div class="section colm colm6">
      <label class="switch">
        <input type="checkbox" name="switch1" id="switch1" value="switch1">
        <span class="switch-label" data-on="YES" data-off="NO"></span>
        <span>Will you be bringing a pet?</span>
      </label>
    </div>
        
    <div class="section colm colm6">
      <label class="switch">
        <input type="checkbox" name="switch2" id="switch2" value="switch2">
        <span class="switch-label" data-on="YES" data-off="NO"></span>
        <span>Do you need us to pick you up?</span>
      </label>
    </div>
              
  </div>
</div>



<div class="section">
  <label for="comment" class="field-label">Anything else we should know about?</label>
  <label for="comment" class="field prepend-icon">
    <textarea class="gui-textarea" id="comment" name="comment" placeholder="Let us know about any special accommodation needs"></textarea>
    <span class="field-icon"><i class="fa fa-comments"></i></span>
    <span class="input-hint"> 
      <strong>Please:</strong> Be as descriptive as possible
    </span>   
  </label>
</div>

Wenn das gesamte Markup in das Formular eingefügt wurde, sollte es nun wie das Bild unten aussehen.

Es mag jetzt wie eine Menge Code erscheinen, aber Sie können den größten Teil davon aus verschiedenen Startervorlagen kopieren. Danach müssen Sie einfach kleine Änderungen am Markup vornehmen, um es anzupassen. Sie können z. B. die Klasse der Font Awesome-Symbole einfach ändern, um Eingabefelder genauer zu repräsentieren.

Es ist wichtig, sich daran zu erinnern, dass Sie vorsichtig sein sollten, wenn Sie einige Attribute der Formularelemente ändern, da sich dies auf das allgemeine Erscheinungsbild oder Verhalten des Formulars auswirkt. Sie können z. B. die Breite verschiedener Elemente ändern, indem Sie die colm-Klassen ändern. Wenn zwei Eingabeelemente in einer Zeile die Klassen colm8 und colm4 aufweisen. Ihre Breite würde im Verhältnis 2:1 stehen. Wenn sich die Ziffern nicht zu 12 addieren, sehen Sie auch in dieser Zeile einen Leerraum.

Wenn Sie den Wert des name-Attributs eines Feldes auf dem Front-End ändern, stellen Sie sicher, dass Sie die entsprechenden Werte in den PHP-Dateien auf Ihrem Back-End ändern. Auf diese Weise verlieren Sie keine Formulardaten, die von Benutzern ausgefüllt werden.

Hinzufügen der Validierung zu unserem Buchungsformular

Das Smart Forms-Framework basiert auf Core-jQuery und vielen anderen jQuery-bezogenen Plugins, um Ihnen verschiedene Funktionen wie eine Monats- und Zeitauswahl oder die Möglichkeit zum Ziehen und Ablegen von Dateien zu bieten. Es gibt insgesamt 22 verschiedene JavaScript-Dateien, die Sie verwenden können, um die Funktionalität des Formulars zu verbessern.

Stellen Sie sicher, dass Sie nur die Dateien einschließen, die für das Funktionieren des Formulars erforderlich sind. Die Funktion jeder dieser Dateien wird in der Dokumentation erwähnt. In unserem Fall müssen wir die Kerndatei jQuery, die jQuery-UI-Datei und Formularvalidierungsdateien einschließen.

Sie können einfach den folgenden Code zu Ihrer Webseite hinzufügen, um alle JavaScript-Dateien einzuschließen. Sie können es entweder im Head des Dokuments oder kurz vor dem Ende des Bodys platzieren.

1	<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
2	<script type="text/javascript" src="js/jquery-ui-custom.min.js"></script>
3	<script type="text/javascript" src="js/jquery.validate.min.js"></script>
4	<script type="text/javascript" src="js/additional-methods.min.js"></script>

Nachdem Sie die Dateien hinzugefügt haben, müssen Sie Code hinzufügen, der den Validierungsprozess beginnt oder der Formularbenutzeroberfläche weitere Elemente wie eine Datumsbereichsauswahl hinzufügen kann. Hier ist der Code, den Sie hinzufügen müssen.

<script type="text/javascript">
$("#booking-form").validate();

$("#checkin").datepicker({
        defaultDate: "+1w",
        changeMonth: false,
        numberOfMonths: 1,
        prevText: '<i class="fa fa-chevron-left"></i>',
        nextText: '<i class="fa fa-chevron-right"></i>',
        onClose: function( selectedDate ) {
                $( "#checkout" ).datepicker( "option", "minDate", selectedDate );
        }
});

$("#checkout").datepicker({
        defaultDate: "+1w",
        changeMonth: false,
        numberOfMonths: 1,
        prevText: '<i class="fa fa-chevron-left"></i>',
        nextText: '<i class="fa fa-chevron-right"></i>',                    
        onClose: function( selectedDate ) {
                $( "#checkin" ).datepicker( "option", "maxDate", selectedDate );
        }
});
</script>

Sie müssen booking-form durch die ID ersetzen, die Sie für Ihr Formular festgelegt haben, und es beginnt automatisch mit der Validierung der Felder. Die folgende Abbildung zeigt, wie die Fehlermeldungen standardmäßig angezeigt werden, nachdem Sie mit der Validierung begonnen haben.

Sie können beim Initialisieren der Datumsauswahl einige Optionen übergeben. Sie bestimmen die Benutzeroberfläche des Kalenders, z. B. die Anzahl der anzuzeigenden Monate oder das Datum, ab dem die Kalender angezeigt werden sollen. Wenn Sie z. B. defaultDate auf +100w setzen, werden die Kalender 100 Wochen in der Zukunft geöffnet.

Eine weitere Sache, die es wert ist, bemerkt zu werden, ist, dass der Eincheckkalender, nachdem Sie ein Datum ausgewählt haben, das Mindestdatum für den Auscheckkalender als das ausgewählte Datum festlegt. Dies geschieht durch die Rückruffunktion, die an das onClose-Ereignis angefügt ist. Der Auscheckkalender tut etwas Ähnliches, legt jedoch das maximale Datum für den Eincheckkalender fest.

Abschließende Gedanken

In diesem Tutorial haben wir gelernt, wie man ein Buchungsformular mit dem Smart Forms-Skript erstellt, das auf CodeCanyon verfügbar ist. Während des Prozesses haben wir einige Grundlagen abgedeckt, um schnell loszulegen und eigene einzigartige Formulare zu erstellen. Wie Sie sehen können, ist es mit Smart Forms sehr einfach, schön aussehende Formulare mit Eingabevalidierung und anderen Verbesserungen zu erstellen.

Mit dem Smart Forms-Framework können Sie viel mehr als nur Buchungsformulare erstellen. Der Prozess des Erstellens des Markups und hinzufügen von JavaScript-Funktionen wird ähnlich bleiben, wie wir hier behandelt haben. Wenn Sie einmal nicht weiterkommen, hilft Ihnen die ausführliche Dokumentation weiter. Sie erhalten außerdem sechs Monate lang Zugang zu kostenlosem Support, so dass es sehr einfach ist, herauszufinden, wie man ein Formular zum Laufen bringt.

Mein Rat wäre, dass Sie zunächst kleine Änderungen an den in der Download-Datei bereitgestellten Startvorlagen vornehmen und dann beginnen, benutzerdefinierte Formulare von Grund auf neu zu erstellen.