Erweiterung im Kontaktformular 
Autor: Heiko S.
Besucht 265,
Followers 1,
Geteilt 0
Ich habe ein Angebotsformular (Kontaktformular) erstellt und brauche folgende Funktion:
Es soll ein Pflichtfeld (Ja/Nein - "Einfache Auswahl") eingefügt werden, dass beim anklicken von "Ja" weitere Eingabefelder anzeigt, die sonst ausgeblendet sind.
Danke!
Heiko
Gepostet am
Mit dem jetzigen Kontaktformular geht das so nicht. Wenn du willst, kann ich die Frage auf idee/Anregung umstellen.
Autor
Ich dachte eher an eine PHP Lösung...
Das geht im Moment nur mit einem selbst entwickelten Kontaktformular, dass genau Deine Erfordernisse abbildet.
Eine allgemeine Lösung von Incomedia ist aber nicht trivial sondern eher sehr komplex umzusetzen, da ja die Abhängigkeiten weitestgehend variabel festgelegt werden müssen.
Du kannst im Internet nach Lösungen suchen und die gefundenen an Deine Gegebenheiten anpassen...
x Heiko S., ... (It > De) ... ... (entschuldigen Sie die Übersetzung) ... Sie könnten es mit meinem EXTRA-Code versuchen, fast einfach, mit Kopieren/Einfügen...
... bei Interesse müssen Sie den LINK Ihrer Seite posten, der das Kontaktformular mit allen Eingabefeldern enthält, oben durch die sichtbaren geteilt, und für den unteren Teil für diejenigen, die später ausgeblendet werden oder mit meinem „Ja/Nein“-Code sichtbar gemacht...
... wenn du das tust, werde ich hierher zurückkommen ...
.
ciao
.
Autor
Ich habe nun eine Lösung gefunden!
Ich habe ein Java-Script eingebaut, dass mir die Ansicht von bestimmten Formularfeldern grundsätzlich ausblendet, es sei denn, man hat zuvor die Frage ("Abweichender Halter?") mit "Ja" beantwortet. Aufruf der Funktion mit "onclick="toggleAdditionalFields(true|false)"
Als Ergebnis bekommt man auf der Seite die Frage "Abweichender Halter?" - Falls diese Frage mit "Ja" beantwortet wird, erscheinen erst dann die Felder "Vor- und Nachname des Halters", "Anschrift des Halters (Straße, Hausnummer)", "PLZ), "Ort", Geb.Datum". Sonst bleiben diese versteckt. (style="display: none;")
Alle nachträglichen Ergänzungen durch mich sind "fett" markiert. Hier ein Ausschnitt vom Quellcode des erzeugten Formulars durch websiteX5:
_____________________________________________________________________________________
<script> function toggleAdditionalFields(show) {
if (show) {
var additionalFields = document.getElementById("imObjectForm_1_7_container"); additionalFields.style.display = "block";
var additionalFields = document.getElementById("imObjectForm_1_8_container"); additionalFields.style.display = "block";
var additionalFields = document.getElementById("imObjectForm_1_9_container"); additionalFields.style.display = "block";
var additionalFields = document.getElementById("imObjectForm_1_10_container"); additionalFields.style.display = "block";
var additionalFields = document.getElementById("imObjectForm_1_11_container"); additionalFields.style.display = "block";
} else {
var additionalFields = document.getElementById("imObjectForm_1_7_container"); additionalFields.style.display = "none";
var additionalFields = document.getElementById("imObjectForm_1_8_container"); additionalFields.style.display = "none";
var additionalFields = document.getElementById("imObjectForm_1_9_container"); additionalFields.style.display = "none";
var additionalFields = document.getElementById("imObjectForm_1_10_container"); additionalFields.style.display = "none";
var additionalFields = document.getElementById("imObjectForm_1_11_container"); additionalFields.style.display = "none";
}}
</script>
<div id="imObjectForm_1_6_container" class="imObjectFormFieldContainer"><label id="imObjectForm_1_6_label"><span>Abweichender Halter?*</span></label><br /><div id="imObjectForm_1_6_field"><span id="imObjectForm_1_6_wrapper"><span class="imObjectForm_1_6_radiobutton radiobutton firstrow firstcolumn"><input type="radio" class="mandatory radio-input" id="imObjectForm_1_6_0" name="imObjectForm_1_6" value="Ja" onclick="toggleAdditionalFields(true)"/><span class="radio-label">Ja</span></span><br /><span class="imObjectForm_1_6_radiobutton radiobutton firstcolumn"><input type="radio" class="mandatory radio-input" id="imObjectForm_1_6_1" name="imObjectForm_1_6" value="Nein" onclick="toggleAdditionalFields(false)"/><span class="radio-label">Nein</span></span><br /></span></div></div>
<div id="imObjectForm_1_7_container" class="imObjectFormFieldContainer" style="display: none;"><label id="imObjectForm_1_7_label" for="imObjectForm_1_7"><span>Vor- und Nachname des Halters</span></label><br /><div id="imObjectForm_1_7_field"><input type="text" class="" id="imObjectForm_1_7" name="imObjectForm_1_7" /></div></div>
<div id="imObjectForm_1_8_container" class="imObjectFormFieldContainer" style="display: none;"><label id="imObjectForm_1_8_label" for="imObjectForm_1_8"><span>Anschrift des Halters (Straße, Hausnummer)</span></label><br /><div id="imObjectForm_1_8_field"><input type="text" class="" id="imObjectForm_1_8" name="imObjectForm_1_8" /></div></div>
<div id="imObjectForm_1_9_container" class="imObjectFormFieldContainer" style="display: none;"><label id="imObjectForm_1_9_label" for="imObjectForm_1_9"><span>Anschrift des Halters (PLZ)</span></label><br /><div id="imObjectForm_1_9_field"><input type="number" maxlength="5" class="valNumber valMaxLength[5]" id="imObjectForm_1_9" name="imObjectForm_1_9" /></div></div>
<div id="imObjectForm_1_10_container" class="imObjectFormFieldContainer" style="display: none;"><label id="imObjectForm_1_10_label" for="imObjectForm_1_10"><span>Anschrift des Halters (Ort)</span></label><br /><div id="imObjectForm_1_10_field"><input type="text" class="" id="imObjectForm_1_10" name="imObjectForm_1_10" /></div></div>
<div id="imObjectForm_1_11_container" class="imObjectFormFieldContainer" style="display: none;"><label id="imObjectForm_1_11_label" for="imObjectForm_1_11"><span>Geburtsdatum des Halters</span></label><br /><div id="imObjectForm_1_11_field"><input type="text" data-showicon="true" data-format="[dd].[mm].[yyyy]" class="datePicker" id="imObjectForm_1_11" name="imObjectForm_1_11" /><i id="imObjectForm_1_11_icon" class="imDatePickerIcon fa fa-calendar-o" aria-hidden="true"></i></div></div>
_____________________________________________________________________________
Link zum vollständigen Formular: https://granitza-morelo.de/angebotsformular.html
...OK.. bravo...
...