Juergens-Workshops.de Forum
Kontaktformular - Druckversion

+- Juergens-Workshops.de Forum (https://forum.juergens-workshops.de)
+-- Forum: HTML und Co (https://forum.juergens-workshops.de/forumdisplay.php?fid=62)
+--- Forum: Webeditoren (https://forum.juergens-workshops.de/forumdisplay.php?fid=85)
+--- Thema: Kontaktformular (/showthread.php?tid=36306)

Seiten: 1 2 3 4 5 6 7 8


Kontaktformular - koter - 30.05.2015

Hallo Markus,

MarSch schrieb:Ich habe mir das jetzt mal genauer angesehen, der CSS Code muss ja in ein HTML Dokument, der wirkt dann ja nicht auf die Textzeilen des PHP Dokumentes das über das HTML Dokument in einen iframe geladen wird...

Du kannst in PHP-Dateien auch HTML verwenden. Das HTML wird dann, so wie es ist, vom Server an den Browser weitergeleitet.

Das PHP im Dokument, also das was zwischen „<?php“ und „?>“ steht wird vom PHP-Parser des Servers in HTML (und oder Javascript, CSS usw.) übersetzt un dann an den Browser weitergeleitet. Im Browser kommt also nur HTML an, und der formt dann daraus die Seite.

MarSch schrieb:Der PHP Code läuft auch nicht wenn ich ihn direkt im HTML Dokument ausführe, habe ich probieret, du sagtest ja auch das da bestimmte Funktionen vom Server/Anbieter her zugelassen sein müssen...
Ich müßte jetzt PHP-Gestaltungsbefehle im PHP Dokument verwenden, oder?

PHP-Gestaltungsbefehle sind mir nicht bekannt. Das wäre aber auch doppelt gemoppelt denn zum Gestalten gibt es ja schon CSS.

Der Inhalt der PHP-Datei, die ich in den IFrame geladen habe sieht so aus:
[HTML]
<?php header('Content-Type: text/html; charset=utf-8'); /* AN OBERSTER STELLE BELASSEN, WENN DU KEIN UTF-8 NUTZT, LÖSCHEN! */ ?>

<!-- Hier kann der Inhalt deiner Seite vor das Kontaktformular platziert werden -->
<html>
<head>
<style type="text/css">
body{
font-family:Arial, Helvetica, sans-serif;
}
textarea{
font-family:Arial, Helvetica, sans-serif;
height: 220px;
width: 250px;
}
input {
font-family: Arial, Helvetica, sans-serif;
height: 22px; width: 250px;
padding: 3px;
}
#Sendeknopf{
font-family: Arial, Helvetica, sans-serif;
height: 32px; width: 50px;
padding: 3px;
}
#Formularrahmen{
width: 360px;
border:1px solid black;
background-color:cornsilk;
margin-left:auto;
margin-right:auto;
padding:10px;
}
</style>
</head>
<body>
<div id="Formularrahmen">
<?php
/* http://www-coding.de/individuelles-k...aptcha-in-php/ (MEHR INFORMATIONEN UND ANLEITUNG)
*
* [VERSION OHNE CAPTCHA]
*
* Dieser 1. Teil kann angepasst werden, um die Formularfelder zu beeinflussen ($fields)
* Außerdem solltest Du in $adminMail deine E-Mail-Adresse speichern
* $formTitle beinhaltet die Überschrift des Formulars
* In $msgInfo ist der Hinweistext gespeichert, der angezeigt werden soll
* $msgError wird angezeigt, wenn nicht alle Pflichtfelder ausgefüllt wurden
* $msgSent hingegen beinhaltet eine Erfolgsmeldung, wenn die Anfrage verschickt wurde
*/

$adminMail = 'markus@xyz.de';

$formTitle = '';
$msgInfo = '';
$msgError = 'Sorry, something went wrong. Please try again!';
$msgSent = 'Message successfully send!';

$fields = array (
// 'Feldname' => Typ, Pflichtfeld?, Ergänzungen (z.B. bei select-Feld)
'Name' => array('text', true),
'E-Mail' => array('text', true),
'About' => array('text', false),
'Message' => array('textarea', true),
);

/* Funktion um aus den Feldnamen eine URL-Form zu erstellen (AB HIER BITTE NUR NOCH EVENTUELLE TEXTE ANPASSEN) */
function field2url($fieldname) {
return "f_".preg_replace('/([^a-z0-9-_]+)/', '', strtolower($fieldname));
}

/* Ausgabe des Formulars */
if (isset($_POST['send'])) {
// 2. Eingaben prüfen //
$mailSubject = 'Nachricht über das Kontaktformular';
$mailText = "Das Kontaktformular deiner Website wurde dazu verwendet, Dir diese Nachricht zukommen zulassen.\r\n\r\n";
$mailHeader = "From: kontaktformular@".$_SERVER['HTTP_HOST']."\r\n"."Content-type: text/plain; charset=utf-8"."\r\n";

// Einzelne Felder auslesen //
foreach ($fields AS $name => $settings) {
if ( !( !$settings[1] || ( $settings[1] && isset($_POST[field2url($name)]) && $_POST[field2url($name)] != '' ) ) ) {
// Pflichtfeld nicht ausgefüllt => Abbruch //
$sent = false;
break;
} else if ($_POST[field2url($name)] != '') {
// Inhalt (wenn nicht leer) in die E-Mail schreiben //
$mailText .= $name.": ".$_POST[field2url($name)]."\r\n";
}
}

// Kurzer Spam-Check //
if (isset($_POST['email']) && $_POST['email'] != '') {
// Bot => Abbruch //
$sent = false;
}

if (!isset($sent)) {
// Nach erfolgreicher Überprüfung E-Mail verschicken //
mail($adminMail, $mailSubject, $mailText, $mailHeader);

echo "<h1>".$formTitle."</h1>" .
"<p>".$msgSent."</p>";

$sent = true;
}
} else
$sent = false;

if (!$sent) {
// 3. Formular ausgeben (Beginn des Formulars) //
echo "<h1>".$formTitle."</h1>" .
"<p>".$msgInfo."</p>" .
((isset($_POST['send'])) ? $msgError : '') .
"<form action=\"?".$_SERVER['QUERY_STRING']."\" method=\"POST\">" .
'<table>';

// Felder auslesen //
foreach ($fields AS $name => $settings) {
// Ausgabe je nach Typ //
switch ($settings[0]) {
case 'select':
// Select-Feld //
echo "<tr><td>".$name.":".(($settings[1]) ? ' (*)' : '')."</td><td><select name=\"".field2url($name)."\">";

// Select-Felder auslesen //
foreach ($settings[2] AS $f) {
echo "<option".((isset($_POST[field2url($name)]) && $_POST[field2url($name)] == $f) ? ' selected' : '').">".$f."</option>";
}

// Ende des Select-Feldes //
echo '</select></td></tr>';
break;

case 'text':
// Einfaches Text-Feld //
echo "<tr><td>".$name.":".(($settings[1]) ? ' (*)' : '')."</td><td><input type=\"text\" name=\"".field2url($name)."\" value=\"".((isset($_POST[field2url($name)])) ? htmlspecialchars($_POST[field2url($name)]) : '')."\" /></td></tr>";
break;

case 'textarea':
// Mehrzeiliges Textfeld //
echo "<tr><td>".$name.":".(($settings[1]) ? ' (*)' : '')."</td><td><textarea rows='6' cols='40' name=\"".field2url($name)."\">".((isset($_POST[field2url($name)])) ? htmlspecialchars($_POST[field2url($name)]) : '')."</textarea></td></tr>";
break;

case 'checkbox':
// Checkbox //
echo "<tr><td>".$name.":".(($settings[1]) ? ' (*)' : '')."</td><td><label><input type=\"checkbox\" name=\"".field2url($name)."\" value=\"gesetzt\" ".((isset($_POST[field2url($name)]) || $setttings[1]) ? 'checked ' : '')."/> ".((isset($settings[2])) ? $settings[2] : '')."</td></label></tr>";
break;
}
}

// Formular-Ausgabe abschließen //
echo '</table>' .
'<input type="text" name="email" style="display:none;" />' .
'<input type="hidden" name="send" value=1 />' .
'<input id="Sendeknopf" type="submit" value="Send" />'.
'</form>';
}


?>
</div>
</body>
</html>
[/HTML]

Das ist genau der Code den Du hier eingestellt hast, nur durch ein paar HTML- und CSS-Zeilen erweitert.

Auf Deine anderen Fragen werde ich morgen antworten. Jetzt muss ich leider weg.

Gruß

Koter


Kontaktformular - MarSch - 30.05.2015

Bin jetzt ein Stück weiter, habe das PHP-Formular in einen div gesetzt, nicht den iframe sondern die PHP-Seite die dort hinnein geladen wird, habe im div folgendes eingefügt:

<div style="margin-left:300;">

darauf reagiert der Inhalt aber ich möchte ja das Konatktformular nicht 300px vom Rand haben sondern mittig ausgerichtet, welchen Befehl nehme ich da?


Kontaktformular - koter - 31.05.2015

Hallo Markus,

MarSch schrieb:...Das "From:kontaktformular@localhost" wäre doch dann als Absender E-Mail in der richtigen Mail, ja? Kann man da auch gleich von PHP die des Absenders eintragen lassen so das ich nur auf antworten klicken muss?

Das würde ich so nicht machen. Es wäre ja dann eine gefälschte Absenderadresse. Die Mail wird ja später von dem Server Deines Hosters versendet und nicht von dem E-Mail-Anbieter des Verfassers.

Du kannst dem Mail-Header aber eine Antwortadresse (Reply-To) hinzufügen. Dann würde bei einem Klick auf „Antworten“ in Deinem Mailclient auch Dem Verfasser geantwortet.

Im PHP-Quelltext müsstest Du dazu die Variable $mailHeader so belegen:

PHP-Code:
$mailHeader "From: kontaktformular@".$_SERVER['HTTP_HOST']."\r\n"."Reply-To: ".$_POST['f_e-mail']."\r\n"."Content-type: text/plain; charset=utf-8"."\r\n"

MarSch schrieb:PS: Irgendwie recht unscharf weil klein gerechnet, kann ich das was dran ändern?

Sicher: nur das Wesenliche des Screenshots zeigen und nicht so klein rechnen! ;-)

MarSch schrieb:Bin jetzt ein Stück weiter, habe das PHP-Formular in einen div gesetzt...
<div style="margin-left:300;">
...welchen Befehl nehme ich da?

So hab ich das auch gemacht: Das Kontaktformular in ein DIV mit der ID „Formularrahmen“ gesetzt und den margin-Befehl im CSS der ID verwendet. Wie genau, kannst Du im Code aus Beitrag 16 sehen.

Gruß

Koter


Kontaktformular - MarSch - 31.05.2015

Guten Morgen Koter,

vielen Dank für die "Reply to" Option, die wird natürlich umgesetzt, ist eine bessere Lösung als gleich die E-Mail vom "Anfragenden" als Absender einzusetzen, stimmt.

Zum Screenshot, ich wollte es so groß haben weil man sehen sollte das links der Code im Rahmen steht (WebPlus X8) und rechts in dem Rahmen dann der Inhalt und wie er positioniert ist... Kleingerechnet habe ich nichts, das hat der Uploader der Seite gemacht. Kann man das einstellen? Ich werde für die nachfolgenden Fragen/Aussagen noch einen einstellen, reicht diesmal auch ein kleinerer...

Ich habe gestern nochmal weiter experimentiert weil mir nicht aufgefallen ist an den CSS-Befehlen das der Div "Formularrahmen" heißen muss, hatte ich übersehen und nur das CSS eingefügt... Vielen Dank jetzt wird es zentriert dargestellt. Danke, danke, danke.

Jetzt ist nur noch der Sendeknopf etwas außer Kurs, was kann ich da machen? Er ist zwar zentriert aber bei seiner Länge sieht es unschön aus...(siehe Screenshot)

Wenn ich die Länge der Inputfelder verändere verändert sich der Send-Button mit, kann ich das getrennt halten?

Kann ich irgendwo abstellen das das Nachrichtenfeld vom "Surfer" größenmäßig veränderbar ist? Das ist ungünstig wenn es in einem "iframe-rahmen" läuft... Der IE macht nur einen Scrollbalken, das ist ok aber der FireFox läßt eben auch eine Größenänderung des Feldes zu...

Kann ich irgendwo einstellen das die Bezeichnung des Feldes über dem Feld statt daneben steht? Mit <br>?

Was macht eigentlich der Befehl "padding"?

Grüße und VIELEN DANK nochmal...
Markus


Kontaktformular - koter - 31.05.2015

Hallo Markus,

MarSch schrieb:...Kann man das einstellen? Ich werde für die nachfolgenden Fragen/Aussagen noch einen einstellen, reicht diesmal auch ein kleinerer...

Das kann ich Dir leider auch nicht sagen, ich benutze für Bilder im Forum meistens abload.de, das wurde hier einmal empfohlen. Aber trotzdem sollten die Bilder nicht zu groß sein, das würde das Foren-Layout zerreißen.

MarSch schrieb:...Wenn ich die Länge der Inputfelder verändere verändert sich der Send-Button mit, kann ich das getrennt halten?...

Ja, Du kannst dem Knopf eine ID geben, und dann eigenes CSS dafür schreiben, so wie ich das in Beitrag 21 gezeigt habe.

MarSch schrieb:...Kann ich irgendwo abstellen das das Nachrichtenfeld vom "Surfer" größenmäßig veränderbar ist?...

Ja, Du kannst im CSS für die textarea den Befehl „resize: none“ hinzufügen.

MarSch schrieb:Kann ich irgendwo einstellen das die Bezeichnung des Feldes über dem Feld statt daneben steht? Mit <br>?

Mit „<br>“ geht das nicht, die Formularfelder stehen ja in einer HTML-Tabelle.
Du kannst die Bezeichnung aber von PHP in die selbe Zelle schreiben lassen, in der schon die textarea liegt:

PHP-Code:
case 'textarea':
 
// Mehrzeiliges Textfeld //
 
echo "<tr><td>".""."</td><td>".$name.":".(($settings[1]) ? ' (*)' '')."<textarea name=\"".field2url($name)."\">".((isset($_POST[field2url($name)])) ? htmlspecialchars($_POST[field2url($name)]) : '')."</textarea></td></tr>";
 break; 

MarSch schrieb:Was macht eigentlich der Befehl "padding"?

Da schau Dir mal den Artikel bei SELFHTML an, besser kann ich das auch nicht erklären.

Gruß

Koter


Kontaktformular - MarSch - 01.06.2015

Hallo Koter,

vielen Dank für die vielen Tipps wieder... :sei_gepriesen:

Das mit dem Send Button hatte ich wieder mal übersehen, habe zwar auch hier das CSS kopiert aber nicht die ID vom Knopf geändert so das ihm das CSS zugewisen werden kann. Das letzte Mal als ich mich mit Webseiten beschäftigt habe war das ohne die "IDs"... Ist 15 oder 20 Jahre her... Smile

Resize:none hat funktioniert. Danke.

Das mit dem Text über dem Eingabefeld hat nicht ganz funktioniert, ich habe deine Zeilen mal verglichen zu den original Zeilen und folgende Änderung festgestellt:

ORIGINAL:
echo "<tr><td> ".$name.":".(($settings[1]) ? ' (*)' : '')."</td><td><textarea name=\"".field2url($name)."\">".((isset($_POST[field2url($name)])) ?
KOTER:
echo "<tr><td>".""."</td><td>".$name.":".(($settings[1]) ? ' (*)' : '')." <textarea name=\"".field2url($name)."\">".((isset($_POST[field2url($name)])) ?

Darauf hin habe ich dann die beiden Zeilen so geändert:

Für Name, E-Mail und Betreff:
case 'text':
// Einfaches Text-Feld //
echo "<tr><td>".""."</td><td>".$name.":".(($settings[1]) ? ' (*)' : '')."<input type=\"text\" name=\"".field2url($name)."\" value=\"".((isset($_POST[field2url($name)])) ?
htmlspecialchars($_POST[field2url($name)]) : '')."\" /></td></tr>";
break;

Für Message:
case 'textarea':
// Mehrzeiliges Textfeld //
echo "<tr><td>".""."</td><td>".$name.":".(($settings[1]) ? ' (*)' : '')."<textarea name=\"".field2url($name)."\">".((isset($_POST[field2url($name)])) ?
htmlspecialchars($_POST[field2url($name)]) : '')."</textarea></td></tr>";
break;

Was das Ergebnis vom Screenshot (3) gebracht hat. Wo habe ich den Fehler?

Davon mal ab, sollte mir das Ergebnis mit dem Text über dem Eingabefeld rein optisch nicht gefallen, wie kan nich erreichen das die Beschriftung, in diesem Fall "Message" (Screenshot 4) nach oben zum Eingabefeldanfang rückt?

Grüße
Markus


Kontaktformular - MarSch - 01.06.2015

Hmm, da habe ich noch ein Frage die aus zwei Unterpunkten besteht, vielleicht falsch hier an dieser Stelle dann sag's und ich mache ein neues Thema auf...

Wenn ich eine Domain habe und die auch dort Hoste, also Domain und Hosting bei einem Anbieter kaufe, die z.B. xyz.de heißt, die leite ich dann ja dort intern auf den Servern des Anbieters auf meine index.html... Kann ich es irgendwie so anstellen das nur die immer oben im Browserfenster in der Adresszeile steht statt die Unterseiten angehängt wie xyz.de/index.html oder so...?

Das gleich auch für eine weitergeleitete Adresse, sagen wir mal ich habe bei dem obrigen Anbieter einen Hostingvertragh für 2 Domains, also ja auch dementsprechend die Möglichkeit 2 index.html Seiten dort getrennt mit jeweils einer Adresse zu verwalten, wenn ich nun eine Adresse wie z.B. xyz.co.uk habe und diese auf die zweite Adresse vom obrigen Anbieter leite kann ich auch dort das Anzeigen der eigentlichen Adresse verhindern? Beispiel, ich leite xyz.co.uk auf abc.de (wo auch gehostet wird) um und möchte aber das im Browser xyz.co.uk steht..

Grüße
Markus


Kontaktformular - koter - 01.06.2015

Hallo Markus,

MarSch schrieb:...Das mit dem Text über dem Eingabefeld hat nicht ganz funktioniert...

Du hast leider nicht geschrieben, was genau nicht ganz funktioniert hat.

Auf jeden Fall solltest Du Deine Änderungen wieder zurücknehmen. Der Autor des Formulars hat die einzelnen Elemente in eine blinde HTML-Tabelle gesetzt, damit sie richtig ausgerichtet sind. Du hast die Elemente jetzt verschoben.

Ich habe die Zellen der Tabelle mal mit einem Rahmen versehen, damit Du siehst wie sie aufgebaut ist:

[Bild: zwischenablage01wzkf3.jpg]

für den TD-Tag habe ich diese CSS-Zeilen hinzugefügt:

Code:
td{
   min-width: 5em;
   border: 2px solid red;
   vertical-align: top;
}

Den roten Rahmen (border: 2px solid redWink musst Du natürlich wieder löschen.

MarSch schrieb:Davon mal ab, sollte mir das Ergebnis mit dem Text über dem Eingabefeld rein optisch nicht gefallen, wie kan nich erreichen das die Beschriftung, in diesem Fall "Message" (Screenshot 4) nach oben zum Eingabefeldanfang rückt?

Das geht mit „vertical-align: top;“

Ich habe noch das Wort „vorher“ dort eingefügt, wo die Beschriftung vorher stand:

PHP-Code:
// Mehrzeiliges Textfeld //
 
echo "<tr><td>"."vorher"."</td><td>".$name.":".(($settings[1]) ? ' (*)' '')."<textarea name=\"".field2url($name)."\">".((isset($_POST[field2url($name)])) ? htmlspecialchars($_POST[field2url($name)]) : '')."</textarea></td></tr>";
 break; 

Gruß

Koter


Kontaktformular - koter - 01.06.2015

MarSch schrieb:...Kann ich es irgendwie so anstellen das nur die immer oben im Browserfenster in der Adresszeile steht statt die Unterseiten angehängt wie xyz.de/index.html oder so...?

Da WebPlus statische Seiten erstellt wird sich das nicht umgehen lassen. Bei der Startseite wird wahrscheinlich nur „xyz.de“ stehen und nicht „xyz.de/index.html“. Bei allen anderen Unterseiten wird aber der komplette URL stehen, es sei denn, Du legst für jede Seite Unterverzeichnisse an und erstellst für jedes eine Startseite.

Den zweiten Teil habe ich leider nicht verstanden. confused

Gruß

Koter


Kontaktformular - MarSch - 02.06.2015

Hallo Koter,

durch die weiteren Erklärungen und optischen Beispielen habe ich es nun soweit hinbekommen, danke dafür. Smile

Ich habe eine Screenshot angehängt, wie bekomme ich die nun leeren Felder aus der Tabelle? Ich hatte gehofft das die verschwindend gering von der Größe dargestellt werden wenn nichts drin ist aber du siehst ja selber... Der Inhalt der rechten Felder ist nicht horizontal mittig ausgerichtet, wo muss da jetzt wieder ein align oder so hin? Folgendes hat nichts gebracht:

td{
min-width: 5em;
border: 1px solid black;
vertical-align: top;
horizontal-align: center; oder horizontal-align: middle;
}


Zu den Unterseiten in ihren eigenen Ordnern, dann kann jede index.html heißen und somit wird "index.html" nicht angezeigt meinst du... Aber der Pfad bzw. der Unterordner schon, oder? Also so: xyz.de/kontakt/ Oder?
.