Intégration javascript sur wordpress

Fermé

malhek69 Messages postés 79 Date d'inscription mardi 6 décembre 2011 Statut Membre Dernière intervention 11 avril 2018 - Modifié le 17 nov. 2017 à 11:19
malhek69 Messages postés 79 Date d'inscription mardi 6 décembre 2011 Statut Membre Dernière intervention 11 avril 2018 - 17 nov. 2017 à 12:00

Bonjour, j'ai développé un formulaire en javascript, sauf qu'impossible de l'insérer dans une page wordpress. Ou en tout cas pas avec l'esthétique que j'avais fait de base.

Je vous montre le code qui notamment ne marche pas du tout (ça me fait un type text et non range comme je le voulais) alors que sans passer sur wordpress ça fonctionne nickel....

<label>Quel est votre budget maximum:  </label></div>
                      <div class="col-md-8">
                          <input type="text" data-type="single" data-plugin="range" data-from="80" data-min="0" data-max="150"  data-step="10" data-postfix="€"  data-grid="true" data-grid-snap="true"/>
                      </div>

En normal (sans wordpress) ça donne ça:

Choisis un travail que tu aimes, et tu n'auras pas à travailler un seul jour de ta vie

A voir également:

Intégration javascript sur wordpress
Telecharger javascript - Télécharger - Langages
Wordpress download - Télécharger - Blog & CMS
Javascript echo ✓ - Forum PHP
Theme panel wordpress ✓ - Forum Wordpress
Erreur #125 javascript - Forum Mozilla Firefox

2 réponses

Réponse 1 / 2

jordane45 Messages postés 38326 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 2 décembre 2024 4 712
17 nov. 2017 à 11:41

Tu ne nous montres que le code html ....
Il faudrait aussi nous montrer le code javascript....

Réponse 2 / 2

malhek69 Messages postés 79 Date d'inscription mardi 6 décembre 2011 Statut Membre Dernière intervention 11 avril 2018 3
Modifié le 17 nov. 2017 à 12:13

ahah pas faux je vous montre tout !


 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/js/ion.rangeSlider.min.js"></script>
    <script src="js/main.js"></script>
        
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/css/ion.rangeSlider.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.2.0/css/ion.rangeSlider.skinFlat.min.css">
        
    <style>
        .form-check-label > input~span{
            display: block;
            padding: 6px 12px;
            border: 1px solid #eeeeee;
        }

        .form-check-label > input:checked~span{
            background-color: #ed5565;
            color: #ffffff;
            border-color: transparent;
        }

        .form-check-label{
            float: left;
            cursor: pointer;
        }

        .form-check-label input{
            display: none;
        }

        .form-group .form-group-input{
            display: inline-block;
            vertical-align: middle;
        }

        .form-group .form-group-input:after{
            content:'';
            display: table;
            clear: both;
        }
    </style>
        
    <script>
    $( document ).ready(function() {
        $('[data-plugin="range"]').ionRangeSlider();

    });
    </script>

    <div class="container" id="formulaire">
      <!-- Example row of columns -->
      <div class="row">
        <div class="col-md-12">
            <form>
              <div class="form-group">
                  <div class="row">
                      <div class="col-md-4">
                        <label>Quelle est votre taille habituel de pull: </label></div>
                      <div class="col-md-8">
                          <div class="form-group-input">
                           <label class="form-check-label">
                            <input class="form-check-input" type="radio" name="pull_size"  value="XS">
                               <span>XS</span>
                          </label>
                          <label class="form-check-label">
                            <input class="form-check-input" type="radio" name="pull_size" value="S">
                              <span>S</span>
                          </label>
                          <label class="form-check-label">
                            <input class="form-check-input" type="radio" name="pull_size" value="M">
                              <span>M</span>
                          </label>
                          <label class="form-check-label">
                            <input class="form-check-input" type="radio" name="pull_size" value="L">
                              <span>L</span>
                          </label>
                          <label class="form-check-label">
                            <input class="form-check-input" type="radio" name="pull_size" value="XL">
                              <span>XL</span>
                          </label>
                          <label class="form-check-label">
                            <input class="form-check-input" type="radio" name="pull_size" value="XXL">
                              <span>XXL</span>
                          </label>
                          </div>
                      </div>
                  </div>                   
              </div>
                
                <div class="form-group">
                  <div class="row">
                      <div class="col-md-4">
                        <label>Quelle est votre taille habituel de débardeur:</label></div>
                      <div class="col-md-8">
                          <div class="form-group-input">
                           <label class="form-check-label">
                            <input class="form-check-input" type="radio" name="debardeur_size"  value="XS">
                               <span>XS</span>
                          </label>
                          <label class="form-check-label">
                            <input class="form-check-input" type="radio" name="debardeur_size" value="S">
                              <span>S</span>
                          </label>
                          <label class="form-check-label">
                            <input class="form-check-input" type="radio" name="debardeur_size" value="M">
                              <span>M</span>
                          </label>
                          <label class="form-check-label">
                            <input class="form-check-input" type="radio" name="debardeur_size" value="L">
                              <span>L</span>
                          </label>
                          <label class="form-check-label">
                            <input class="form-check-input" type="radio" name="debardeur_size" value="XL">
                              <span>XL</span>
                          </label>
                          <label class="form-check-label">
                            <input class="form-check-input" type="radio" name="debardeur_size" value="XXL">
                              <span>XXL</span>
                          </label>
                          </div>
                      </div>
                  </div>                   
              </div>
                
                <div class="form-group">
                  <div class="row">
                      <div class="col-md-4">
                        <label>Quelle est votre taille habituel de pantalon: </label></div>
                      <div class="col-md-8">
                          <div class="form-group-input">
                           <label class="form-check-label">
                            <input class="form-check-input" type="radio" name="pantalon_size"  value="36">
                               <span>36</span>
                          </label>
                          <label class="form-check-label">
                            <input class="form-check-input" type="radio" name="pantalon_size" value="38">
                              <span>38</span>
                          </label>
                          <label class="form-check-label">
                            <input class="form-check-input" type="radio" name="pantalon_size" value="40">
                              <span>40</span>
                          </label>
                          <label class="form-check-label">
                            <input class="form-check-input" type="radio" name="pantalon_size" value="42">
                              <span>42</span>
                          </label>
                          <label class="form-check-label">
                            <input class="form-check-input" type="radio" name="pantalon_size" value="44">
                              <span>44</span>
                          </label>
                          <label class="form-check-label">
                            <input class="form-check-input" type="radio" name="pantalon_size" value="46">
                              <span>46</span>
                          </label>
                              <label class="form-check-label">
                            <input class="form-check-input" type="radio" name="pantalon_size" value="48">
                              <span>48</span>
                          </label>
                              <label class="form-check-label">
                            <input class="form-check-input" type="radio" name="pantalon_size" value="50">
                              <span>50</span>
                          </label>
                          </div>
                      </div>
                  </div>                   
              </div>
                
                <div class="form-group">
                  <div class="row">
                      <div class="col-md-4">
                        <label>Quel est votre budget maximum:  </label></div>
                      <div class="col-md-8">
                          <input type="text" data-type="single" data-plugin="range" data-from="80" data-min="0" data-max="150"  data-step="10" data-postfix="€"  data-grid="true" data-grid-snap="true"/>
                      </div>
                  </div>                   
              </div>
        
              <button type="submit" class="btn btn-primary">Envoyer</button>
            </form>
            
            
            
            
        </div>
      </div>

      <hr>


    </div> <!-- /container -->       
        
    </body>
</html>

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule

java script error in the main process

javascript:void(0);

Nodejs.exe est-ce un virus

Menu disparu wordpress