Gallery

Webflow Code SheatCheet

Typographie

Ancre & Scroll

CSS effects

Images / Vidéos / SVG

List item bullet point changement

Ordering Nested Collection list (croissant)

Alternating cms item flex gauche droite

foodles code

Scroll mobile menu

Utiliser le Tabs de Webflow en hover :

Test

Explore

Formulaires

Form Formating (regex)

On peut obliger un champ de formulaire à respecter une certaine syntaxe et un certain nombre de caractères.

⁠

Capture d’écran 2020-10-14 à 12.26.54.png

⁠

maxlength = 14

pattern = ^(?:0|$?\+33$?\s?|0033\s?)[1-79](?:[\.\-\s]?\d\d){4}$

(pour un num de tel français)

Code postal FR

maxlength = 5

pattern = ^(([0-8][0-9])|(9[0-5])|(2[ab]))[0-9]{3}$

⁠

Loading regex101.com⁠

⁠

/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/

Tout sauf

Javascript pour validation d’un champ ou un autre minimum Tel et email

const btn = document.querySelector('.btn-main-contact-pop-up')

const els = document.querySelectorAll('._w-input input')

btn.disabled = true

btn.classList.add('disabled')

els.forEach((e, i) => {

const onChange = (ev) => {

console.log(ev)

if (i === 0) {

const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/

const isEmail = emailRegex.test(String(ev.target.value).toLowerCase())

if (isEmail) {

btn.disabled = false

btn.classList.remove('disabled')

} else {

btn.disabled = true

btn.classList.add('disabled')

}

if (i === 1) {

const phoneRegex = /^((\+)33|0)[1-9](\d{2}){4}$/g

const isPhone = phoneRegex.test(String(ev.target.value).toLowerCase())

if (isPhone) {

btn.disabled = false

btn.classList.remove('disabled')

} else {

btn.disabled = true

btn.classList.add('disabled')

}

e.addEventListener('input', onChange)

})

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.