+- 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)
Kontaktformular - MarSch - 29.01.2016
Hallo Koter,
vielen Dank für den Umbau und die Beschreibungen.
Das ist größentechnisch und funktional jetzt genau das was ich wollte.
ich mache mir nur noch Gedanken um ein paar Schönheitsverbesserungen.
Z.B. würde ich gern die beiden obersten Zeilen (Name und E-Mail) vielleicht auf 45% schrumpfen und etwas auseinanderrücken, bin mir nicht sicher ob die linke dann links anliegen soll und die rechte dann bei 50% startet oder einfach beide auf 45% und dann mittig ausrichten im jeweiligen 50%-Bereich (hoffe das ist verständlich erklärt). Welche Möglichkeit ist machbar oder gibt es einen Weg beides anschaulich zu machen?
Danke
Markus
Kontaktformular - koter - 29.01.2016
Hallo Markus,
MarSch schrieb:(hoffe das ist verständlich erklärt)
nicht so ganz, ich muss ein wenig raten.
MarSch schrieb:Welche Möglichkeit ist machbar ...?
Wenn ich Dich richtig verstanden habe, alle.
MarSch schrieb:...oder gibt es einen Weg beides anschaulich zu machen?
Möglichst genau beschreiben und vielleicht eine Skizze anhängen. Das muss aber nicht unbedingt sein,
ich denke wir werden auch so auf einen Nenner kommen.
Das kann aber einige Zeit dauern, ich hoffe es drängt dich nicht zu sehr.
Hier ein erster Vorschlag:
Die Input-Felder und deren Beschriftungen stehen in Absätzen, die in DIV-Containern der Klasse „halbBreit“ stehen.
![[Bild: zwischenablage01miuri.jpg]](http://abload.de/img/zwischenablage01miuri.jpg)
Man könnte den geraden Absätzen (Kind-Elementen dieser Klasse) einen einen linken Außenabstand von 10% geben und den ungeraden einen rechten.
Das würde dann aussehen wie in der Abbildung.
Das CSS der Klasse müsste dann so aussehen:
Code:
.halbBreit{
float:left;
width:50%;
}
.halbBreit input{
width:99%;
}
.halbBreit p{
padding-right:2%;
}
.halbBreit:nth-child(even) p{
margin-left:10%;
}
.halbBreit:nth-child(odd) p{
margin-right:10%;
}Ist das ungefähr das, was Du Dir vorstellst?
Gruß
Koter
Kontaktformular - MarSch - 30.01.2016
Hallo Koter,
das ist super so, alles perfekt.
Wie kann ich etwas mehr Platz zwischen dem Eingabefeld für "Name" und der Bezeichnung "Nachricht" einfügen, eine leere Zeile die eine Höhe von z.B. 4px hat oder so?
Ich habe keine Idee das Captcha optisch besser einzubinden, mal sehen ob diese irgendwann die Tage mal kommt...
Grüße
Markus
Kontaktformular - koter - 31.01.2016
MarSch schrieb:Wie kann ich etwas mehr Platz zwischen dem Eingabefeld für "Name" und der Bezeichnung "Nachricht" einfügen, eine leere Zeile die eine Höhe von z.B. 4px hat oder so?
Ja das würde gehen. Du kannst aber auch der Klasse „halbBreit“ unten einen Außenabstand geben (im Beispiel rot),
dann rückt alles weiter nach unten.
Code:
.halbBreit{
float:left;
width:50%;
[color=Red]margin-bottom:6px;[/color]
}MarSch schrieb:Ich habe keine Idee das Captcha optisch besser einzubinden, mal sehen ob diese irgendwann die Tage mal kommt...
Ja, gute Ideen lassen manchmal lange auf sich warten. Manchmal hilft es dann, sich andere Seiten anzuschauen und sich dort eine Idee zu „leihen“.
Oder sagen wir besser: Sich inspirieren zu lassen. ;-)
Gruß
Koter
Kontaktformular - koter - 31.01.2016
Hallo Markus,
vielleicht so?:
![[Bild: zwischenablage01yfqnm.jpg]](http://abload.de/img/zwischenablage01yfqnm.jpg)
Der Knaller ist das auch nicht, das Eingabefeld ist ziemlich breit für nur fünf Zeichen.
Gruß
Koter
Kontaktformular - MarSch - 31.01.2016
koter schrieb:Hallo Markus,
vielleicht so?:
Der Knaller ist das auch nicht, das Eingabefeld ist ziemlich breit für nur fünf Zeichen.
Aber das Grundgerüst sieht wesentlich besser aus!
Kannst du mir bitte die Zeilen und was zu ändern ist dafür nennen?
Auch vielen Dank für die Info davor, sieht jetzt wesentlich besser aus mit ein wenig mehr Platz zwischen den Eingaben und Bezeichnungen der Felder...
Gruß und Dank
Markus
Kontaktformular - koter - 31.01.2016
Hallo Markus,
MarSch schrieb:Kannst du mir bitte die Zeilen und was zu ändern ist dafür nennen?
die Zeilennummern sind durch die Änderungen jetzt anders als bei Dir.
Aber die richtigen Positionen sind im Quelltext leicht zu finden:
An das Ende des CSS-Teils muss dieser Code Angehängt werden:
Code:
#SpamSchutz img{
margin: 4px;
margin-left: 0;
float:left;
}
#SpamSchutz p{
float:left;
line-height:20px;
margin:1px;
padding:0;
border:0;
width:380px;
text-align:center;
}
#SpamSchutz input{
width:100%;
height:18px;
margin:0;
padding:0;
}Die Änderungen am PHP-Code stehen zwischen den Kommentarzeilen:
PHP-Code:
} // ende: foreach ($fields AS $name => $settings)
// Formular-Ausgabe abschließen und Captcha einbinden //
echo
"<div id='SpamSchutz'>".
"<img src=\"".$captchaPath."\" alt=\"Captcha\" width=140 height=40 />
<p> Bitte den Text aus dem linken Bild hier eingeben:</p>
<p><input type=\"text\" name=\"captcha_code\" maxlength=5 /></p>" .
'</div>'.
'<input type="text" name="email" style="display:none;" />'."\n".
'<input type="hidden" name="send" value=1 />'."\n".
'<p style="clear:both; text-align:center"><input id="Sendeknopf" type="submit" value="Senden" /></p>'."\n".
'</form>';
} // ende: if (!$sent)
Im PHP-Code habe ich die Element-Styles entfernt.
Das CSS dafür steht ja jetzt oben im CSS-Teil.
Gruß
Koter
Kontaktformular - MarSch - 03.02.2016
Hallo Koter,
hat super geklappt...
Ich bin jetzt soweit fertig, vielen, vielen Dank für Alles.
Viele Grüße
Markus