Siehts Du eigentlich die leicht blau gefärbten Überschriften hier im Screenshot und im Generator ?
Wenn nicht - DANN lass den Kalibrieungstest laufen !!!!
Formular Generator für Mobirise
Re: Formular Generator für Mobirise
Nur mal eine Frage Tommy:
Siehts Du eigentlich die leicht blau gefärbten Überschriften hier im Screenshot und im Generator ?
Wenn nicht - DANN lass den Kalibrieungstest laufen !!!!
Siehts Du eigentlich die leicht blau gefärbten Überschriften hier im Screenshot und im Generator ?
Wenn nicht - DANN lass den Kalibrieungstest laufen !!!!
-
Tommy Herrmann
- Site Admin
- Beiträge: 9304
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Formular Generator für Mobirise
Ja sehe ich klar und deutlich 
Re: Formular Generator für Mobirise
Tommy,
sollte man dem Fischkopp auch mal zeigen den Generator
Dann wird er wieder eskalieren
sollte man dem Fischkopp auch mal zeigen den Generator
Dann wird er wieder eskalieren
-
Tommy Herrmann
- Site Admin
- Beiträge: 9304
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Formular Generator für Mobirise
Der liest doch hier jede Zeile mit, ganz sicher.
Das Hersteller-Forum ist mir ausgesprochen unangenehm geworden. Auch der Support antwortet auf fast gar nichts mehr.
Das Hersteller-Forum ist mir ausgesprochen unangenehm geworden. Auch der Support antwortet auf fast gar nichts mehr.
Re: Formular Generator für Mobirise
So,
wenn ich schon so geile Sachen baue, dann muss ich die ja auch mal selber nutzen
Hier mein neues Kontaktformular
https://www.niederastroth.de/vntabs
wenn ich schon so geile Sachen baue, dann muss ich die ja auch mal selber nutzen
Hier mein neues Kontaktformular
https://www.niederastroth.de/vntabs
-
Tommy Herrmann
- Site Admin
- Beiträge: 9304
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Formular Generator für Mobirise
Moin,
was mir noch auffällt — und ich glaube, das ist auch bei etlichen anderen Anwendungen so: Du vergibst ein und derselben Anwendung unterschiedliche Namen.
Beispiel → auf meiner Tutorialseite steht:
Die Anwendung heißt auch „VN Form Renderer“ - zumindest nach der Installation in Mobirise - nur eben nicht in der Block-Galerie, dort steht sie als
Ja - was denn nun
Wenn Du den Dateinamen als Bezeichnung einer Anwendung verwendest, solltest Du ihn beibehalten und der Anwendung genau diesen Namen geben. Andernfalls führt das zu erheblicher Verwirrung, und es bleibt unklar, ob man gerade die richtige Anwendung installiert.
In diesem Beispiel sollte die Anwendung nach der Installation ebenfalls
Die einzelnen fünf Block-Themen vom „VN Form Renderer“ heißen dann nochmals anders - haben dann also eine dritte Bezeichnung - nämlich "VN Formular Standard" usw.
Ein "Renderer" (eingedeutscht oft Renderer oder als Verb rendern) ist ein Computerprogramm oder ein Bauteil, das Rohdaten in ein sichtbares Bild, ein Video oder eine Grafik umwandelt. Das Wort leitet sich vom englischen to render (wörtlich: machen, leisten oder wiedergeben) ab.
was mir noch auffällt — und ich glaube, das ist auch bei etlichen anderen Anwendungen so: Du vergibst ein und derselben Anwendung unterschiedliche Namen.
Beispiel → auf meiner Tutorialseite steht:
Tommy hat geschrieben:
Diese Anwendung könnt ihr in der VN Block Galerie unter dem Namen „VN Form Renderer“ in der Kategorie „Mobirise & PHP“ kostenlos herunterladen.
Die Anwendung heißt auch „VN Form Renderer“ - zumindest nach der Installation in Mobirise - nur eben nicht in der Block-Galerie, dort steht sie als
vn-formrender
Ja - was denn nun
Wenn Du den Dateinamen als Bezeichnung einer Anwendung verwendest, solltest Du ihn beibehalten und der Anwendung genau diesen Namen geben. Andernfalls führt das zu erheblicher Verwirrung, und es bleibt unklar, ob man gerade die richtige Anwendung installiert.
In diesem Beispiel sollte die Anwendung nach der Installation ebenfalls
vn-formrenderheißen und damit dieselbe Bezeichnung wie in der Block‑Galerie tragen.
Die einzelnen fünf Block-Themen vom „VN Form Renderer“ heißen dann nochmals anders - haben dann also eine dritte Bezeichnung - nämlich "VN Formular Standard" usw.
Ein "Renderer" (eingedeutscht oft Renderer oder als Verb rendern) ist ein Computerprogramm oder ein Bauteil, das Rohdaten in ein sichtbares Bild, ein Video oder eine Grafik umwandelt. Das Wort leitet sich vom englischen to render (wörtlich: machen, leisten oder wiedergeben) ab.
-
Tommy Herrmann
- Site Admin
- Beiträge: 9304
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Formular Generator für Mobirise
Moin,
ich habe noch einen Schalter eingebaut, mit dem man das Hintergrundbild randlos anzeigen kann. Dass sich das Bild nicht über die volle Breite und Höhe erstrecken ließ, empfand ich als ungewohnt und wenig ansprechend. In Mobirise werden Hintergrundbilder ebenfalls immer über den gesamten Block angewendet.
https://www.mobirise-tutorials.com/VN-B ... derer.html
Hier ist mein neuer HTML-Code für den Block, falls Du ihn übernehmen möchtest. Der neue Schalter für das randlose Hintergrundbild steht per Default auf "aus", so wird die ursprüngliche Anzeige beibehalten:
Wenn Du das noch machen solltest (was schön wäre) dann behebe doch auch gleich noch einen kleinen Fehler:
> Wenn man die Icons nicht in den Feldern anzeigt, bleibt ein völlig unschöner und irritierender linker Rand von 32px im Eingabefeld übrig. Der sollte in der CSS ausgeschaltet sein, sobald man keine Icons verwendet (ich habe das auf meiner Seite auch bereits korrigiert).
ich habe noch einen Schalter eingebaut, mit dem man das Hintergrundbild randlos anzeigen kann. Dass sich das Bild nicht über die volle Breite und Höhe erstrecken ließ, empfand ich als ungewohnt und wenig ansprechend. In Mobirise werden Hintergrundbilder ebenfalls immer über den gesamten Block angewendet.
https://www.mobirise-tutorials.com/VN-B ... derer.htmlHier ist mein neuer HTML-Code für den Block, falls Du ihn übernehmen möchtest. Der neue Schalter für das randlose Hintergrundbild steht per Default auf "aus", so wird die ursprüngliche Anzeige beibehalten:
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-next-bg: {{multiStepNextBg}};
--vfr-next-text: {{multiStepNextTextColor}};
--vfr-back-bg: {{multiStepBackBg}};
--vfr-back-text: {{multiStepBackTextColor}};
--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);
}
/*
=========================================================
HINTERGRUNDBILD ÜBER DEN GESAMTEN BLOCK
=========================================================
Die Klasse wird durch den neuen Schalter per JavaScript
direkt an die Section gesetzt.
Das Hintergrundbild und das Overlay orientieren sich dann
nicht mehr nur an .vnfr-hintergrund-outer, sondern an der
gesamten Section.
*/
.vn-formrender.vnfr-background-fullblock {
position: relative;
overflow: hidden;
}
.vn-formrender.vnfr-background-fullblock .vnfr-hintergrund-outer {
position: static;
border-radius: 0;
overflow: visible;
}
.vn-formrender.vnfr-background-fullblock
.vnfr-hintergrund-bgimg.vnfr-img-active {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
object-fit: cover;
object-position: center;
border-radius: 0;
margin: 0;
z-index: 0;
}
.vn-formrender.vnfr-background-fullblock
.vnfr-hintergrund-overlay {
position: absolute;
inset: 0;
border-radius: 0;
z-index: 1;
}
.vn-formrender.vnfr-background-fullblock
.vnfr-hintergrund-card {
position: relative;
z-index: 2;
}
.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);
}
/* hCaptcha: volle Formularbreite, keine horizontale Scrollleiste, Original-Widget-Größe */
.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;
}
/* Feld-Stil: Linien statt Boxen */
.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);
}
/* Bilder: im Editor immer sichtbar */
.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;
}
/* Nur im Editor-Dummy */
.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;
}
/* Stil-Varianten */
.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);
}
.vn-formrender .vnfr-hintergrund-card {
position: relative;
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);
}
.vn-formrender .vnfr-bildrahmen-content {
position: relative;
}
.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);
}
/* Schatten-Stufen */
.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);
}
/* Randlos/Minimal */
.vn-formrender .vnfr-borderless {
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
}
/* Sticky */
.vn-formrender .vnfr-sticky {
position: sticky;
top: 20px;
}
/* Kompakt-Modus */
.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;
}
/* 2-Spalten-Layout */
.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;
}
}
/* Feld-Icons */
.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;
}
/* Live-Validierung Häkchen */
.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;
}
/* Zeichenzähler */
.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;
}
/* Submit-Icon */
.vn-formrender .vnfr-submit-icon {
margin-left: 6px;
}
/* Fortschrittsbalken */
.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;
}
/* Mehrseitiges Formular */
.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: var(--vfr-back-bg, transparent);
border: 1.5px solid var(--vfr-inbrd, #cccccc);
color: var(
--vfr-back-text,
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-next-bg,
var(--vfr-accent, #e63946)
);
color: var(--vfr-next-text, #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;
}
/* Erfolgs-Animation */
.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;
}
}
/* Nur im Mobirise-Editor */
.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="checkbox" title="Hintergrundbild über den gesamten Block (ohne Ränder)" name="backgroundFullBlock">
<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">
<input type="color" title="Weiter-Button Hintergrund" name="multiStepNextBg" value="#e63946" selected>
<input type="color" title="Weiter-Button Text" name="multiStepNextTextColor" value="#ffffff" selected>
<input type="color" title="Zurück-Button Hintergrund" name="multiStepBackBg" value="#ffffff" selected>
<input type="color" title="Zurück-Button Text/Rahmen" name="multiStepBackTextColor" value="#222222" selected>
<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-backgroundfullblock="{{backgroundFullBlock}}" 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="Hintergrund-VN-Formular">
<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';
}
/*
=====================================================
NEUER SCHALTER: BILD ÜBER DEN GESAMTEN BLOCK
=====================================================
Die Klasse wird bereits vor dem Laden von render.js
an die jeweilige Section gesetzt.
Deshalb ist keine Änderung an render.js erforderlich.
*/
var backgroundFullBlock = truthyEarly(
attrEarly('data-backgroundfullblock')
);
sec.classList.toggle(
'vnfr-background-fullblock',
backgroundFullBlock
);
if (
document.documentElement.classList.contains(
'is-builder'
)
) {
/*
Nur kosmetische Eigenschaften auf den Editor-Dummy
anwenden. Das vollständige Formular wird erst live
aus der JSON-Datei aufgebaut.
*/
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;
}
/*
Ab hier: echte Live-Seite.
Die komplette Render-Engine liegt weiterhin in der
externen Datei render.js.
*/
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/';
}
/*
Section markieren, bevor render.js eingefügt wird.
*/
sec.setAttribute(
'data-vnfr-pending',
'1'
);
var renderScript =
document.createElement('script');
renderScript.async = false;
renderScript.src =
getAssetsBasePathEarly() +
'vn-formrender/render.js';
document.head.appendChild(
renderScript
);
/*
Bei mehreren Formularblöcken wird render.js durch den
Browser aus dem Cache geladen, aber für jede Section
erneut ausgeführt.
*/
})();
</script>
</section>Wenn Du das noch machen solltest (was schön wäre) dann behebe doch auch gleich noch einen kleinen Fehler:
> Wenn man die Icons nicht in den Feldern anzeigt, bleibt ein völlig unschöner und irritierender linker Rand von 32px im Eingabefeld übrig. Der sollte in der CSS ausgeschaltet sein, sobald man keine Icons verwendet (ich habe das auf meiner Seite auch bereits korrigiert).
Re: Formular Generator für Mobirise
Moin Tommy,
alle Änderungen sind jetzt drin.
Ja die heißt VN-Form-Renderer !! Aber da ich ja ca. 70 Versionen gemacht habe bis jetzt und ich ja auch faul bin, hab ich die mbrext immer vn-formrender genannt Wenn alles Final ist werde ich die auch VN-Form-Renderer.mbrext nennen Das nennt man Arbeitsname Tommy
Teste jetzt erstmal die neue Version...
Die 5 Blöcke bleiben bei den Namen. VN Formular - wer das nicht blickt - sorry kann ich jetzt nicht mehr ändern und werde ich auch nicht. Die haben ja extra unten die Bezeichnung stehen. DAs hat sonst ja keiner meiner Blöcke, somit weiß man eigentlich das die zum Form Renderer gehören.
alle Änderungen sind jetzt drin.
Ja die heißt VN-Form-Renderer !! Aber da ich ja ca. 70 Versionen gemacht habe bis jetzt und ich ja auch faul bin, hab ich die mbrext immer vn-formrender genannt
Wenn alles Final ist werde ich die auch VN-Form-Renderer.mbrext nennen Das nennt man Arbeitsname Tommy Teste jetzt erstmal die neue Version...
Die 5 Blöcke bleiben bei den Namen. VN Formular - wer das nicht blickt - sorry kann ich jetzt nicht mehr ändern und werde ich auch nicht. Die haben ja extra unten die Bezeichnung stehen. DAs hat sonst ja keiner meiner Blöcke, somit weiß man eigentlich das die zum Form Renderer gehören.
Re: Formular Generator für Mobirise
Finale
Jetzt heißt der auch in der Block Galerie vn-form-renderer
https://www.niederastroth.de/kontakt.html Auch auf meiner Seite nun eingebaut.
Jetzt keine Änderungen mehr !!!! Fertig !!!! Endgültig !!!!!
https://www.niederastroth.de/mobirisebl ... rise%26PHP
Jetzt heißt der auch in der Block Galerie vn-form-renderer
https://www.niederastroth.de/kontakt.html Auch auf meiner Seite nun eingebaut.
Jetzt keine Änderungen mehr !!!! Fertig !!!! Endgültig !!!!!
https://www.niederastroth.de/mobirisebl ... rise%26PHP
-
Tommy Herrmann
- Site Admin
- Beiträge: 9304
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Formular Generator für Mobirise
Volker hat geschrieben: Sa 1. Aug 2026, 09:07 Jetzt keine Änderungen mehr !!!! Fertig !!!! Endgültig !!!!!
-
Tommy Herrmann
- Site Admin
- Beiträge: 9304
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Formular Generator für Mobirise
Ich brauch glaub auch eine Leihmutter
@Tommy:
Ich habe bewusst mein Mathe Captcha bei mir aktiviert. Mal sehen ob Bots durch kommen und wenn ja wie viele
Ich denke mal da werden so gut wie keine kommen - aber ich werde berichten
@Tommy:
Ich habe bewusst mein Mathe Captcha bei mir aktiviert. Mal sehen ob Bots durch kommen und wenn ja wie viele
Ich denke mal da werden so gut wie keine kommen - aber ich werde berichten
-
Tommy Herrmann
- Site Admin
- Beiträge: 9304
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Formular Generator für Mobirise
Ja, habe ich gesehen und der Grund war mir auch klar.
Glaube da kommt keiner durch, bzw. versucht es gar nicht erst. Meine Seite war damals bereits ca. 6 Jahre online mit einem Top-Ranking.
Das gehackte Formular mit dem Mathe Captcha war damals hier. Suche bei Google mal nach:
Mobirise Tutorials Kontakt
Glaube da kommt keiner durch, bzw. versucht es gar nicht erst. Meine Seite war damals bereits ca. 6 Jahre online mit einem Top-Ranking.
Das gehackte Formular mit dem Mathe Captcha war damals hier. Suche bei Google mal nach:
Mobirise Tutorials Kontakt
Wer ist online?
Mitglieder in diesem Forum: struggle und 5 Gäste