Fehlermeldung hat geschrieben: VN Form Renderer: Konnte "form-renderer.json" nicht laden (JSON.parse: unexpected character at line 1 column 1 of the JSON data). Liegt die Datei in assets/vn-formrender-js/forms/?
ChatGPT hat geschrieben:
Hallo Volker,
die ausgelagerte `render.js` soll weiterhin gemeinsam für alle fünf individuellen Mobirise-Blöcke verwendet werden:
* Standard
* Fotokarte
* Hintergrund
* Bildrahmen
* Overlay
Beim Block „Hintergrund“ fehlte im neuen Block-HTML offenbar die Übergabe der Stilvariante:
```html
data-style="hintergrund"
```
Dadurch fiel `render.js` auf den Standardwert zurück:
```javascript
var styleVariant = attr('data-style') || 'standard';
```
Zusätzlich wird das im Mobirise-Block gewählte Hintergrundbild jetzt ausdrücklich übergeben:
```html
data-backgroundimage="{{backgroundImage}}"
```
und in `render.js` ausgelesen:
```javascript
var backgroundImage = attr('data-backgroundimage');
```
Für die Live-Seite erzeugt `render.js` daraus ein eigenes Bild-Element. Das Bild wird also nicht mehr aus dem ausgeblendeten Editor-Dummy herausgenommen.
Nach meinem Verständnis kann dieselbe neue `render.js` auch weiterhin für die anderen vier Blöcke verwendet werden. Voraussetzung ist lediglich, dass jeder Block seine eigene Stilkennung korrekt übergibt:
```html
data-style="standard"
data-style="fotokarte"
data-style="hintergrund"
data-style="bildrahmen"
data-style="overlay"
```
Für die einzelnen Varianten erwartet `render.js` außerdem:
* „Standard“: kein Bild erforderlich
* „Fotokarte“: ein Bild mit der Klasse `.vnfr-fotokarte-img`
* „Hintergrund“: `data-backgroundimage` beziehungsweise `.vnfr-hintergrund-bgimg`
* „Bildrahmen“: ebenfalls `data-backgroundimage` beziehungsweise `.vnfr-hintergrund-bgimg`
* „Overlay“: optional `data-overlaybtn` für den Buttontext
Die Änderung für das dynamische Hintergrundbild betrifft damit hauptsächlich „Hintergrund“ und „Bildrahmen“. „Standard“ und „Overlay“ bleiben davon unberührt. Bei „Fotokarte“ greift weiterhin das vorhandene Bild mit der Klasse `.vnfr-fotokarte-img`.
Kannst Du bitte prüfen, ob die anderen vier individuellen Block-HTMLs diese jeweiligen Attribute und Bildklassen bereits korrekt enthalten? Dann sollte eine einzige gemeinsame `render.js` weiterhin für alle fünf Blöcke ausreichen.
Code: Alles auswählen
<section data-bs-version="5.1" class="vn-formrender" group="Form" id="{{mbr-id}}" style="
background: {{bgColor}};
--vfr-label: {{labelColor}};
--vfr-heading-color: {{headingColor}};
--vfr-inbg: {{inputBg}};
--vfr-inbrd: {{inputBorderColor}};
--vfr-intext: {{inputTextColor}};
--vfr-accent: {{accentColor}};
--vfr-required: {{requiredColor}};
--vfr-form-maxwidth: {{formMaxWidth}}px;
--vfr-charcounter-color: {{charCounterColor}};
--vfr-progress-color: {{progressBarColor}};
--vfr-radius: {{inputRadius}}px;
--vfr-btn-radius: {{buttonRadius}}px;
--vfr-gap: {{fieldGap}}px;
--vfr-heading-size: {{headingFontSize}}px;
--vfr-label-size: {{labelFontSize}}px;
--vfr-input-size: {{inputFontSize}}px;
--vfr-button-size: {{buttonFontSize}}px;
--vfr-status-size: {{statusFontSize}}px;
">
<style>
.vn-formrender {
font-family: var(--vfr-font, inherit);
}
.vn-formrender .vnfr-placeholder {
text-align: center;
padding: 40px 20px;
border: 2px dashed #ccc;
border-radius: 8px;
color: #888;
font-size: 14px;
}
.vn-formrender .vnfr-form {
display: flex;
flex-wrap: wrap;
gap: var(--vfr-gap, 16px);
}
.vn-formrender .vnfr-hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.vn-formrender .vnfr-field {
box-sizing: border-box;
display: flex;
flex-direction: column;
min-width: 0;
}
.vn-formrender .vnfr-field label {
font-size: var(--vfr-label-size, 14px);
font-weight: 600;
margin-bottom: 6px;
color: var(--vfr-label, #222222);
}
.vn-formrender .vnfr-field input[type="text"],
.vn-formrender .vnfr-field input[type="email"],
.vn-formrender .vnfr-field input[type="tel"],
.vn-formrender .vnfr-field input[type="url"],
.vn-formrender .vnfr-field input[type="number"],
.vn-formrender .vnfr-field input[type="date"],
.vn-formrender .vnfr-field input[type="file"],
.vn-formrender .vnfr-field select,
.vn-formrender .vnfr-field textarea {
width: 100%;
box-sizing: border-box;
padding: 10px 12px;
border: 1px solid var(--vfr-inbrd, #cccccc);
border-radius: var(--vfr-radius, 6px);
font-size: var(--vfr-input-size, 14px);
font-family: inherit;
background: var(--vfr-inbg-alpha, var(--vfr-inbg, #ffffff));
color: var(--vfr-intext, #222222);
}
.vn-formrender .vnfr-field input:focus,
.vn-formrender .vnfr-field select:focus,
.vn-formrender .vnfr-field textarea:focus {
outline: none;
border-color: var(--vfr-accent, #e63946);
}
.vn-formrender .vnfr-req {
color: var(--vfr-required, #e63946);
}
.vn-formrender .vnfr-heading {
width: 100%;
font-size: var(--vfr-heading-size, 20px);
font-weight: 700;
border-bottom: 1px solid #eee;
padding-bottom: 8px;
color: var(--vfr-heading-color, #222222);
}
.vn-formrender .vnfr-consent {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: var(--vfr-label-size, 13px);
color: var(--vfr-label, #222222);
}
.vn-formrender .vnfr-consent a {
color: var(--vfr-accent, #e63946);
text-decoration: underline;
}
.vn-formrender .vnfr-consent input {
margin-top: 3px;
}
.vn-formrender .vnfr-captcha {
background: var(--vfr-inbg-alpha, var(--vfr-inbg, #f0f4f8));
border: 1px dashed var(--vfr-inbrd, #b8c4d0);
border-radius: var(--vfr-radius, 6px);
padding: 10px 12px;
display: flex;
align-items: center;
gap: 10px;
font-size: var(--vfr-input-size, 13px);
color: var(--vfr-intext, #222222);
}
.vn-formrender .vnfr-captcha-transparent .vnfr-captcha {
background: transparent !important;
}
.vn-formrender .vnfr-captcha input {
width: 70px;
padding: 6px;
border: 1px solid var(--vfr-inbrd, #cccccc);
border-radius: 4px;
font-size: var(--vfr-input-size, 14px);
}
.vn-formrender .vnfr-field.vnfr-hcaptcha-field {
width: 100% !important;
max-width: 100%;
overflow: visible;
}
.vn-formrender .vnfr-hcaptcha-wrap {
width: 100%;
max-width: 100%;
padding-right: 3px;
box-sizing: border-box;
overflow: visible;
}
.vn-formrender .h-captcha {
display: block;
max-width: none;
overflow: visible;
}
.vn-formrender .vnfr-radio {
display: flex;
align-items: center;
gap: 8px;
font-size: var(--vfr-input-size, 14px);
font-weight: 400;
color: var(--vfr-label, #222222);
}
.vn-formrender .vnfr-submit {
background: var(--vfr-accent, #e63946);
color: #fff;
border: none;
border-radius: var(--vfr-btn-radius, 24px);
padding: 12px 28px;
font-size: var(--vfr-button-size, 14px);
font-weight: 700;
cursor: pointer;
margin-top: 20px;
}
.vn-formrender .vnfr-status {
margin-top: 14px;
padding: 10px 14px;
border-radius: 6px;
font-size: var(--vfr-status-size, 13px);
width: 100%;
}
.vn-formrender .vnfr-status-ok {
background: #e8f7ee;
color: #1d9e75;
border: 1px solid #b7e6c9;
}
.vn-formrender .vnfr-status-error {
background: #fdeceb;
color: #e63946;
border: 1px solid #f5c2c2;
}
.vn-formrender.vnfr-inputstyle-underline .vnfr-field input[type="text"],
.vn-formrender.vnfr-inputstyle-underline .vnfr-field input[type="email"],
.vn-formrender.vnfr-inputstyle-underline .vnfr-field input[type="tel"],
.vn-formrender.vnfr-inputstyle-underline .vnfr-field input[type="url"],
.vn-formrender.vnfr-inputstyle-underline .vnfr-field input[type="number"],
.vn-formrender.vnfr-inputstyle-underline .vnfr-field input[type="date"],
.vn-formrender.vnfr-inputstyle-underline .vnfr-field select,
.vn-formrender.vnfr-inputstyle-underline .vnfr-field textarea {
border: none;
border-bottom: 2px solid var(--vfr-inbrd, #cccccc);
border-radius: 0;
padding-left: 2px;
padding-right: 2px;
background: transparent;
}
.vn-formrender.vnfr-inputstyle-underline .vnfr-field input:focus,
.vn-formrender.vnfr-inputstyle-underline .vnfr-field select:focus,
.vn-formrender.vnfr-inputstyle-underline .vnfr-field textarea:focus {
border-bottom-color: var(--vfr-accent, #e63946);
}
.vn-formrender .vnfr-fotokarte-img,
.vn-formrender .vnfr-hintergrund-bgimg {
max-width: 300px;
max-height: 200px;
object-fit: cover;
border-radius: 8px;
margin-bottom: 12px;
}
.vn-formrender .vnfr-fotokarte-img.vnfr-img-active {
display: block !important;
flex: 1 1 320px !important;
min-height: 280px;
min-width: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
max-height: none !important;
object-fit: cover !important;
margin-bottom: 0;
border-radius: 0;
}
.vn-formrender .vnfr-hintergrund-bgimg.vnfr-img-active {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
object-fit: cover;
z-index: 0;
margin-bottom: 0;
border-radius: 0;
}
.vn-formrender .vnfr-builder-dummy .vnfr-dummy-img-static.vnfr-img-active {
position: static !important;
inset: auto !important;
width: 100% !important;
height: 180px !important;
border-radius: 8px !important;
z-index: auto !important;
}
.vn-formrender .vnfr-standard-wrap {
max-width: var(--vfr-form-maxwidth, 700px);
margin: 0 auto;
}
.vn-formrender .vnfr-fotokarte-wrap {
display: flex;
flex-wrap: wrap;
align-items: stretch;
gap: 0;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}
.vn-formrender .vnfr-fotokarte-form {
flex: 1 1 320px;
min-width: 0;
padding: 32px;
background: var(--vfr-inbg, #fff);
}
.vn-formrender .vnfr-hintergrund-outer {
position: relative;
padding: 60px 20px;
background-size: cover;
background-position: center;
border-radius: 16px;
overflow: hidden;
}
.vn-formrender .vnfr-hintergrund-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: 1;
}
.vn-formrender .vnfr-hintergrund-card {
position: relative;
z-index: 2;
max-width: var(--vfr-form-maxwidth, 560px);
margin: 0 auto;
background: var(--vfr-inbg, #fff);
border-radius: 16px;
padding: 32px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}
.vn-formrender .vnfr-bildrahmen-outer {
position: relative;
max-width: var(--vfr-form-maxwidth, 560px);
margin: 0 auto;
border-radius: 16px;
overflow: hidden;
padding: 32px;
box-sizing: border-box;
}
.vn-formrender .vnfr-bildrahmen-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.35);
z-index: 1;
}
.vn-formrender .vnfr-bildrahmen-content {
position: relative;
z-index: 2;
}
.vn-formrender .vnfr-overlay-trigger {
background: var(--vfr-accent, #e63946);
color: #fff;
border: none;
border-radius: 24px;
padding: 14px 32px;
font-size: 15px;
font-weight: 700;
cursor: pointer;
display: block;
margin: 0 auto;
}
.vn-formrender .vnfr-overlay-modal {
display: none;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 999990;
align-items: center;
justify-content: center;
padding: 20px;
}
.vn-formrender .vnfr-overlay-modal.vnfr-open {
display: flex;
}
.vn-formrender .vnfr-overlay-card {
background: var(--vfr-inbg, #fff);
border-radius: 16px;
padding: 32px;
max-width: 560px;
width: 100%;
max-height: 90vh;
overflow: auto;
position: relative;
}
.vn-formrender .vnfr-overlay-close {
position: absolute;
top: 12px;
right: 16px;
background: none;
border: none;
font-size: 24px;
cursor: pointer;
color: var(--vfr-label, #222);
}
.vn-formrender .vnfr-shadow-soft {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.vn-formrender .vnfr-shadow-medium {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.vn-formrender .vnfr-shadow-strong {
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
}
.vn-formrender .vnfr-borderless {
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
}
.vn-formrender .vnfr-sticky {
position: sticky;
top: 20px;
}
.vn-formrender .vnfr-compact .vnfr-field {
margin-bottom: 0;
}
.vn-formrender .vnfr-compact .vnfr-field label {
margin-bottom: 3px;
font-size: 0.9em;
}
.vn-formrender .vnfr-compact input,
.vn-formrender .vnfr-compact textarea,
.vn-formrender .vnfr-compact select {
padding: 6px 8px !important;
}
.vn-formrender .vnfr-compact .vnfr-submit {
padding: 8px 20px !important;
}
.vn-formrender .vnfr-twocol .vnfr-field:not([data-fullwidth="1"]) {
width: calc(50% - var(--vfr-gap, 16px) / 2) !important;
}
@media (max-width: 600px) {
.vn-formrender .vnfr-mobile-fullwidth .vnfr-field {
width: 100% !important;
}
}
.vn-formrender .vnfr-input-icon-row {
position: relative;
}
.vn-formrender .vnfr-input-icon-row .vnfr-field-icon {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
opacity: 1;
pointer-events: none;
}
.vn-formrender .vnfr-input-icon-row input,
.vn-formrender .vnfr-input-icon-row textarea,
.vn-formrender .vnfr-input-icon-row select {
padding-left: 32px !important;
}
.vn-formrender .vnfr-input-icon-row .vnfr-field-valid-icon {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
color: #1d9e75;
font-weight: 700;
display: none;
}
.vn-formrender .vnfr-field-valid-icon {
position: absolute;
right: 10px;
top: 34px;
color: #1d9e75;
font-weight: 700;
display: none;
}
.vn-formrender .vnfr-field-valid-icon.vnfr-show {
display: block;
}
.vn-formrender .vnfr-char-counter {
font-size: 11px;
color: var(--vfr-charcounter-color, #999);
text-align: right;
margin-top: 3px;
}
.vn-formrender .vnfr-file-hint {
font-size: 11px;
color: #999;
margin-top: 4px;
}
.vn-formrender .vnfr-sig-wrap {
border: 1px solid var(--vfr-inbrd, #cccccc);
border-radius: var(--vfr-radius, 6px);
background: var(--vfr-inbg, #ffffff);
overflow: hidden;
}
.vn-formrender .vnfr-sig-canvas {
display: block;
width: 100%;
height: 140px;
touch-action: none;
cursor: crosshair;
}
.vn-formrender .vnfr-sig-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 10px;
border-top: 1px solid var(--vfr-inbrd, #cccccc);
font-size: 11px;
color: #999;
}
.vn-formrender .vnfr-sig-clear {
background: none;
border: none;
color: var(--vfr-accent, #e63946);
font-size: 12px;
cursor: pointer;
padding: 2px 6px;
}
.vn-formrender .vnfr-file-hint.vnfr-file-error {
color: var(--vfr-accent, #e63946);
font-weight: 600;
}
.vn-formrender .vnfr-file-hint a {
color: var(--vfr-accent, #e63946);
text-decoration: underline;
font-weight: 700;
}
.vn-formrender .vnfr-submit-icon {
margin-left: 6px;
}
.vn-formrender .vnfr-progress-wrap {
width: 100%;
height: 6px;
background: #eee;
border-radius: 3px;
margin-bottom: 20px;
overflow: hidden;
}
.vn-formrender .vnfr-progress-bar {
height: 100%;
background: var(--vfr-progress-color, var(--vfr-accent, #e63946));
width: 0%;
transition: width 0.3s ease;
}
.vn-formrender .vnfr-page-hidden {
display: none !important;
}
.vn-formrender .vnfr-page-nav {
display: flex;
justify-content: space-between;
gap: 12px;
width: 100%;
margin-top: 6px;
}
.vn-formrender .vnfr-page-nav-spacer {
flex: 1;
}
.vn-formrender .vnfr-page-back {
background: transparent;
border: 1.5px solid var(--vfr-inbrd, #cccccc);
color: var(--vfr-intext, #222222);
border-radius: var(--vfr-btn-radius, 24px);
padding: 12px 28px;
font-size: var(--vfr-button-size, 14px);
font-weight: 700;
cursor: pointer;
}
.vn-formrender .vnfr-page-next {
background: var(--vfr-accent, #e63946);
color: #fff;
border: none;
border-radius: var(--vfr-btn-radius, 24px);
padding: 12px 28px;
font-size: var(--vfr-button-size, 14px);
font-weight: 700;
cursor: pointer;
}
.vn-formrender .vnfr-success-check {
width: 60px;
height: 60px;
border-radius: 50%;
background: #1d9e75;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
margin: 0 auto 12px;
animation: vnfr-pop 0.4s ease;
}
@keyframes vnfr-pop {
0% { transform: scale(0); }
70% { transform: scale(1.15); }
100% { transform: scale(1); }
}
.vn-formrender .vnfr-confetti {
position: fixed;
top: -10px;
font-size: 18px;
animation: vnfr-fall linear forwards;
z-index: 999995;
pointer-events: none;
}
@keyframes vnfr-fall {
to {
transform: translateY(100vh) rotate(360deg);
opacity: 0;
}
}
.vn-formrender .vnfr-builder-dummy { display: none; }
html.is-builder .vn-formrender .vnfr-builder-dummy { display: block; }
html.is-builder .vn-formrender .vnfr-out { display: none; }
.vn-formrender .vnfr-builder-dummy .vnfr-form input,
.vn-formrender .vnfr-builder-dummy .vnfr-form textarea,
.vn-formrender .vnfr-builder-dummy .vnfr-submit {
pointer-events: none;
}
</style>
<mbr-parameters>
<header>Formular-Konfiguration</header>
<input type="text" title="JSON-Dateiname (ohne Pfad/Endung, z.B. form-1)" name="formFile" value="form-renderer">
<input type="text" title="Empfänger-E-Mail" name="recipientEmail" value="Tommy@TommyHerrmannDesign.com" placeholder="deine@email.de">
<input type="text" title="Betreff der E-Mail" name="emailSubject" value="Nachricht von Tommys VN Formular">
<input type="checkbox" title="Kopie an Absender (Fallback, falls kein 'Kopie an mich'-Feld im Formular existiert)" name="copyToSender" checked>
<input type="text" title="Eigene Danke-Seite (URL, leer = normale Erfolgsmeldung im Formular)" name="thankYouUrl" value placeholder="/danke.html oder https://...">
<header>Stil: Hintergrund</header>
<input type="image" title="Hintergrundbild" name="backgroundImage" value="assets/images/mbr-20.jpg">
<input type="color" title="Karten-Hintergrundfarbe" name="cardBg" value="#ffffff" selected>
<input type="range" inline title="Karten-Transparenz (%)" name="cardOpacity" min="10" max="100" step="5" value="50">
<header>Layout</header>
<input type="checkbox" title="Full Width" name="fullWidth" checked>
<input type="range" inline title="Oben" name="paddingTop" min="0" max="12" step="1" value="4">
<input type="range" inline title="Unten" name="paddingBottom" min="0" max="12" step="1" value="4">
<input type="range" inline title="Abstand zw. Feldern (px)" name="fieldGap" min="8" max="40" step="2" value="10">
<header>Farben</header>
<input type="color" title="Hintergrund" name="bgColor" value="#2159c2" selected>
<input type="color" title="Label-Text" name="labelColor" value="#ffffff" selected>
<input type="color" title="Überschrift-Farbe" name="headingColor" value="#ffffff" selected>
<input type="color" title="Feld-Hintergrund" name="inputBg" value="#ffffff" selected>
<input type="range" inline title="Feld-Hintergrund-Transparenz (%)" name="inputBgOpacity" min="10" max="100" step="5" value="60">
<input type="color" title="Feld-Rahmen" name="inputBorderColor" value="#ffffff" selected>
<input type="color" title="Feld-Text" name="inputTextColor" value="#222222" selected>
<input type="color" title="Akzent (Button/Fokus)" name="accentColor" value="#6ec7f2" selected>
<input type="color" title="Farbe der Pflichtfeld-Sternchen" name="requiredColor" value="#ffffff" selected>
<input type="range" inline title="Formular-Breite (px)" name="formMaxWidth" min="320" max="1200" step="10" value="750">
<header>Feld-Stil</header>
<select title="Feld-Optik" name="inputStyle">
<option value="boxed" selected>Boxen (mit Rahmen)</option>
<option value="underline">Linien (nur Unterstrich)</option>
</select>
<input type="range" inline title="Eckenrundung Felder (px)" name="inputRadius" min="0" max="24" step="1" value="10">
<input type="range" inline title="Eckenrundung Button (px)" name="buttonRadius" min="0" max="30" step="1" value="30">
<header>Schriftgrößen</header>
<input type="range" inline title="Überschrift (px)" name="headingFontSize" min="14" max="40" step="1" value="30">
<input type="range" inline title="Label (px)" name="labelFontSize" min="10" max="24" step="1" value="18">
<input type="range" inline title="Eingabefeld (px)" name="inputFontSize" min="10" max="24" step="1" value="18">
<input type="range" inline title="Button (px)" name="buttonFontSize" min="10" max="24" step="1" value="18">
<input type="range" inline title="Meldung (px)" name="statusFontSize" min="10" max="20" step="1" value="16">
<input type="text" title="Eigene Google Font (leer = Seiten-Schrift)" name="customFont" value placeholder="z.B. Poppins, Roboto, Inter">
<header>Layout-Extras</header>
<input type="checkbox" title="Automatisches 2-Spalten-Layout" name="twoColumns">
<input type="checkbox" title="Am Handy eigene Feldbreite behalten (statt automatisch volle Breite)" name="mobileKeepWidth" checked>
<input type="checkbox" title="Randlos/Minimal (kein Karten-Hintergrund)" name="borderless" checked>
<input type="checkbox" title="Formular fixiert beim Scrollen (Sticky)" name="stickyForm">
<input type="checkbox" title="Kompakt-Modus (engere Abstände)" name="compactMode">
<input type="checkbox" title="Eckenrundungen synchronisieren (Button folgt Feld-Rundung)" name="syncRadius">
<header>Karten-Effekte</header>
<select title="Schatten-Stärke" name="shadowLevel">
<option value="none">Kein Schatten</option>
<option value="soft">Leicht</option>
<option value="medium" selected>Mittel</option>
<option value="strong">Stark</option>
</select>
<header>Feld-Extras</header>
<input type="checkbox" title="Icons vor Feld-Labels" name="showFieldIcons">
<input type="range" inline title="Max. Dateigröße bei Datei-Upload (MB)" name="maxFileSizeMB" min="1" max="8" step="1" value="3">
<input type="checkbox" title="Captcha-Box transparent (kein eigener Hintergrund)" name="captchaTransparent" checked>
<input type="checkbox" title="Live-Validierung mit Häkchen" name="liveValidation" checked>
<input type="checkbox" title="Zeichenzähler bei Textarea" name="charCounter" checked>
<input type="color" title="Farbe des Zeichenzählers" name="charCounterColor" value="#ffffff" selected>
<input type="checkbox" title="Fortschrittsbalken bei mehreren Überschriften" name="showProgressBar">
<input type="color" title="Farbe des Fortschrittsbalkens" name="progressBarColor" value="#e63946" selected>
<header>Mehrseitiges Formular</header>
<input type="checkbox" title="Überschriften werden zu eigenen Seiten (Weiter/Zurück statt Scrollen)" name="multiStep">
<input type="text" title="Text Weiter-Button" name="multiStepNextText" value="Weiter">
<input type="text" title="Text Zurück-Button" name="multiStepBackText" value="Zurück">
<header>hCaptcha</header>
<select title="hCaptcha-Darstellung" name="hcaptchaSize">
<option value="normal" selected>Normal</option>
<option value="compact">Kompakt</option>
</select>
<select title="hCaptcha-Design" name="hcaptchaTheme">
<option value="light">Hell</option>
<option value="dark" selected>Dunkel</option>
</select>
<header>Button & Erfolg</header>
<select title="Icon im Absenden-Button" name="submitIcon">
<option value="none">Kein Icon</option>
<option value="arrow">Pfeil →</option>
<option value="check" selected>Haken ✓</option>
<option value="paperplane">Papierflieger ✈</option>
</select>
<input type="checkbox" title="Erfolgs-Animation nach Absenden" name="successAnimation" checked>
</mbr-parameters>
<div class="vnfr-data" data-formfile="{{formFile}}" data-recipient="{{recipientEmail}}" data-subject="{{emailSubject}}" data-copytosender="{{copyToSender}}" data-thankyouurl="{{thankYouUrl}}" data-style="hintergrund" data-backgroundimage="{{backgroundImage}}" data-inputstyle="{{inputStyle}}" data-inputbg="{{inputBg}}" data-inputbgopacity="{{inputBgOpacity}}" data-cardbg="{{cardBg}}" data-cardopacity="{{cardOpacity}}" data-customfont="{{customFont}}" data-twocolumns="{{twoColumns}}" data-mobilekeepwidth="{{mobileKeepWidth}}" data-borderless="{{borderless}}" data-stickyform="{{stickyForm}}" data-compactmode="{{compactMode}}" data-syncradius="{{syncRadius}}" data-shadowlevel="{{shadowLevel}}" data-showfieldicons="{{showFieldIcons}}" data-maxfilesizemb="{{maxFileSizeMB}}" data-captchatransparent="{{captchaTransparent}}" data-livevalidation="{{liveValidation}}" data-charcounter="{{charCounter}}" data-showprogressbar="{{showProgressBar}}" data-multistep="{{multiStep}}" data-multistepnexttext="{{multiStepNextText}}" data-multistepbacktext="{{multiStepBackText}}" data-hcaptchasize="{{hcaptchaSize}}" data-hcaptchatheme="{{hcaptchaTheme}}" data-submiticon="{{submitIcon}}" data-successanimation="{{successAnimation}}" style="display:none;"></div>
<div mbr-class="{'container':!fullWidth,'container-fluid':fullWidth}" style="padding-top:{{paddingTop}}rem;padding-bottom:{{paddingBottom}}rem;">
<div class="vnfr-builder-dummy">
<div>
<img src="file:///C:/Users/Thoma/Documents/Mobirise/VN-Block-Galerie/assets/images/mbr-20.jpg" class="vnfr-hintergrund-bgimg vnfr-img-active vnfr-dummy-img-static" data-app-selector=".vnfr-hintergrund-bgimg" alt="Background">
<div class="vnfr-hintergrund-card" style="position:static;margin-top:12px;box-shadow:none;">
<form class="vnfr-form" onsubmit="return false;">
<div class="vnfr-field" style="width:calc(50% - var(--vfr-gap, 16px))">
<label>Name</label>
<input type="text" placeholder="Dein Name" disabled>
</div>
<div class="vnfr-field" style="width:calc(50% - var(--vfr-gap, 16px))">
<label>Email</label>
<input type="email" placeholder="deine@email.de" disabled>
</div>
<div class="vnfr-field" style="width:100%">
<label>Nachricht</label>
<textarea placeholder="Deine Nachricht" disabled rows="2"></textarea>
</div>
<div class="vnfr-field" style="width:auto" data-fullwidth="1">
<button type="button" class="vnfr-submit" disabled>Absenden</button>
</div>
</form>
</div>
</div>
<div class="vnfr-placeholder" style="margin-top:14px;padding:10px;font-size:12px;">📋 VN Formular Hintergrund – Nur eine Voransicht (Bild per Doppelklick änderbar). Echtes Formular wird nach dem Publish aus der JSON-Datei geladen.</div>
</div>
<div class="vnfr-out"></div>
</div>
<script>
(function() {
var sec = document.currentScript ?
document.currentScript.closest('section.vn-formrender') :
document.querySelector('section.vn-formrender');
if (!sec) return;
var ds = sec.querySelector('.vnfr-data');
if (!ds) return;
function attrEarly(name) {
var v = ds.getAttribute(name);
if (!v || v.indexOf('{{') !== -1) return '';
return v.trim();
}
function truthyEarly(v) {
return v === 'true' || v === 'on' || v === '1';
}
if (document.documentElement.classList.contains('is-builder')) {
var dummy = sec.querySelector('.vnfr-builder-dummy');
if (dummy) {
var shadowLevel = attrEarly('data-shadowlevel') || 'soft';
var borderless = truthyEarly(attrEarly('data-borderless'));
var compactMode = truthyEarly(attrEarly('data-compactmode'));
var submitIcon = attrEarly('data-submiticon') || 'none';
var customFont = attrEarly('data-customfont');
var host = dummy.querySelector(
'.vnfr-standard-wrap, .vnfr-fotokarte-form, .vnfr-hintergrund-card, .vnfr-bildrahmen-content'
);
if (host) {
if (shadowLevel && shadowLevel !== 'none') {
host.classList.add('vnfr-shadow-' + shadowLevel);
}
if (borderless) {
host.classList.add('vnfr-borderless');
}
}
var formEl = dummy.querySelector('.vnfr-form');
if (formEl && compactMode) {
formEl.classList.add('vnfr-compact');
}
var submitBtn = dummy.querySelector('.vnfr-submit');
var ICONS_EARLY = {
arrow: ' →',
check: ' ✓',
paperplane: ' ✈'
};
if (submitBtn && ICONS_EARLY[submitIcon]) {
submitBtn.innerHTML += '<span class="vnfr-submit-icon">' +
ICONS_EARLY[submitIcon] + '</span>';
}
if (customFont) {
var fontLinkEarly = document.createElement('link');
fontLinkEarly.rel = 'stylesheet';
fontLinkEarly.href = 'https://fonts.googleapis.com/css2?family=' +
encodeURIComponent(customFont).replace(/%20/g, '+') +
':wght@400;600;700&display=swap';
document.head.appendChild(fontLinkEarly);
sec.style.setProperty('--vfr-font', '"' + customFont + '", inherit');
}
}
return;
}
function getAssetsBasePathEarly() {
var ref = document.querySelector(
'link[href*="assets/"], script[src*="assets/"]'
);
if (ref) {
var url = ref.getAttribute('href') || ref.getAttribute('src');
var idx = url.indexOf('assets/');
if (idx !== -1) {
return url.substring(0, idx + 'assets/'.length);
}
}
return 'assets/';
}
sec.setAttribute('data-vnfr-pending', '1');
var renderScript = document.createElement('script');
renderScript.async = false;
renderScript.src = getAssetsBasePathEarly() + 'vn-formrender-js/render.js';
document.head.appendChild(renderScript);
})();
</script>
</section>
Mit dem Finger geht aberTommy Herrmann hat geschrieben: Fr 31. Jul 2026, 16:11 Das mit der Unterschrift funktioniert irgendwie so gar nicht - das kannst Du eigentlich wieder raus machen. Wenn ich links die Maus ansetze, fängt es ganz rechts an zu schreiben und das ist mit der Maus restlos unmöglich zu kontrollieren.
Ich lass es mal drin. 
https://www.mobirise-tutorials.com/VN-B ... derer.html
Mitglieder in diesem Forum: struggle und 5 Gäste