Enhanced Contact Form - Copy this Html, Bootstrap Component to your project
<!DOCTYPE html> <html> <head> <title>RICHIESTA CATALOGO FUTURA</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384 MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384 gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous"> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <meta http equiv="X UA Compatible" content="ie=edge"> <meta name="robots" content="noindex, nofollow"> <link rel="icon" href="favicon.ico"/> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <style> body, html { margin: 0; padding: 0; height: 100%; background: #ffffff !important; } .user_card { height: 400px; width: 350px; margin top: auto; margin bottom: auto; background: #ffffff; position: relative; display: flex; justify content: center; flex direction: column; padding: 10px; box shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); webkit box shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); moz box shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border radius: 5px; } .brand_logo_container { position: absolute; height: 170px; width: 170px; top: 75px; border radius: 50%; background: #ffffff; padding: 10px; text align: center; } .brand_logo { height: 150px; width: 150px; border radius: 50%; border: 2px solid white; } .form_container { margin top: 100px; } .login_btn { width: 100%; background: #003057 !important; color: white !important; } .login_btn:focus { box shadow: none !important; outline: 0px !important; } .login_container { padding: 0 2rem; } .input group text { background: #003057 !important; color: white !important; border: 0 !important; border radius: 0.25rem 0 0 0.25rem !important; } .input_user, .input_pass:focus { box shadow: none !important; outline: 0px !important; } .custom checkbox .custom control input:checked~.custom control label::before { background color: #003057 !important; } </style> <link href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" rel="stylesheet"> </head> <body style="font family: 'Raleway', sans serif;"> <div class="container h 200"> <br><br><br> <div align="center"><img src="titolo.png" align="center" width="60%"></div><br> <div class="modal dialog modal lg" style="height:auto;border: 1px solid #ffffff;"> <! d flex justify content center h 200 > <div class="modal content" style="height:auto;border: 1px solid #ffffff;" > <! user_card > <! <div class="d flex justify content center"> <div class="brand_logo_container"> <img src="guanto.png" class="img fluid" alt="Logo"> </div> </div> > <div style="border: 1px solid #ffffff;"> <img src="guanto.png" width="20%" style="float:left;margin: 20px"> <p align="left"><br><b style="color:#003057;">Compila il seguente Form per poter ottenere subito una copia cartacea del nostro "Nuovissimo Catalogo Futura 2024!"<br><br>Con il Catalogo, Mottura....Altro testo da valutare insieme cosa scrivere..ecc...ecc......</b> <br> <! <a target="_blank" href="sito.php"> Se voi scopri altri miei Consigli </a> > <br></p> </div> <br><br> <br> <div align="center"> <h3 align="center"><font color="#003057"><b>OTTIENI ORA IL NUOVO CATALOGO FUTURA 2024</b></font></h3><br> </div> <div class="modal body"> <! d flex justify content center form_container > <form method="POST" name="formdeiclienti" action="paginarrivoxmail.php"> <div class="input group mb 3"> <input type="text" name="ragione" class="form control input_user" placeholder="Ragione Sociale"><font color="white" size="5em" required="true"> * </font> </div> <br> <div class="input group mb 3"> <input type="email" name="mailla" class="form control input_user" placeholder="Mail" required="true"><font color="white" size="5em" > * </font> <! <input type="text" name="piva" class="form control input_user" placeholder="P.Iva"><font color="white" size="5em" > * </font> > </div> <br> <div class="input group mb 3"> <input type="text" name="tel" class="form control input_user" placeholder="Telefono" required="true"><font color="white" size="5em" > * </font> <input type="text" name="citta" class="form control input_user" placeholder="Città" required="true"><font color="white" size="5em" > * </font> </div> <br> <! <div class="input group mb 3"> <input type="text" name="indirizzo" class="form control input_user" placeholder="Indirizzo Struttura"><font color="white" size="5em" > * </font> </div> <br> > <! <div class="input group mb 3"> <input type="text" name="quantrich" class="form control input_user" placeholder="Quantità, Tipologia, Taglie e Altre Note"><font color="white" size="5em" > * </font> </div> > <br> </div> <div class="d flex justify content center mt 3 login_container"> <button type="submit" name="buttonsub" class="btn login_btn">INVIA LA TUA RICHIESTA</button> <! all' invio dell' iscrizione deve partite in una pagina header di passaggio anche la funzione mail all' indirizzo # e prendendo i seguenti campi // onclick="alert('Registrazione effettuata invio mail in corso')" > </div> </form> </div> </div> <br><br><br><br><br> </div> </body> </html>
