Preview:
<section class="fascia-form-ricerca fascia-form-ricerca__nowrap theme__blue" style="width:100%">
    <div class="wrapper">
        <div class="row">
            <div class="col-xs-12 intestazione_ricerca">
                <p class="heading heading__3">Trova la tua prossima auto a noleggio</p>
            </div>

            <div class="col-xs-12 ">
                <form action="{{{PATH}}}" id="_cerca3">
                    <input type="hidden" name="_tkn" value="{{{tokenCSRF}}}">
                    <input type="hidden" id="_srcctg" name="_srcctg" value="">
                    <div class="flex-row-space-between">
                        <div class="fields-container fields-container__nowrap">


                            <div class="select-wrapper" id="_divAutonomia" style="display:none"><select id="_frsrc_autonomia" name="_frsrc_autonomia">
                                </select>
                            </div>
                            <div class="select-wrapper"><select id="_frsrc_tipo" name="_frsrc_tipo">
                                    <option value="">Tipo di veicolo</option>
                                </select></div>


                            <div class="select-wrapper"><select id="_frsrc_marca" name="_frsrc_marca">
                                    <option value="">Marca</option>
                                </select></div>

                            <div class="select-wrapper" id="_divAlim"><select id="_frsrc_alim" name="_frsrc_alim">
                                    <option value="">Alimentazione</option>
                                </select>
                            </div>

                            <!--div class="select-wrapper" id="_divCambio"><select id="_frsrc_cambio" name="_frsrc_cambio">
                                    <option value="">Cambio</option>
                                </select>
                            </div-->


                            <!--div class="select-wrapper" id="_divCanone"><select id="_frsrc_canone" name="_frsrc_canone">
                                    <option value="">Fascia di canone</option>
                                </select>
                            </div-->
                        </div>
                        <!--button class="btn btn__icon" type="submit"><img alt=""
                                src="{{{PATH}}}_img/icons/find.svg" />Cerca auto</button-->
                        <div class="button-container">
                            <button class="btn btn__icon" style="background-color: #53a653" type="submit"> <img src="{{{PATH}}}_img/icons/find.svg" alt="">Cerca auto </button>

                            <div class="col-xs-12">
                                <h3 style="text-align: center;" id="link_mobile"> <a href="https://www.finrent.it/pronta-consegna/">Scopri le offerte in Pronta
                                        Consegna</a>
                            </div>
                            </h3>
                        </div>
                    </div>



            </div>
            </form>
        </div>
    </div>

    </div>
</section>
<script type="text/javascript" nonce="{{{nonce}}}">
    _automatico = "";
    _ini_aut = "";
    _ini_cb = "";
    _ini_tp = "";
    _ini_mod = "";
    _ini_mar = "";
    _ini_ali = "";
    _ini_fas = "";
    _caricaTipi = true;
    var mtcf = [];
    $(document).ready(function () {
        addlink = "";
        if ($("#_automatico").val() == "1") {
            _ini_aut = $("#_automatico").attr("_aut");
            _ini_cb = $("#_automatico").attr("_cb");
            _ini_tp = $("#_automatico").attr("_tp");
            _ini_mod = $("#_automatico").attr("_mod");
            _ini_mar = $("#_automatico").attr("_mar");
            _ini_fas = $("#_automatico").attr("_fas");
            _ini_ali = $("#_automatico").attr("_ali");
            _automatico = "1";
        }
        $("#_srcctg").val($("#_ctg").val());
        if ($("#_ctg").val() == "1") { addlink = "#privati"; }
        if ($("#_ctg").val() == "2") addlink = "#partitaiva";
        if ($("#_ctg").val() == "5") { addlink = "#elettriche"; setAutonomia(); $("#_divAutonomia").show(); $("#_divCambio").hide(); }
        if ($("#_ctg").val() == "10") {
            addlink = "#ibride";
            //setAutonomia(); $("#_divAutonomia").show(); $("#_divCambio").hide(); 
        }
        if (location.href.indexOf("cambio-manuale") > 0) { addlink = "#cambio-manuale" + addlink; }
        if (location.href.indexOf("cambio-automatico") > 0) { addlink = "#cambio-automatico" + addlink; }
        if (addlink != "") {
            $(".linkmodello").each(function () {
                $(this).attr("href", $(this).attr("href") + addlink);
            });
        }
        if (_caricaTipi) {
            loadMatriceRicerca();
        }
        $("#_btnsearchofferte").on("click", function () {
            window.open("{{{PATH}}}noleggio-lungo-termine-offerte-speciali/", "_self");
        });
        return false;
    });
    
    
    function setAutonomia() {
        /*strx='<option value="">Scegli l\'autonomia</option><option value="100|200">da 100 a 200km</option><option value="200|300">da 200 a 300km</option><option value="300|400">da 300 a 400km</option><option value="400|500">da 400 a 500km</option><option value="500|600">da 500 a 600km</option><option value="600|700">da 600 a 700km</option><option value="700|9999">oltre 700km</option>';
       $("#_frsrc_autonomia").html(strx);
     */
        $("#_frsrc_tipo").val("");
        _caricaTipi = false;
        jQuery.ajax({
            data: "",
            url: "/api/getAutonomiaOption.php?_tkn={{{tokenCSRF}}}&_ctg=" + $("#_srcctg").val() + "&tm=" + Date.now(),
            type: 'POST', timeout: 20000,
            dataType: "html",
            error: function (r) { nocl(); /*alert(r); openAlert("Errore durante la lettura dell'autonomia", "KO");*/ },
            success: function (r) {
                $("#_frsrc_autonomia").html(r);
                if (_ini_aut != "") { $("#_frsrc_autonomia").val(_ini_aut); $("#_frsrc_autonomia").trigger("change"); } else loadTipiVeicolo();
                _ini_aut = "";
            }
        });
    }
    
    var _matrice;
    
    function loadMatriceRicerca() {
        jQuery.ajax({
            data: "_tkn={{{tokenCSRF}}}&_ctg=" + $("#_srcctg").val() + "&_el=" + $("#_frsrc_autonomia").val(),
            url: "/api/getMatriceRicerca.php?el=" + $("#_frsrc_autonomia").val() + "&tm=" + Date.now(),
            type: 'POST', timeout: 20000,
            dataType: "html",
            error: function (r) { nocl(); /*alert(r); openAlert("Errore durante la lettura della matrice", "KO");*/ },
            success: function (r) {
                //eval(r);
                _matrice = JSON.parse(r);
                setFilters(true, true, true, true);
                if (_ini_tp != "") { $("#_frsrc_tipo").val(_ini_tp); setFilters(false, true, true, true); }
                if (_ini_mar != "") { $("#_frsrc_marca").val(_ini_mar); setFilters(false, false, true, true); }
                if (_ini_aut != "") $("#_frsrc_autonomia").val(_ini_aut);
                if (_ini_ali != "") { $("#_frsrc_alim").val(_ini_ali); setFilters(false, false, false, true); }
                if (_ini_cb != "") { $("#_frsrc_cambio").val(_ini_cb); setFilters(false, false, false, false); }
                if (_ini_fas != "") $("#_frsrc_canone").val(_ini_fas);
                _ini_tp = ""; _ini_aut = ""; _ini_cb = ""; _ini_mod = ""; _ini_mar = ""; _ini_ali = ""; _ini_fas = "";
            }
        });
    }
    
    
    $("#_frsrc_marca").on("change", function () {
        setFilters(false, false, true, true);
        return false;
    });
    $("#_frsrc_tipo").on("change", function () {
        setFilters(false, true, true, true);
        return false;
    });
    $("#_frsrc_cambio").on("change", function () {
        setFilters(false, false, false, false);
        return false;
    });
    
    $("#_frsrc_alim").on("change", function () {
        setFilters(false, false, false, true);
        return false;
    });
    $("#_cerca3").on("submit", function () { return cercaModelli('_frsrc_tipo', '_frsrc_marca', '_frsrc_modello', '_srcctg', '_frsrc_autonomia', '_frsrc_cambio', '_frsrc_alim', '_frsrc_canone'); });
    
    function loadMarche() {
        $("#_frsrc_modello").html("<option value=''>Scegli il modello</option>");
        //alert("_tkn={{{tokenCSRF}}}&_ctg="+$("#_srcctg").val()+"&_tp="+$("#_frsrc_tipo").val()+"&_el="+$("#_frsrc_autonomia").val()+"&_cb="+$("#_frsrc_cambio").val());
        jQuery.ajax({
            data: "_tkn={{{tokenCSRF}}}&_ctg=" + $("#_srcctg").val() + "&_tp=" + $("#_frsrc_tipo").val() + "&_el=" + $("#_frsrc_autonomia").val() + "&_cb=" + $("#_frsrc_cambio").val(),
            url: "/api/getMarcheOption.php?tm=" + Date.now(),
            type: 'POST', timeout: 20000,
            dataType: "html",
            error: function (r) { nocl(); /*alert(r); openAlert("Errore durante la lettura delle marche", "KO");*/ },
            success: function (r) {
                $("#_frsrc_marca").html(r);
                if (_ini_mar != "") { $("#_frsrc_marca").val(_ini_mar); $("#_frsrc_marca").trigger("change"); }
                _ini_mar = "";
            }
        });
    }
    
    function loadTipiVeicolo() {
        jQuery.ajax({
            data: "_tkn={{{tokenCSRF}}}&_ctg=" + $("#_srcctg").val() + "&_el=" + $("#_frsrc_autonomia").val(),
            url: "/api/getTipiVeicoloOption.php?el=" + $("_frsrc_autonomia").val() + "&tm=" + Date.now(),
            type: 'POST', timeout: 20000,
            dataType: "html",
            error: function (r) { nocl(); /*alert(r); openAlert("Errore durante la lettura dei tipi veicolo", "KO");*/ },
            success: function (r) {
                $("#_frsrc_tipo").html(r);
                if (_ini_cb != "") { $("#_frsrc_cambio").val(_ini_cb); }
                if (_ini_tp != "") { $("#_frsrc_tipo").val(_ini_tp); $("#_frsrc_tipo").trigger("change"); } else loadMarche();
                _ini_tp = "";
            }
        });
    }
</script>
<style>
    @media screen and (max-width:600px) {
        #link_mobile {
            display: block !Important;
        }
    }
    
    #link_mobile {
        display: none;
    }
</style>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter