Senden Button funktioniert nicht

[Alexis]

Hallo,

in der Rubrik «Kontakt», nachdem ich die notwendigen Informationen ausgefüllt und den Absenden-Button angeklickt habe, passiert nichts. Hier der vollständige Quellcode:

<div>

<form enctype="multipart/form-data" action="http://www.weebly.com/weebly/apps/formSubmit.php" method="POST" id="form-127500378183686844">

<div id="127500378183686844-form-parent" class="wsite-form-container" style="margin-top:15px;">

  <ul class="formlist" id="127500378183686844-form-list">

    <h2 class="wsite-content-title" style="text-align:left;">Kontakt</h2>

                                                         <label class="wsite-form-label" for="input-256819660389498080">Name <

                                                                       <input id="input-256819660389498080" class="wsite-form-input wsite-input" type="text" name="_u256819660389498080[first]" />

                                                                       <label class="wsite-form-sublabel" for="input-256819660389498080">First</label>

                                                         </div>

                                                         <div class="wsite-form-input-container wsite-form-right wsite-form-input-last-name">

                                                                       <input id="input-256819660389498080-1" class="wsite-form-input wsite-input" type="text" name="_u256819660389498080[last]" />

                                                                       <label class="wsite-form-sublabel" for="input-256819660389498080-1">Last</label>

                                                         </div>

                                                         <div id="instructions-256819660389498080" class="wsite-form-instructions" style="display:none;"></div>

                                          </div>

                                          <div style="clear:both;"></div></div>

<div><div class="wsite-form-field" style="margin:5px 0px 5px 0px;">

                                                         <label class="wsite-form-label" for="input-598307925891005002">E-Mail Adresse  <span class="form-required">*</span></label>

                                                         <div class="wsite-form-input-container">

                                                                       <input id="input-598307925891005002" class="wsite-form-input wsite-input wsite-input-width-200px" type="text" name="_u598307925891005002" />

                                                         </div>

                                                         <div id="instructions-598307925891005002" class="wsite-form-instructions" style="display:none;"></div>

                                          </div></div>

<div><div class="wsite-form-field" style="margin:5px 0px 5px 0px;">

                                                         <label class="wsite-form-label" for="input-560392210716632875">Nachricht <span class="form-required">*</span></label>

                                                         <div class="wsite-form-input-container">

                                                                       <textarea id="input-560392210716632875" class="wsite-form-input wsite-input wsite-input-width-285px" name="_u560392210716632875" style="height: 50px"></textarea>

                                                         </div>

                                                         <div id="instructions-560392210716632875" class="wsite-form-instructions" style="display:none;"></div>

                                          </div></div>

  </ul>

</div>

<div style="display:none; visibility:hidden;">

  <input type="text" name="wsite_subject" />

</div>

<div style="text-align:left; margin-top:10px; margin-bottom:5px;">

  <input type="hidden" name="form_version" value="2" />

  <input type="hidden" name="wsite_approved" id="wsite-approved" value="approved" />

  <input type="hidden" name="ucfid" value="127500378183686844" />

<input type='submit' style='position:absolute;top:0;left:-9999px;width:1px;height:1px' /><a class='wsite-button' onclick="document.getElementById('form-127500378183686844').submit()"><span class='wsite-button-inner'>Senden</span>

Ich möchte, dass das Kontaktformular an eine E-Mail-Adresse gesendet wird. Können Sie mir sagen, wie ich das machen soll?

Gruß Roger

[klawischnigg]

Hi there,

in der Rubrik «Kontakt», nachdem ich die notwendigen Informationen ausgefüllt und den Absenden-Button angeklickt habe, passiert nichts.

Kein Wunder. Der Absende-Button ist absolut positioniert und ins linke Nirwana verschoben. Dafür gibts einen Link, der das Formular mit Javascript abschicken soll. Was er aber nicht tut, weil, tja, jetzt müßtest Du in die Konsole schauen (F12 bei jedem Browser) und uns die Fehlermeldung mitteilen, die da unweigerlich kommen muß, wenn nichts abgeschickt wird (woran machst Du das übrigens fest? Kann ja auch daran liegen, daß Dein Formular in irgendeinem Spamfilter hängenbleibt etc.)

Hier der vollständige Quellcode:

Bitte nicht. Die erste und die letzte Zeile hätten gereicht. Ich weiß nicht, wo Du das her hast, aber selbst geschrieben hast Du es unter Garantie nicht. (Und das ist jetzt kein Vorwurf, im Gegenteil, das ist gut für Dich...)

[Gunnar Bittersmann]

@@klawischnigg

Der Absende-Button ist absolut positioniert und ins linke Nirwana verschoben.

Das sollte man aus Performanz-Gründen nicht tun. Stattdessen visuell verstecken.

Dafür gibts einen Link, der das Formular mit Javascript abschicken soll.

Das sollte man auch nicht tun. Links dienen zum Sprung auf andere Webseiten (oder anderen Stellen auf der aktuellen Seite). Zum Auslösen von Aktionen (wozu auch das Abschicken von Formularen gehört) sind <button>s zu verwenden. Das macht einen Unterschied für alle, die die Seite nicht per Maus bedienen.

Die Frage, wozu das JavaScript-Geraffel überhaupt gut sein soll und nicht der vorhandene Submit-Button genutzt wird, steht natürlich weiter im Raum.

🖖 Живіть довго і процвітайте

[Alexis]

Können Sie mir helfen, dieses Problem zu lösen? Ich habe den Quellcode nicht selbst geschrieben.

[Gunnar Bittersmann]

@@Alexis

Können Sie mir helfen, dieses Problem zu lösen? Ich habe den Quellcode nicht selbst geschrieben.

Die letzte Zeile

<input type='submit' style='position:absolute;top:0;left:-9999px;width:1px;height:1px' /><a class='wsite-button' onclick="document.getElementById('form-127500378183686844').submit()"><span class='wsite-button-inner'>Senden</span>

ersetzen durch

<button>Senden</button>

Wenn die Styles gebraucht werden, vielleicht auch so:

<button class='wsite-button'><span class='wsite-button-inner'>Senden</span></button>

---

Außerdem ist das falsch:

  <ul class="formlist" id="127500378183686844-form-list">

Da ist keine Liste.

Entweder ganz löschen oder, wenn das Element gebraucht wird, zum div machen:

  <div class="formlist" id="127500378183686844-form-list">

Dabei aber auch das End-Tag </ul> löschen bzw. in </div> ändern.

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Alexis,

Ich möchte, dass das Kontaktformular an eine E-Mail-Adresse gesendet wird.

Diese Frage haben die Kollegen offenbar überlesen und sich statt dessen lieber über das HTML aufgeregt, das Weebly Dir vermutlich generiert hat, mit allen Macken.

Mailversand aus HTML heraus geht nicht, das setzt eine Komponente am Server voraus, die das tut. Ich weiß nicht, was Weebly anbietet (mein Arbeitgeber meint, das wäre eine gefährliche oder nutzlose Seite und blockiert den Zugriff), aber wenn die einen Mailer anbieten, wäre der hier einzusetzen. Wenn nicht - tja, ggf. brauchst Du dann einen anderen Hoster. Keine Ahnung, was mit Weebly möglich ist.

Ich würde Dir angesichts deines Know-Hows davon abraten, so etwas "mal schnell" selbst zu bauen. Wenn man bei einem Mailer nicht weiß, was man tut, hat man sich schnell ein Spam-Monster eingefangen. Einen Einstieg hätten wir allerdings, im Wiki. Aber - wie gesagt - das ist kein Anfängerthema.

Rolf

[Alexis]

Hier ist der aktualisierte Quellcode, aber ohne Erfolg.

<div>
<form enctype="multipart/form-data" action="http://www.weebly.com/weebly/apps/formSubmit.php" method="POST" id="form-127500378183686844">
<div id="127500378183686844-form-parent" class="wsite-form-container" style="margin-top:15px;">
  <div class="formlist" id="127500378183686844-form-list">
    <h2 class="wsite-content-title" style="text-align:left;">Kontakt</h2>

<div><div class="wsite-form-field wsite-name-field" style="margin:0px 0px 0px 0px;">
	
				<label class="wsite-form-label" for="input-256819660389498080">Name <span class="form-required">*</span></label>
				<div style="clear:both;"></div>
				<div class="wsite-form-input-container wsite-form-left wsite-form-input-first-name">
					<input id="input-256819660389498080" class="wsite-form-input wsite-input" type="text" name="_u256819660389498080[first]" />
					<label class="wsite-form-sublabel" for="input-256819660389498080">First</label>
				</div>
				<div class="wsite-form-input-container wsite-form-right wsite-form-input-last-name">
					<input id="input-256819660389498080-1" class="wsite-form-input wsite-input" type="text" name="_u256819660389498080[last]" />
					<label class="wsite-form-sublabel" for="input-256819660389498080-1">Last</label>
				</div>
				<div id="instructions-256819660389498080" class="wsite-form-instructions" style="display:none;"></div>
			</div>
			<div style="clear:both;"></div></div>

<div><div class="wsite-form-field" style="margin:5px 0px 5px 0px;">
				<label class="wsite-form-label" for="input-598307925891005002">E-Mail Adresse  <span class="form-required">*</span></label>
				<div class="wsite-form-input-container">
					<input id="input-598307925891005002" class="wsite-form-input wsite-input wsite-input-width-200px" type="text" name="_u598307925891005002" />
				</div>
				<div id="instructions-598307925891005002" class="wsite-form-instructions" style="display:none;"></div>
			</div></div>

<div><div class="wsite-form-field" style="margin:5px 0px 5px 0px;">
				<label class="wsite-form-label" for="input-560392210716632875">Nachricht <span class="form-required">*</span></label>
				<div class="wsite-form-input-container">
					<textarea id="input-560392210716632875" class="wsite-form-input wsite-input wsite-input-width-285px" name="_u560392210716632875" style="height: 50px"></textarea>
				</div>
				<div id="instructions-560392210716632875" class="wsite-form-instructions" style="display:none;"></div>
			</div></div>
  </ul>
</div>
<div style="display:none; visibility:hidden;">
  <input type="text" name="wsite_subject" />
</div>
<div style="text-align:left; margin-top:10px; margin-bottom:5px;">
  <input type="hidden" name="form_version" value="2" />
  <input type="hidden" name="wsite_approved" id="wsite-approved" value="approved" />
  <input type="hidden" name="ucfid" value="127500378183686844" />
<button class='wsite-button'><span class='wsite-button-inner'>Senden</span></button>
	</a>
	</div>
</form>

</div>

</td>
</tr>
</tbody>
</table>
</div></div></div></div>

		</div>
	</div>
	<div id="footer">
		<div id="footer-content"></div>
	</div>
</div>

</body>
</html>

[Rolf B]

Hallo Alexis / Roger,

was soll das jetzt? Hast Du meinen Beitrag wenigstens versucht zu lesen? In dem Fall hätte ich einen Informationsaustausch zum Thema "Form-Mailer bei Weebly" erwartet, kein dahingekübeltes HTML, das außer dem Codegenerator eh keiner versteht.

Wir wissen nicht, was Du da als Gesamt-"Kunstwerk" errichtet hast. Wir sind nicht der Support von Weebly.

Wie geschrieben: Eine Mail wird nicht vom HTML oder vom Browser verschickt. Dafür muss eine Serverkomponente mithelfen. Und da müsstest Du schon mehr als Strg+C und Strg+V bemühen und erklären, was Du da aufgebaut hast. Ist das das Contact Form von Weebly?

Rolf

[Gunnar Bittersmann]

@@Alexis

Hier ist der aktualisierte Quellcode

Du hast <ul> und <a> entfernt, aber die End-Tags </ul> und </a> dringelassen. Die müssen auch noch weg.

Das hätte dir der Validator auch gesagt.

Der sagt auch, dass da irgendwein div nicht geschlossen ist. Bei vernünftig formatiertem Code würde man auch gleich sehen, welches. Zeilenumbrüche und Einrückungen zu machen überlasse ich dir.

---

</td>
</tr>
</tbody>
</table>
</div></div></div></div>

Was ist das denn? Steckt dein Formular in einer fürs Layout missbrauchten table? Und viel zu vielen divs?

Wenn ja, solltest du im Start-Tag <table role="presentation"> angeben.

---

	<div id="footer">
		<div id="footer-content"></div>
	</div>

Das wäre gern ein footer-Element, siehe Seitenstrukturierung.

---

… aber ohne Erfolg.

Wie @Rolf B schon sagte: Das Formular wird zur Auswertung an Weebly geschickt (wegen <form action="http://www.weebly.com/weebly/apps/formSubmit.php" method="POST">).

Was dort passiert (oder nicht), entzieht sich unserer Kenntnis. Du solltest vielleicht zunächst überprüfen, ob dein Formular genau die Daten rausschickt, die Weebly erwartet.

🖖 Живіть довго і процвітайте

[Gunnar Bittersmann]

@@Alexis

Bevor du jetzt tagelang versuchst, das Kontaktformular zum Laufen zu kriegen, solltest du dir die Frage stellen: Brauche ich überhaupt ein Kontaktformular?

Was spricht gegen <a href="mailto:[e-mail]">Senden Sie eine E-Mail an [e-mail]</a>?

(mailto-Links funktionieren nicht für alle; deshalb ist die E-Mail-Adresse im Text anzugeben.)

Das hat dann auch den Vorteil, dass jeder sein gewohntes E-Mail-Programm verwenden kann und die gesendete Mail auch in seinem Ordner „gesendete Mails“ hat.

🖖 Живіть довго і процвітайте

[Alexis]

Ich brauche kein Kontaktformular, der Zweck ist es, die Daten zu erhalten. Die Option der E-Mail ist ok für mich. Wo soll ich das hinstellen: <a href="mailto:[e-mail]">Senden Sie eine E-Mail an [e-mail]</a>?

Vielen Dank für Ihre Unterstützung und entschuldigen Sie, wenn ich viele Fragen stelle.

[Rolf B]

Hallo Alexis,

Wo soll ich das hinstellen:

Auf die HTML Seite, die Du dem Anwender präsentiert?

Das ist ein a Element, also ein Link. Die mailto-Angabe ist die URL, auf die verlinkt wird. Der PC, auf dem der Link geklickt wird, öffnet dann das Mailprogramm, das auf dem jeweiligen PC installiert ist. Ist keins installiert, muss der Nutzer die Mail von Hand erstellen.

der Zweck ist es, die Daten zu erhalten

Beachte, dass diese Vorgehen eine "nackte" Mail erzeugt; das ist kein Formular mit "Name, Vorname, Ihre E-Mail, Nachricht".

Rolf

[Felix Riesterer]

Lieber Alexis/Roger,

ergänzend zu meinen Vorrednern (oder besser Vorschreibern?) hier noch ein Link für vertiefendes Wissen hinsichtlich Formularversand:

• Was ist ein Formular? (mit Code-Beispielen für sauberes HTML)
• Gestaltung und Anwendungsteil Suchformulare (kann man auf Kontaktformulare übertragen)

Liebe Grüße

Felix Riesterer

[Gunnar Bittersmann]

@@Felix Riesterer

Und eigentlich sollte jeder, der Formulare auf Webseiten erstellt, Adam Silvers Form Design Patterns gelesen und zum Nachschlagen im Regal zu stehen haben. (Und sei’s im virtuellen.)

🖖 Живіть довго і процвітайте