Form personalizzato in bootstrap da integrare nel tema wordpress

otto9due

Utente Attivo
22 Feb 2014
529
21
28
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.

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:
Discussioni simili
Autore Titolo Forum Risposte Data
C Form di registrazione personalizzato PHP 2
felino Form action costum e parametri in queryString WordPress 1
M Come recuperare molteplici input form PHP 1
M Collegamento tra form html e script php PHP 4
L form immagini per il database PHP 0
A form PHP prenotazione tramite query PHP 2
A Form php prenotazione di un azienda sanitaria locale presso studio medico PHP 1
L inserimento form dati multipli ? PHP 0
L Problemi form Pagina php HTML e CSS 3
Cosina Creare bottone delete in form upload PHP 4
Cosina Creare bottone delete in form upload PHP 1
D Devo far funzionare un form di contatti PHP 4
B form gestione input PHP 2
V PHP form intersecate PHP 0
8 Javascript - PDF Form Javascript 0
J Form inserimento dati in database Ajax 1
E Gestione profilo utente tramite Form PHP 3
R [C#] Form principale si blocca mentre un altro Thread lavora .NET Framework 0
M Problema con controllo form in real time jQuery 6
D Form validazione Javascript 2
R form recovery pass PHP 0
V Symfony e i form PHP 3
M form con checkbox PHP 8
S come aggiustare un form di contatto? HTML e CSS 3
F query e form con select multipla PHP 17
AC1 Form in finestra modale PHP 1
MarcoGrazia Verifica di una stringa o di un nome proveniente da form Snippet PHP 0
A Inserimento dati nel database tramite form + altre operazioni PHP 18
websilvia Contact form using Bootstrap 3.3.4 PHP 8
Alex_70 Button non funziona nella form PHP 2
C Form email php su pagina index.html? PHP 21
W Rinominare Documenti Con Form Asp Classic ASP 9
S Invio email da form PHP 8
L form multipla php sql,errore in inserimento MySQL 0
L inviare i dati di un form ad un database PHP 6
L Collegare un form html ad un database access Javascript 2
L creare oggetti da una classe tramite un form Javascript 0
G Impostare suggerimenti campo text di un form Javascript 2
S Problemi di visualizzazione form contatti sito web HTML e CSS 2
L Insert php sql da una form multipla PHP 6
E form PHP 10
W Form da CDONTS a CDOSYS Classic ASP 7
P Problema concantenazione form Javascript 3
webmachine [PHP] [JAVASCRIPT] Form strano in HTML PHP PHP 1
G Form in php WordPress 0
K La pagina index, si apre sul form e non al top page Javascript 0
A Aprire la window form Add Connection da codice Visual Basic 4
F [PHP] Form html PHP 2
G FORM HTML E PHP PHP 0
max1974 [HTML] Columns grid on modal form HTML e CSS 0

Discussioni simili