chloe

Beschreibung

"chloe" ist das erste Bootstrap Kontaktformular.

Es wurden die CSS Eigenschaften bzw. die HTML Strukturen von Bootstrap verwendet, damit lässt sich "chloe" perfekt in eine Bootstrap Webseite integrieren.

Bei diesem einfachen und dennoch professionellen Kontaktformular werden der Name und die E-Mail Adresse des Absenders, der Betreff und die eigentliche Nachricht abgefragt. Zusätzlich kann man ein Auswahlfeld mit dem Empfänger einbauen. Mit einem Captcha werden Spam-Mails verhindert.

Die Anzahl der Felder wurde auf ein Minimum beschränkt, sodass es sowohl in der kostenlosen LITE-Version als auch in der FULL-Version (Vollversion) verwendet werden kann.

Top Features

• Bootstrap Look
• funktioniert auch in der LITE Version
• alle Eingabefelder aktivieren bzw. deaktivieren
• zusätzliche einstellbare Parameter (Sprache, Zeichencodierung und zu ladende CSS)
• 2 Sprachen (deutsch und englisch)

Liste der eingebauten Formularfelder

Nr.	Label	Name	Type	aktiv *	Pflichtfeld *
1	Name	name	input
2	E-Mail Adresse	absendermail	email
3	Empfängerauswahl	select-empfaenger	select-empfaenger
4	Betreff	betreff	input
5	Nachricht	message	textarea
6 7	Sicherheitscode	captcha-img captcha-input	captcha input		-
8	Senden	b4yf_submit	button	-	-

* In der Grundausstattung so eingestellt. Kann aber im Administratorbereich geändert werden.

"chloe" einrichten

Konfiguration der Bootstrap CSS mit dem Bootstrap Customizer

Die CSS Dateien bootstrap.css, bootstrap.min.css, bootstrap-theme.css und bootstrap-theme.min.css (die sich im Unterordner chloe/css/bootstrap/css/ befinden) wurden mit dem Bootstrap Customizer in den Grundfarben und nur mit allen notwendigen CSS Eigenschaften erstellt.

Um sich sein eigenes Style bzw. die eigenen Farben zu erstellen, benötigt man die Source Datei /chloe/css/bootstrap/config.json. Diese ladet man zuerst in den Bootstrap Customizer und passt danach seine gewünschten Attribute an. Wenn alle Einstellungen vorgenommen wurden, kann man am Seitenende die neuen CSS Dateien generieren lassen und als gepacktes ZIP Archiv downloaden. Dann nur noch diese ZIP Datei entpacken und auf den Server in das Verzeichnis /chloe/css/ hochladen (existierende Dateien überschreiben). Jetzt das phpContact Formular neu laden und das neue Design bewundern.

Einbau per include oder require in eine bestehende Bootstrap Homepage

Da sich in einer bestehenden Bootstrap Homepage schon die notwendigen CSS Dateien befinden, sollten diese nicht nochmals durch phpContact bzw. "chloe" geladen werden. Außerdem werden für "chloe" die Farben der Homepage übernommen und das Formular wird automatisch an das Design angepasst.

Dazu muss im phpContact Administratorbereich bei den Konfigurationseinstellungen des chloe Templates der Punkt CSS Variante: "only_system" gewählt werden. Somit werden nur die notwendigen CSS Deklarationen für das Layout geladen.

Zusätzliche Informationen

History

• v1.2 [17.05.2017]

  • Captcha Designänderung
  • und einige andere CSS Änderungen

• v1.1 [06.05.2017]

  • neues Captcha

• v1.0 [21.05.2015]

  • first Release