Scripts indispensables à Webflow [MAJ Juillet 2022]

Utiliser du code dans un outil no-code comme Webflow est parfois indispensable. Voici 12 scripts donc d'utilité publique pour booster vos projets et améliorer l'expérience.

15/06/2022
8 min
Auteur
Benoît Eveillard
Co-fondateur de Justa
S'inscire à notre newsletter
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Partager l'article
https://justa.fr/articles/scripts-indispensables-webflow

Webflow permet l'ajout de custom code (html, css, javascript, jquery etc..). Cela peut vous permettre de passer outre certaines limites de l'outil pour améliorer l'expérience sur votre site.

Bloquer la touche Entrer valider un formulaire (ou aller à l’étape suivante)

<script>
$(document).ready(function(){$(window).keydown(function(event){if(event.keyCode==13){event.preventDefault();return false}})});
</script>

Copier le script ci-dessus

Utiliser Echap pour fermer une popup

Pensez à mettre à jour l’ID (ici contact-modal_close-button)

<script>
// Fermer la popup au clic sur le bouton Echap / ESC
document.body.addEventListener('keydown', function (e) {
 if (e.key === 'Escape') {
  document.querySelector('.contact-modal_close-button').click();
 }
});
</script>

Copier le script ci-dessus

Prévenir l’auto scale sur mobile

Sur mobile (notamment Apple) quand vous cliquez sur un champ de formulaire ça va “scale” automatiquement et peut gâcher un peu l’expérience.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Copier la balise

Créer un bouton Retour pour revenir à la page précédente

Ajouter juste ceci en tant qu’URL dans le lien href

`javascript:history.back(-1);

Copier l'URL

Garder les paramètres d’URL après une soumission de formulaire

<script>
//changer l'ID du formulaire Webflow
$("#wf-form-contact").submit(function (e) {
    e.preventDefault();
//définir les paramètres que vous voulez garder et mettre le slug de l'URL de redirection
		let utm_source=$("#utm_source").val();let utm_medium=$("#utm_medium").val();window.location="/test?utm_source="+$("#utm_source").val()+"&utm_medium="+$("#utm_medium").val();});
</script>

Copier le script ci-dessus

Pour en savoir plus sur les paramètres d'URL et Webflow, je vous conseille de lire l'article dédié.

Révéler le bouton entrée uniquement lorsqu’un email est valide

<script>
  $(function(){

    // Afficher le bouton d'envoi uniquement quand l'email est valide
    ;( function( $, window, document, undefined ) {
        'use strict';
        var form        = '.email-form',
            className   = 'email-active',
            submit      = 'input[type="submit"]',
            email       = 'input[type="email"]';
        $( form ).each( function(){
            var $form   = $( this ),
                $email  = $form.find( email ),
                $submit  = $form.find( submit ),
                val     = '';
            $email.on( 'keyup.addClassWhenEmail', function(){
                val = $email.val();
                $submit.toggleClass( className, val != '' && /^([\w-\.]+@([\w-]+\.)+[\w-]{2,12})?$/.test( val ) );    
            });
        });
    })( jQuery, window, document );
  })
</script>

Copier le script ci-dessus

{{newsletter-blog}}

Désactiver la première option d’un champ Select

Pensez à mettre un ID à votre select (ci-dessous : justa) pour que cela fonctionne

<script>
  $( "#justa option:first-child" ).attr("disabled","disabled");
</script>

Copier le script ci-dessus

Désactiver la sélection du texte

Placer ce code et ensuite appliquer une class no-select pour désactiver la sélection du texte en question

<style>
/* disable user selection of an element */
.no-select {
  -webkit-user-select: none; /* webkit browsers */
  -khtml-user-select: none; /* Konqueror browser */
  -moz-user-select: none; /* firefox browser */
  -ms-user-select: none; /* internet explorer & edge */
  user-select: none;
}
</style>

Copier le code css

Rediriger en fonction de la langue du navigateur

Dans le cas d’un site multilingue, une redirection automatique peut être intéressante. Ici, si la langue n’est pas le français alors, cela redirige vers coucou/en

<script>
$( document ).ready(function(){
var userLang = navigator.language || navigator.userLanguage;
if (userLang != "fr") {
    window.location.href = "coucou.com/en"
}
});
</script>

Copier le script ci-dessus

Afficher les slides à partir d’un numéro spécifique

Mettre l’ID de votre slider jour et indiquer à partir de quelle slide vous souhaitez commencer

<script>
$(document).ready(function() {
    $('#slider div:nth-child(2)').trigger('tap');
});
</script>

Copier le script ci-dessus

Afficher des class uniquement sur desktop

Cela peut être utile lorsque vous mettez des class css en custom code mais que vous ne souhaitez pas qu’elle s’affiche sur mobile (au hover par exemple).

@media (min-width: 1024px) {
    .ma-class { ma propriete: ma valeur; }
}

Copier la balise

Créer un tableau dans Webflow

<style>
/* ----------------------------- DESIGN DU TABLEAU ----------------------------- */
:root {
  /* COULEURS DU TABLEAU */
  --table-header-font-color: #ffffff; /* couleurs des en-têtes */
  --table-header-bg-color: #2260c9; /* couleurs du backgound des en-têtes */
  --table-header-border-color: #ffffff; /* couleurs des en-têtes */
  
  --table-cell-font-color: #777777;
  --table-cell-border-color: #d2d2d2;
  
  --table-bg-color: #ffffff;
  --table-border-color: #ffffff; /* couleurs des borders */
  
  /* DIMENSIONS DU TABLEAU */
  --table-header-padding-top-bottom: 12px; /* headers top & bottom padding */
  --table-header-padding-left-right: 10px; /* headers left & right padding */
  --table-heading-font-size: 18px;
  
  --table-cell-padding-top-bottom: 10px;  /* Top & bottom des cellules */
  --table-cell-padding-left-right: 10px;  /* Left & Right des cellules */
  --table-cell-font-size: 14px;
  --table-cell-min-width: 200px;
  
  --table-margin-bottom: 48px;
}
/* ----------------------------- FIN DU DESIGN DU TABLEAU ----------------------------- */



/* Paramétrage ci-dessous, pas besoin de changer des éléments */
.table-wrap {
	overflow-x: scroll;
  width: 100%;
  margin-bottom: var(--table-margin-bottom);
}

table, th, td {
  border-collapse: collapse;
}

table {
	width: 100%;
  border: 1px solid var(--table-border-color);
  background-color: var(--table-bg-color);
}

th:last-child {
  border-left: 1px solid var(--table-header-bg-color);
  border-top: 1px solid var(--table-header-bg-color);
  border-right: 1px solid var(--table-header-bg-color);
  border-bottom: 1px solid var(--table-header-bg-color);
}

th {
	text-align: left;
  color: var(--table-header-font-color);
  background-color: var(--table-header-bg-color);
  padding: var(--table-header-padding-top-bottom) var(--table-header-padding-left-right);
  font-size: 16px;
  border-left: 1px solid var(--table-header-bg-color);
  border-top: 1px solid var(--table-header-bg-color);
  border-right: 1px solid var(--table-header-border-color);
  border-bottom: 1px solid var(--table-header-bg-color);
  font-size: var(--table-heading-font-size);
}

td {
  color: var(--table-cell-font-color);
  border: 1px solid var(--table-cell-border-color);
	padding: var(--table-cell-padding-top-bottom) var(--table-cell-padding-left-right);
  font-size: var(--table-cell-font-size);
}

th, td {
	min-width: var(--table-cell-min-width);
}
</style>


<!-- ****Contenu à modifier **** -->
<div class="table-wrap">
  <table>
    <!-- En tête des colonnes -->
    <tr>
      <th>Pays</th>
      <th>Capitale</th>
      <th>Nombre d'habitants</th>
    </tr>

    <!-- Ligne 1 -->
    <tr>
      <td>France</td>
      <td>Paris</td>
      <td>67 millions</td>
    </tr>

    <!-- Ligne 2 -->
    <tr>
      <td>Espagne</td>
      <td>Madrid</td>
      <td>48 millions</td>
    </tr>

    <!-- Ligne 3 -->
    <tr>
      <td>Allemagne</td>
      <td>Berlin</td>
      <td>75 millions</td>
    </tr>
  
  </table>
</div>

Copier le tableau ci-dessus

Désactiver la soumission du formulaire Webflow

Désactiver la soumission du formulaire peut parfois être utile. Par exemple, lorsque le formulaire est juste un moyen d'arriver sur une page pré-filtré une soumission n'est pas utile ou nécessaire.

Changez l'ID #mon-form par celui réellement sur votre formulaire.

<script>
Webflow.push(function() {
  $('#mon-form').submit(function() {
    return false;
  });
});
</script>

Copier le script ci-dessus

Temps de lecture d'un article ou d'un bloc de texte

Script pratique pour ne pas avoir à créer et remplir un champ pour votre blog sous Webflow. Concrètement, cela va compter le nombre de mots et à partir d'une moyenne qui fait consensus (200 mots par minute), estimer le temps de lecture.

Vous avez juste à remplacer la section pour laquelle il faut estimer le temps (ici #article) et ensuite la destination où afficher le chiffre retourné (ici temps qui correspond à un ID. sur la page).

<script>
function get_text(el) {
    ret = "";
    var length = el.childNodes.length;
    for(var i = 0; i < length; i++) {
        var node = el.childNodes[i];
        if(node.nodeType != 8) {
            ret += node.nodeType != 1 ? node.nodeValue : get_text(node);
        }
    }
    return ret;
}
    
var words = get_text(document.querySelector('#article'));
var count = words.split(' ').length;

document.getElementById('temps').innerHTML = Math.round(count / 200).toFixed();
</script>

Copier le script

Bonus : Intégrer schema.org sur Webflow

Pour booster vos résultats SEO, une des clés est de faire comprendre aux moteurs de recherche de quoi traite votre site. Un des moyens est d'utiliser les rich snippets schema.org dans votre projet Webflow.

Bonus 2 : Tous les attributs de Finsweet

On ne va pas tous les citer, mais on vous encourage à installer leur extension Chrome, à aller regarder leur documentation. Vous pouvez aussi prendre le plan Pro pour les soutenir dans le développement de produits pour la communauté Webflow.

Vous souhaitez progresser sur Webflow ?

Recevez nos articles & guides. 1 fois par mois seulement.