Bloquer la touche Entrer permettant de 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>
👉 Voir notre attribute dédié
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>
👉 Voir notre attribute dédié
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" />
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);
Garder les paramètres d’URL après une soumission de formulaire
Pour en savoir plus sur les paramètres d'URL et Webflow, je vous conseille de lire l'article dédié.
<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>
👉 Voir notre attribute 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>
{{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>
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>
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>
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>
👉 Voir notre attribute dédié
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; }
}
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>
Ici, vous pouvez modifier le design dans la 1ère partie du code. L'arrivée des variables dans Webflow va rendre beaucoup plus facile cette tâche.
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>
👉 Voir notre attribute dédié
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>
👉 Voir notre attribute dédié
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.
