• Startseite
• Inhalt
• Index
• Quellen

Kontaktformular erstellen - Bilder neu

Die Erstellung von responsiven Websites mit Hilfe von RocketCake ist recht einfach. Aber das Hinzufügen von komplexeren Elementen zu einer Website, wie z. B. PHP-Code, könnte eine kleine Herausforderung sein, wenn Sie nicht wissen, wie man PHP programmiert. Dieses Tutorial zeigt Ihnen, wie Sie mit Hilfe von PHP ein Mail-Kontaktformular erstellen, das selbständig Mails versendet.

>>Einfügen >> Form Elemente >> Eingabefeld

>>Einfügen >> Form Elemente >> Web Formular

>>Einfügen >> Form Elemente >> Web Formular Button

Schritt 1: Starten Sie RocketCake und erstellen Sie eine einfache Website

Schritt 2: Erstellen Sie die Kontaktseite

Wenn Sie Ihre Website fertiggestellt haben, fehlt noch eine Kontaktseite, die wir jetzt hinzufügen werden. Klicken Sie auf die Schaltfläche "Seite hinzufügen" in der Symbolleiste, oder wählen Sie das Menü "Einfügen" -> "Seite hinzufügen".

Die neu erstellte Seite wird den Namen "UntitledWebpage.html" oder einen ähnlichen Namen haben, also benennen Sie sie in etwas um, das besser passt, zum Beispiel "contact.php". Beachten Sie, dass der neue Name mit ".php" anstelle von ".html" enden muss, sonst funktioniert Ihr Kontaktformular nicht. Sie können den Namen der Seite im Fenster 'Eigenschaften' auf der linken Seite ändern, dort sollte ein Eintrag 'Dateiname' zu finden sein.

Entwerfen Sie nun ein Kontaktformular auf dieser Seite. Verwenden Sie das Webform-Element, um einen Bereich zu erstellen, in dem Ihr Formular erscheinen soll. Sie finden es in der Werkzeugpalette, nachdem Sie auf die Schaltfläche "Mehr" geklickt haben:

Und verwenden Sie die Elemente "Textbearbeitungsfeld" und "Webformular-Schaltfläche", um ein Formular zu erstellen, das ungefähr so aussieht:

Verwenden Sie die Elemente "Einfügen - Form Elemente - Eingabefeld" und "Einfügen - Form Elemente - Web Formular/Web Formular Button", um ein Formular zu erstellen, das ungefähr so aussieht:

(Hinweis: Ich habe "Textausrichtung -> Rechts" für die Textfelder und die Schaltfläche verwendet, damit sie gut mit den Textbeschriftungen ausgerichtet sind, aber Sie können auch eine Tabelle oder ähnliches verwenden, um Ihr Formular so zu verschieben, dass es gut aussieht)

Beachten Sie, dass sich alle diese Elemente innerhalb des Elements "Webformular" befinden müssen, sonst funktioniert es nicht.

Jetzt müssen wir nur noch einige der Eigenschaften der erstellten Elemente einstellen, damit sie funktionieren. Klicken Sie auf den Hintergrund des Formulars, das "Web Form"-Element, und ändern Sie die Eigenschaft "Action" im Eigenschaftsfenster auf den Namen der von Ihnen erstellten Kontaktseite, in unserem Beispiel "contact.php".

Stellen Sie außerdem sicher, dass die "Method" auf "POST" und die "Encoding" auf "application/x-www-form-urlencoded" eingestellt ist.

Legen Sie dann die Namen der Textfelder so fest, dass sie ihren Inhalt beschreiben. Zum Beispiel "E-Mail" und "Text":

Wie Sie oben sehen können, sollten Sie auch die Option "Mehrzeilig" für den größeren Text auswählen, damit Ihre Besucher mehr als nur eine Zeile Text eingeben können.

Für die Schaltfläche "Senden" können Sie die Eigenschaft "Label" auf einen beliebigen Text setzen, aber stellen Sie sicher, dass "ButtonType" auf "Absenden" eingestellt ist.

Schritt 3: Erstellen Sie den PHP-Code

So, das war's, die Kontaktseite ist jetzt gestaltet. Das Einzige, was jetzt noch fehlt, ist der PHP-Code, der ausgelöst werden soll, sobald der Benutzer auf die Schaltfläche "Senden" klickt. In unserem Fall wollen wir, dass der Text einfach per E-Mail an uns gesendet wird.

Erstellen Sie nun einfach ein PHP-Code-Element und platzieren Sie es irgendwo auf Ihrer Seite:

Natürlich können Sie die Hintergrundfarbe und den Rahmenmodus ändern, damit es mehr nach Ihren Wünschen aussieht. In diesem Beispiel setzen wir den Hintergrund und den Rahmen einfach auf "none".

Doppelklicken Sie auf das neue PHP-Element oder klicken Sie mit der rechten Maustaste darauf und wählen Sie 'Code bearbeiten...', und fügen Sie den folgenden Code in den Dialog ein:

$text = "";

foreach($_POST as $name => $value)

{

   $text .= "$name : $value\n";

}

if ($text != "")

{

  echo 'Vielen Dank, dass Sie mit mir Kontakt aufgenommen haben.';

  mail("youremail@example.com", "Kontaktformular-Anfrage", $text);

}

Dies ist ein PHP-Code, der einfach den Text per E-Mail sendet, sobald der Besucher auf die Schaltfläche "Senden" klickt. Beachten Sie, dass am Ende des obigen Codes der Text youremail@example.com steht. Sie müssen diese E-Mail-Adresse durch Ihre E-Mail-Adresse ersetzen, damit die E-Mail an Sie gesendet wird.

Das war's im Grunde schon, Ihr Kontaktformular ist jetzt fertig.

Schritt 4: Testen Sie das Formular

Wenn Sie jetzt eine Vorschau Ihres Kontaktformulars aufrufen, "Veröffentlichen -> Vorschau", werden Sie feststellen, dass der PHP-Code, den Sie gerade geschrieben haben, auf der Seite erscheint. Machen Sie sich darüber keine Sorgen, das passiert nur in der Vorschau und ist so vorgesehen. Damit das Kontaktformular so funktioniert, wie Sie es wünschen, müssen Sie es auf einem Webserver ausführen, der PHP unterstützt. Wahrscheinlich haben Sie bereits einen Webserver mit PHP-Unterstützung, sonst hätten Sie diese Anleitung nicht durchlaufen. Laden Sie jetzt einfach Ihre Website auf diesen Webserver hoch, und wenn Sie alles wie in diesem Tutorial beschrieben gemacht haben, sollte Ihr Kontaktformular dann funktionieren.

Wenn Sie Fragen oder Kommentare dazu haben, besuchen Sie doch das RocketCake Forum.