Fake : taux de clic / transfo inégalée !

1 Télécharger la page de résultat.

Pour que ce moteur fonctionne, vous devez télécharger la page de résultat et l'uploader dans votre dossier de promotion (Par défaut, nommé « mes-plans-cul »)

Télécharger la page de résultats

Une fois uploadée, la page est visible sur une URL du type « https://www.votredomaine.com/mes-plans-cul/search/index.php ». C'est celle-ci qu'il faudra utiliser lors d'une étape suivante comme « action » du formulaire.

2 Ajoutez du CSS à votre feuille de style.

Ajoutez les définitions CSS suivantes à votre feuille de style en hésitant pas à éditer les couleurs de celle-ci afin qu'elle colle parfaitement à votre site.

#fakeSearchForm { width: 95%; max-width: 600px; margin: 0 auto; padding: 1px; background: #EBEBEB; border: 1px solid #D7D5D5; border-radius: 2px; font-family: Arial, Helvetica, sans-serif; text-align: left; color: #000000; }
#fakeSearchForm .header { width: 100%; height: 32px; clear: both; background: #DF30B8; border: 0; border-top-left-radius: 2px; border-top-right-radius: 2px; font-size: 18px; color: #ffffff; text-align: center; font-weight: bold; line-height: 32px; }
#fakeSearchForm .control-group { clear: both; width: 90%; height: 30px; line-height: 30px;  margin: 5px auto; padding: 0; }
#fakeSearchForm .control-group label { display: inline-block; width: 15%; height: 24px; float: left; margin: 0; padding: 0; text-align: right; line-height: 30px; font-size: 12px; color: #000000; }
#fakeSearchForm .control-group select { display: inline-block; width: 85%; height: 30px; float: right; margin: 0; padding: 0; background-color: #ffffff;  border: 1px solid #cccccc;  border-radius: 3px; vertical-align: middle; line-height: 20px; font-size: 14px; font-weight: normal; color: #555555; }
#fakeSearchForm .form-actions { text-align: center; margin: 15px 0; }
#fakeSearchForm .form-actions button[type=submit] { width: auto; padding: 9px 15px; margin: 0 auto; background: #38B7EE; border: 1px solid #3890EC; border-radius: 2px; font-size: 16px; font-weight: bold; color: #FFFFFF; }
#fakeSearchForm .form-actions button[type=submit]:hover { background: #3890EC; border: 1px solid #3890EC; }
@media screen and (max-width: 480px) {
    #fakeSearchForm .control-group label { width: 30%; }
    #fakeSearchForm .control-group select { width: 70%; }
}

3 Ajoutez le code HTML du moteur.

Ajoutez le code HTML du moteur de recherche sur les pages de votre site là où vous désirez qu'il s'affiche.

<form method="get" action="https://www.votredomaine.com/mes-plans-cul/search/index.php" name="fakeSearchForm" id="fakeSearchForm" target="_blank">
    <input type="hidden" name="tracker" value="searchForm">
    <div class="header">Rencontres près de chez toi !</div>
    <div class="control-group">
        <label for="sexe">Je suis : </label>
        <select name="sexe" id="sexe">
            <option value="homme" selected="selected">Un homme</option>
            <option value="couple">Un couple</option>
            <option value="trans">Un trans</option>
            <option value="femme">Une femme</option>
        </select>
    </div>
    <div class="control-group">
        <label for="search">Je cherche : </label>
        <select name="search" id="search">
            <option value="femme" selected="selected">Une femme</option>
            <option value="couple">Un couple</option>
            <option value="trans">Un trans</option>
            <option value="homme">Un homme</option>
        </select>
    </div>
    <div class="control-group">
        <label for="age">Agée de : </label>
        <select name="age" id="age">
            <option value="18-20" selected="selected">18 à 20 ans</option>
            <option value="21-25">21 à 25 ans</option>
            <option value="26-30">26 à 30 ans</option>    
            <option value="31-35">31 à 35 ans</option>
            <option value="36-40">36 à 40 ans</option>
            <option value="plus">Plus de 40 ans</option>
        </select>
    </div>
    <div class="control-group">
        <label for="country">Pays : </label>
        <select name="country" id="country">
            <option value="Belgique">Belgique</option>
            <option value="France" selected="selected">France</option>
            <option value="Suisse">Suisse</option>
        </select>
    </div>
    <div class="control-group">
        <label for="region">Région : </label>
        <select name="region" id="region">
            <option value="">Toute la France</option>
        </select>
    </div>
    <div class="form-actions">
        <button type="submit">Rechercher</button>
    </div>
</form>

N'oubliez pas de modifier l'action du formulaire par la bonne adresse URL de la page de résultats !

4 Ajoutez le code JavaScript.

Ajoutez le code JavaScript suivant en bas de votre page. Ce dernier remplis le sélect des régions en fonction du pays choisi.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function () {

    var fakeSearchFormRegion = new Array();
    fakeSearchFormRegion['France'] = new Array('Paris', 'Ain', 'Aisne', 'Allier', 'Alpes-Maritimes', 'Alpes-de-Hte-Pce', 'Ardennes', 'Ardeche', 'Ariege', 'Aube', 'Aude', 'Aveyron', 'Bas-Rhin', 'Bouches-du-Rhone', 'Calvados', 'Cantal', 'Charente', 'Charente-Maritime', 'Cher', 'Correze', 'Corse-du-Sud', 'Creuse', 'Cotes-d Or', 'Cotes-d Armor', 'Deux-Sevres', 'Dordogne', 'Doubs', 'Drome', 'Essonne', 'Eure', 'Eure-et-Loir', 'Finistere', 'Gard', 'Gers', 'Gironde', 'Haut-Rhin', 'Haute Corse', 'Haute-Garonne', 'Haute-Loire', 'Haute-Marne', 'Haute-Savoie', 'Haute-Saone', 'Haute-Vienne', 'Hautes-Alpes', 'Hautes-Pyrenees', 'Hauts-de-Seine', 'Herault', 'Ille-et-Vilaine', 'Indre', 'Indre-et-Loire', 'Isere', 'Jura', 'Landes', 'Loir-et-Cher', 'Loire', 'Loire-Atlantique', 'Loiret', 'Lot', 'Lot-et-Garonne', 'Lozere', 'Maine-et-Loire', 'Manche', 'Marne', 'Mayenne', 'Meurthe-et-Moselle', 'Meuse', 'Morbihan', 'Moselle', 'Nicvre', 'Nord',  'Oise', 'Orne', 'Paris', 'Pas-de-Calais', 'Puy-de-Dome', 'Pyrenees-Atlantiques', 'Pyrenees-Orientales', 'Rhone', 'Sarthe', 'Savoie', 'Saone-et-Loire', 'Seine-Maritime', 'Seine-Saint-Denis', 'Seine-et-Marne', 'Somme', 'Tarn', 'Tarn-et-Garonne', 'Territoire de Belfort', 'Val-d Oise', 'Cergy pontoise', 'Val-de-Marne', 'Var', 'Vaucluse', 'Vendee', 'Vienne', 'Vosges', 'Yonne', 'Yvelines', 'Guadeloupe', 'Martinique', 'Guyane francaise', 'Reunion', 'Autre');
    fakeSearchFormRegion['Suisse'] = new Array('Bienne', 'Delemont', 'Fribourg', 'Geneve', 'Lausanne', 'Martigny', 'Neuchatel', 'Nyon', 'Sion', 'Vevey', 'Yverdon', 'Autre');
    fakeSearchFormRegion['Belgique'] = new Array('Anvers', 'Brabant flamand', 'Brabant wallon', 'Flandre-Occidentale', 'Flandre-Orientale', 'Hainaut', 'Liege', 'Limbourg', 'Luxembourg', 'Namur', 'Bruxelles', 'Charleroi', 'Mons', 'Autre');

    jQuery( "#fakeSearchForm #country" ).click(function() {
        var fakeSearchFormCountry = jQuery(this).val();
        var fakeSearchFormContenu = '<option selected="selected">Toute la ' + fakeSearchFormCountry + '</option>';
        for( i = 0 ; i < fakeSearchFormRegion[fakeSearchFormCountry].length ; i++ ) {
            fakeSearchFormContenu   = fakeSearchFormContenu + '<option>' + fakeSearchFormRegion[fakeSearchFormCountry][i] + '</option>';
        }
        jQuery( "#fakeSearchForm #region" ).html(fakeSearchFormContenu);
    });

    var fakeSearchFormContenu = '<option selected="selected">Toute la France</option>';
    for( i = 0 ; i < fakeSearchFormRegion['France'].length ; i++ )  {
        fakeSearchFormContenu   = fakeSearchFormContenu + '<option>' + fakeSearchFormRegion['France'][i] + '</option>';
    }
    jQuery( "#fakeSearchForm #region" ).html(fakeSearchFormContenu);

});
</script>

PS : Si vous avez déjà un jQuery inclus à votre page, vous ne devez pas reprendre la première ligne.

Voilà, le moteur de recherche est mis en place ... c'est aussi simple que ça !