Intégration javascript sur wordpress

Fermé

malhek69 Messages postés 77 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 77 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
Telecharger wordpress - Télécharger - Blog & CMS
Alexa chatgpt integration - Guide
Javascript void 0 c'est quoi ✓ - Forum Réseaux sociaux
Idm integration module opera ✓ - Forum Opera

2 réponses

Réponse 1 / 2

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
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 77 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

Nodejs.exe est-ce un virus

"Aspirer" un site Wordpress

[Javascript] Tables de Multiplication

Discussions similaires

Newsletters