Frage von 12mf12, 45

Wie passe ich den Code für das Abonnement-Formular bei Google Feedburner an, um ein Textfeld zu erhalten, das sich beim Anklicken automatisch leert?

Hallo liebe html-Kenner,

ich bin leider eine Unwissende auf dem Gebiet der html-Codes;-) Google Feedburner spuckt mir folgenden Code aus, den ich auf meine Wordpress-Seite einfügen möchte:

Zitat: .....return true"><p>E-Mail-Adresse eingeben:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="kasimira/de" name="uri"/><input type="hidden" name="loc" value="de_DE"/><input type="submit" value="Abonnieren" /><p>Zugestellt von <a href="https://feedburner.google.com" target="_blank">FeedBurner</a></p></form>

An welcher Stelle muss ich was einfügen, damit ich in dem momentan leeren weißen Textfeld, in das der Abonnent seine E-Mailadresse einträgt, Folgendes lesen kann: Deine E-Mail-Adresse Klickt der Leser in dieses Feld, soll dieser Text sofort verschwinden.

Wer kennt sich da aus und kann mir vielleicht einen fertigen Gesamtcode liefern?

Viele Grüße Amelie

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von Sarkophator, 23

Du kannst mit dem HTML5 placeholder-Attribut arbeiten:

http://www.w3schools.com/tags/att\_input\_placeholder.asp

Erweiterst also einfach nur das betroffene input-Element um dieses Attribut:

<input type="text" style="width:140px" name="email" placeholder="Deine E-Mail-Adresse"/>

Der Placeholder verschwindet allerdings erst, wenn der User etwas eingibt, d.h. nicht bei Fokus. Allerdings kannst du mittels Javascript auf Fokus den Placeholder einfach leeren bzw. bei blur wieder zurücksetzen: (Hier als inline-Script eingebunden)

<input type="text" style="width:140px" name="email" placeholder="Deine E-Mail-Adresse" onfocus="this.placeholder=''" onblur="this.placeholder='Deine E-Mail-Adresse'" />


Kommentar von 12mf12 ,

Vielen Dank! Hat genau funktioniert!! :-)

Kann man den Text "Deine E-Mailadresse" auch noch optisch etwas anpassen? So dass er etwas blasser/gräulich erscheint?

Kommentar von Sarkophator ,

Du kannst mittels dem placeholder-Pseudoselektor über CSS darauf zugreifen:

::-webkit-input-placeholder { /* Chrome/Opera/Safari */ }
::-moz-placeholder { /* Firefox19+ */ }
:-ms-input-placeholder { /* IE 10+/Edge */ }
Antwort
von 12mf12, 26

Nachtrag: Dummerweise konnte ich den Code oben nicht richtig einfügen. Hier ist er:

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="https://feedburner.google.com/fb/a/mailverify"; method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=kasimira/de', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>E-Mail-Adresse eingeben:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="kasimira/de" name="uri"/><input type="hidden" name="loc" value="de_DE"/><input type="submit" value="Abonnieren" /><p>Zugestellt von <a href="https://feedburner.google.com" target="_blank">FeedBurner</a></p></form>

Keine passende Antwort gefunden?

Fragen Sie die Community

Weitere Fragen mit Antworten