Buonasera a tutti, volevo chiedervi, è possibile inserire un form personalizzato realizzato tramite la libreria bootstrap all'interno di una homepage di un template wordpress costruito con bootstrap 3?
In allegato il form da inserire. Ovviemente per testarlo ho fatto importazione delle librerie da CDN.
Non posso utilizzare i plugin tipici perchè ho bisogno che l'action punti ad una booking engine ( software sviluppato da una casa terza ), quindi ho bisogno di costruirlo da me.
Grazie per l'attenzione.
In allegato il form da inserire. Ovviemente per testarlo ho fatto importazione delle librerie da CDN.
Non posso utilizzare i plugin tipici perchè ho bisogno che l'action punti ad una booking engine ( software sviluppato da una casa terza ), quindi ho bisogno di costruirlo da me.
Grazie per l'attenzione.
Codice:
<!doctype html>
<html>
<head>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
$(document).ready(function () {
$('#data_arrivo').datepicker({
format: "dd/mm/yyyy"
});
});
$(document).ready(function () {
$('#data_partenza').datepicker({
format: "dd/mm/yyyy"
});
});
</script>
<style>
.inner-addon {position: relative;}/*impaginazione icone*/
.inner-addon .glyphicon {position: absolute;padding: 10px;pointer-events: none;}/*impaginazione icone*/
.left-addon .glyphicon{left: 0px; top: 24px;}/*impaginazione icone*/
.right-addon .glyphicon {right: 0px;}
.left-addon input {padding-left: 30px; }/*icona a sinistra*/
.left-addon textarea {padding-left: 30px; } /*icona a sinistra nella textarea*/
.right-addon input {padding-right: 30px; } /*icona a destra*/
</style>
</head>
<body>
<div class="container">
<form class="form" action="#" method="post">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="form-group inner-addon left-addon">
<span class="glyphicon glyphicon-calendar"></span>
<label for="data_arrivo">Arrivo</label>
<input type="date" class="form-control " id="data_arrivo" name="data_arrivo" placeholder="Data Arrivo"><!-- input-lg in form -->
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="form-group inner-addon left-addon">
<span class="glyphicon glyphicon-calendar"></span>
<label for="data_partenza">Partenza</label>
<input type="date" class="form-control" id="data_partenza" name="data_partenza" placeholder="Data Partenza">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="form-group inner-addon left-addon">
<span class="glyphicon glyphicon-bed"></span>
<label for="camere">N. Camere</label>
<input type="number" min="1" max="10" class="form-control" name="camere" id="camere" placeholder="N. Camere">
</div>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="form-group inner-addon left-addon">
<span class="glyphicon glyphicon-user"></span>
<label for="persone">Persone</label>
<input type="number" min="1" max="20" class="form-control" name="persone" id="persone" placeholder="N. Persone">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="form-group inner-addon left-addon">
<span class="glyphicon glyphicon-barcode"></span>
<label for="coupon">Coupon</label>
<input type="text" class="form-control" id="coupon" name="coupon" placeholder="Codice sconto">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-sm-12">
<button type="submit" class="btn btn-success btn-lg btn-block"><span class="glyphicon glyphicon-chevron-right"></span> Prenota Ora</button>
</div>
</div>
</form>
</div>
</body>
</html>
Ultima modifica:
