I need that the button "next" stay down and the button "back" up in the page, but when I configure this in the Layout HTML the back button shows but does not work anymore :-(
The placeholder %button.back% shows the back button but without function. When I put the placeholder %button.submit% I am getting the next button and if the side has the config option('backbutton',true); I'm getting the back button too and they are both working. how can I fix the function of they placeholder %button.back%, cause I really need the buttons to be in different places in the screen.
P.S. the placeholder %button.next% works fine
<!DOCTYPE html>
<html>
<head>
%head%
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
/* Fügt einen Abstand am unteren Rand des Body hinzu */
body { padding-bottom: 20px }
/* Definiert die Eigenschaften des Containers für das Frageformular */
div.questionary { min-width: 320px; max-width: %width%; padding: 0 10px; margin: 0 auto; box-sizing: border-box; }
/* Stil für das Logo des Frageformulars */
div#s2t-logo { margin-top: 18px }
/* Stellt sicher, dass das Logo die volle Breite einnimmt, aber die Proportionen beibehält */
img.s2-logo { max-width: 100%; vertical-align: top }
/* Stil für den Fortschrittsbalken, der rechts oben positioniert ist */
div#s2t-progress { width: 200px; float: right; margin: 0 0 20px 32px }
/* Abstandseinstellungen für den Weiter-Button */
.buttonNext { padding-top: 0; padding-bottom: 16px }
/* Grundlegendes Styling für den Fortschrittsbalken */
div.progressbar { height: 20px; border-color: #AAAAAA }
/* Positioniert den Fortschrittstext innerhalb des Fortschrittsbalkens */
div.progressbar div.progresstext { top: 4px }
/* Stil für horizontale Trennlinien (hr) */
hr { height: 2px; border: 0px; background-color: transparent; border-bottom: 2px solid %color.4%; margin: 24px 0px 28px 0px; }
/* Deaktiviert die Unterstreichung von Links */
a { text-decoration: none; }
/* Passt die Position der Buttons an */
div#button-container {
display: flex;
justify-content: flex-end;
gap: 10px; /* Abstand zwischen den Buttons */
margin-bottom: 10px; /* Abstand oberhalb der unteren Linie */
}
div#button-container-back {
display: flex;
justify-content: flex-end;
gap: 10px; /* Abstand zwischen den Buttons */
margin-bottom: 10px; /* Abstand oberhalb der unteren Linie */
}
/* Entfernt den Standardabstand für die Button-Container */
div#s2t-controlsBack, div#s2t-controls {
margin: 0;
padding: 0;
}
/* Fügt Abstand oberhalb des Zurück-Buttons hinzu */
div#s2t-controlsBack {
margin-top: 10px; /* Abstand zwischen dem Button und der oberen Linie */
}
/* Fügt Abstand oberhalb des Weiter-Buttons hinzu */
div#s2t-controls {
margin-top: 10px;
}
/* Zentriert den Footer auf Smartphones */
@media (max-width: 450px) {
div#button-container {
justify-content: center; /* Zentriert die Buttons auf kleinen Bildschirmen */
}
div#s2t-progress { left: 0; right: 0; margin: 0 auto 10px auto; float: none }
div#s2t-footer { text-align: center }
}
/* Verhindert das automatische Zoomen bei Eingabefeldern auf iOS-Smartphones */
@media screen and (-webkit-min-device-pixel-ratio:0) and (max-device-width:1024px) {
select,
textarea,
input[type="text"],
input[type="number"],
input[type="password"] { font-size: 16px }
}
</style>
</head>
<body>
<div class="questionary">
<div id="s2t-controls">
%button.back% <!-- Platzhalter für den Zurück-Button -->
</div>
<div id="s2t-logo">%logo%</div> <!-- Platzhalter für das Logo -->
<hr style="margin-top: 12px;"> <!-- Horizontale Linie nach dem Logo -->
%form.open% <!-- Öffnet das Formular -->
<div id="s2t-content">
%questionnaire% <!-- Platzhalter für den Inhalt des Fragebogens -->
</div>
<!-- Container für die Buttons -->
<div id="button-container">
<div id="s2t-controls">
%button.next% <!-- Platzhalter für den Weiter-Button -->
</div>
</div>
<hr style="margin-bottom: 14px;"> <!-- Horizontale Linie vor dem Footer -->
<div id="s2t-footer">
<div id="s2t-progress">%progress%</div> <!-- Platzhalter für den Fortschrittsbalken -->
%imprint% <!-- Platzhalter für Impressum/weitere Informationen -->
</div>
%form.close% <!-- Schließt das Formular -->
</div>
</body>
</html>