Wie geht das ?
ertsmal einen button bauen und über den Boxenmanager positionern.
<a href="https://www.deine Webseite.de/widerruf/widerrufsformular.html" onclick="window.open(this.href, '', 'resizable=yes,status=no,location=no,toolbar=no,menubar=no,fullscreen=no,scrollbars=no,dependent=no,width=900,left=50,height=2048,top=50'); return false;" style="
display: inline-block;
background-color: #1a365d;
color: #ffffff;
font-family: 'Arial', sans-serif;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
padding: 12px 28px;
border-radius: 4px;
border: 1px solid #1a365d;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: background-color 0.2s ease;
">Jetzt Widerruf erklaeren </a><br />
Jetzt noch eine Html bauen:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
</head>
<body>
<div style="font-family: Arial, sans-serif; max-width: 650px; margin: 0 auto; padding: 20px; line-height: 1.6; color: #333;">
<h2 style="border-bottom: 2px solid #1a365d; padding-bottom: 10px; color: #1a365d; margin-bottom: 5px;">Widerrufsformular</h2>
<p style="font-style: italic; margin-top: 0; color: #666; font-size: 0.9em;">(Bitte füllen Sie die Felder aus und klicken Sie auf den Button, um den Widerruf direkt über Ihr Mailprogramm abzusenden.)</p>
<div style="background-color: #f8fafc; border: 1px solid #e2e8f0; padding: 15px; border-radius: 4px; margin-bottom: 25px;">
<strong style="color: #1a365d;">An:</strong><br>
<p>dein Name<br />
deine Firma<br />
deine Adresse 1<br />
deine Adresse 2</p>
<strong>Kontakt:</strong>
<p>Telefon: <br />
Telefax: <br />
E-Mail: </p>
</div>
<!-- Das Formular ruft beim Absenden unsere JavaScript-Funktion auf -->
<form onsubmit="sendeWiderruf(event)" style="margin-top: 20px;">
<div style="margin-bottom: 15px;">
<label style="display: block; font-weight: bold; margin-bottom: 5px;">Bezeichnung der Ware / Dienstleistung *:</label>
<textarea id="w_ware" rows="3" required style="width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px; box-sizing: border-box; font-family: Arial, sans-serif;"></textarea>
</div>
<div style="margin-bottom: 15px;">
<label style="display: block; font-weight: bold; margin-bottom: 5px;">Bestellt am (TT.MM.JJJJ) *:</label>
<input type="text" id="w_bestellt" required placeholder="z.B. 12.05.2026" style="width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px; box-sizing: border-box;">
</div>
<div style="margin-bottom: 15px;">
<label style="display: block; font-weight: bold; margin-bottom: 5px;">Erhalten am (TT.MM.JJJJ) *:</label>
<input type="text" id="w_erhalten" required placeholder="z.B. 15.05.2026" style="width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px; box-sizing: border-box;">
</div>
<div style="margin-bottom: 15px;">
<label style="display: block; font-weight: bold; margin-bottom: 5px;">Bestellnummer (optional):</label>
<input type="text" id="w_nummer" style="width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px; box-sizing: border-box;">
</div>
<div style="margin-bottom: 15px;">
<label style="display: block; font-weight: bold; margin-bottom: 5px;">Name des Verbrauchers *:</label>
<input type="text" id="w_name" required style="width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px; box-sizing: border-box;">
</div>
<div style="margin-bottom: 20px;">
<label style="display: block; font-weight: bold; margin-bottom: 5px;">Anschrift des Verbrauchers *:</label>
<textarea id="w_anschrift" rows="2" required style="width: 100%; padding: 8px; border: 1px solid #cbd5e1; border-radius: 4px; box-sizing: border-box; font-family: Arial, sans-serif;"></textarea>
</div>
<div style="margin-top: 30px; text-align: left;">
<button type="submit" style="
display: inline-block;
background-color: #1a365d;
color: #ffffff;
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
border: none;
padding: 14px 32px;
border-radius: 4px;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: background-color 0.2s ease;
" onmouseover="this.style.backgroundColor='#2c5282'" onmouseout="this.style.backgroundColor='#1a365d'">
Widerruf generieren & senden
</button>
</div>
</form>
<p style="margin-top: 35px; font-size: 0.85em; color: #64748b; border-top: 1px solid #e2e8f0; padding-top: 10px;">
* Pflichtfelder
</p>
</div>
<!-- Dieses kleine Skript liest die Daten aus und zwingt das Mailprogramm zur Übernahme -->
<script>
function sendeWiderruf(event) {
event.preventDefault(); // Verhindert das Neuladen der Seite
// Daten aus den Feldern auslesen
var shopEmail = "deineMail.de";
var ware = document.getElementById('w_ware').value;
var bestellt = document.getElementById('w_bestellt').value;
var erhalten = document.getElementById('w_erhalten').value;
var nummer = document.getElementById('w_nummer').value 
"Nicht angegeben";
var name = document.getElementById('w_name').value;
var anschrift = document.getElementById('w_anschrift').value;
// E-Mail-Betreff festlegen
var betreff = "Widerruf Online-Shop Bestellung - Nr. " + nummer;
// Den Nachrichtentext strukturiert zusammenbauen
var text = "Hiermit widerrufe(n) ich/wir den von mir/uns abgeschlossenen Vertrag über den Kauf der folgenden Waren / die Erbringung der folgenden Dienstleistung:\n\n" +
"Ware/Leistung: " + ware + "\n" +
"Bestellnummer: " + nummer + "\n" +
"Bestellt am: " + bestellt + "\n" +
"Erhalten am: " + erhalten + "\n\n" +
"KUNDENDATEN:\n" +
"Name: " + name + "\n" +
"Anschrift: " + anschrift + "\n\n" +
"Datum: " + new Date().toLocaleDateString('de-DE') + "\n";
// Text für den Mail-Link codieren (damit Umlaute und Zeilenumbrüche korrekt ankommen)
var mailtoLink = "mailto:" + shopEmail +
"?subject=" + encodeURIComponent(betreff) +
"&body=" + encodeURIComponent(text);
// Den Link im Browser ausführen (öffnet das Mailprogramm mit vollem Text)
window.location.href = mailtoLink;
}
</script>
</body>
</html>
und mit dem Button verknüpfen.
