Intégration javascript sur wordpress
malhek69
Messages postés
79
Date d'inscription
Statut
Membre
Dernière intervention
-
malhek69 Messages postés 79 Date d'inscription Statut Membre Dernière intervention -
malhek69 Messages postés 79 Date d'inscription Statut Membre Dernière intervention -
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....
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
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
- Wordpress download - Télécharger - Blog & CMS
- Telecharger javascript - Télécharger - Langages
- A javascript error occurred in the main process - Forum Windows
- A javaScript error occurred in the main process - Forum Handicap / Accessibilté
- Wordpress page blanche ✓ - Forum Wordpress
2 réponses
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>
