Das ist etwas komplexer, weil über Quellcode realisiert.
- Auf der Seite fügen Sie ganz oben auf der Seite zwei Artikel "Quelltext" in einem eigenen, neuen Container ein
- In den Container-Eigenschaften können Sie dann eine entsprechende Hintergrundfarbe wählen und dann im Feld "Inline-CSS" noch folgenden Code eingeben, damit der Container nach oben rutscht und au dem Header-Bild dargestellt wird (die -60px ggf. entsprechend anpassen): position: relative; top: -60px;
Inhalt für den 1. Quelltext-Artikel:
<style scoped>
form#formQuick{
padding: 0;
}
form#formQuick input,
form#formQuick label{
display: inline !important;
margin: 0 10px 0 0 !important;
}
form#formQuick input:last-child{
display: inline !important;
margin-right: 0!important;
}
</style>
Alles anzeigen
Inhalt für den 2. Quelltext-Artikel:
<div style="color: #ffffff; text-align: center"><b>Schnellanfrage:</b>
<form id="formQuick" class="zp-form" method="get" name="formQuick" action="oid://page/de$Kontakt"><input id="anreise" class="typetext required" type="date" name="anreise" placeholder="Anreise"> <input id="abreise" class="typetext required" type="date" name="abreise" placeholder="Abreise"> <input class="button" type="submit" value="Anfragen / Buchen"> </form></div>
<script>
// if the browser doesn't support input type="date", use jQueryUI datepicker
if ( zp.html5support && !zp.html5support["date"] ){
// test if jqueryUI is loaded, and if not, load it
var mySrc = $z('script[src*="app.js"], script[src*="bundle.js"]').first().attr("src");
var jsRelativePath = mySrc.substr(0, mySrc.lastIndexOf("assets/")) + "assets/";
if (!$z("link[href*='/js/jqueryui/jquery-ui-1.8.19.custom.css']").length){
// load jqueryUI if it is not already loaded
if (!$z('link[href*="/bundle.css"], link[href*="/styles.css"]').first().length){
$z('<link rel="stylesheet" type="text/css" href="' + jsRelativePath +'js/jqueryui/jquery-ui-1.8.19.custom.css" media="screen" />').appendTo("head");
}
else{
$z('link[href*="/bundle.css"], link[href*="/styles.css"]').first().after('<link rel="stylesheet" type="text/css" href="' + jsRelativePath +'js/jqueryui/jquery-ui-1.8.19.custom.css" media="screen" />');
}
}
if (!($z.ui) ) {
// append after existing, known js if possible to keep loading order of CSS JS in correct order for improved loading speed
if ( !$z('script[src*="app.js"], script[src*="bundle.js"]').first().length ){
$z('<scr' + 'ipt type="text/javascript" src="' + jsRelativePath + 'js/jqueryui/jquery-ui-1.8.19.custom.min.js"></scr' + 'ipt>').appendTo("head");
}
else{
$z('scr' + 'ipt[src*="app.js"], script[src*="bundle.js"]').first().after('<scr' + 'ipt type="text/javascript" src="' + jsRelativePath + 'js/jqueryui/jquery-ui-1.8.19.custom.min.js"></scr' + 'ipt>');
}
}
// localize the datepicker to DE
var isGermanPage = $('html')[0].lang.toLowerCase().substr(0,2) == "de";
if ( isGermanPage && !($z.datepicker.regional['de']) ) {
if ( !$z('script[src*="app.js"], script[src*="bundle.js"]').first().length ){
$z('<scr' + 'ipt type="text/javascript" src="' + jsRelativePath + 'js/jqueryui/i18n/jquery.ui.datepicker-de.js"></scr' + 'ipt>').appendTo("head");
}
else{
$z('scr' + 'ipt[src*="app.js"], script[src*="bundle.js"]').first().after('<scr' + 'ipt type="text/javascript" src="' + jsRelativePath + 'js/jqueryui/i18n/jquery.ui.datepicker-de.js"></scr' + 'ipt>');
}
}
// initialize date fields with datepicker
$z("form#formQuick input[type=date]").datepicker({
showButtonPanel: true,
changeMonth: true,
changeYear: true,
currentText: isGermanPage ? "Heute" : "Today",
closeText: isGermanPage ? "Schließen" : "Close"
});
}
</script>
Alles anzeigen