Créer un formulaire HTML efficace

La collecte efficace de données utilisateur est cruciale pour les sites web modernes.

Sans une structure de formulaire adéquate, les interactions peuvent être frustrantes et peu sécurisées.

Cet article explore comment créer des formulaires HTML efficaces, sécurisés et conviviaux.

Table de matière

Bases du formulaire HTML Champs de saisie HTML Boutons radio HTML Cases à cocher HTML Menus déroulants HTML Valeurs par défaut HTML Champs obligatoires HTML Zones de saisie HTML FAQ Conclusion

Formation HTML et CSS : Le Guide du Débutant

Lancez votre carrière de développeur web avec une formation pratique.

Bases du formulaire HTML

Les formulaire HTML sont un élément essentiel pour assurer l’intégration entre un utilisateur et un site web ou une application, à travers les données saisies et soumis par l’utilisateurs puis envoyé à un serveur web. Les formulaires ont une variété de taches ils sont couramment utilisés pour collecter des données, commentaires des clients, ou des demandes de personnes de manière structurée et organisée.

Dans cette partie vous allez créer un formulaire qui permet à l’utilisateur de saisir son nom, prénom et un message, puis de valider ses informations.

Pour créer ce formulaire vous auez besoin des éléments HTML suivants : la balise <form> et ses attributs, le champ <input> et ses attributs ,la balise <label> , la balise <textarea> et la balise <button> pour la soumission .

				
					
 <!DOCTYPE html>
<html lang="en">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulaire</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.jet-image-accordion__item-loader span{--wpr-bg-b5f84ee5-f0b7-432a-b1bd-0f52e4b9e5ba: url('https://blog.alphorm.com/wp-content/plugins/jet-tabs/assets/images/spinner-32.svg');}.rll-youtube-player .play{--wpr-bg-e1223a73-194e-4f4b-aba9-5462c7ed43db: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".jet-image-accordion__item-loader span","style":".jet-image-accordion__item-loader span{--wpr-bg-b5f84ee5-f0b7-432a-b1bd-0f52e4b9e5ba: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/jet-tabs\/assets\/images\/spinner-32.svg');}","hash":"b5f84ee5-f0b7-432a-b1bd-0f52e4b9e5ba","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/jet-tabs\/assets\/images\/spinner-32.svg"},{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-e1223a73-194e-4f4b-aba9-5462c7ed43db: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"e1223a73-194e-4f4b-aba9-5462c7ed43db","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<form method="post" action="traitement.html">
<label for="prenom">Votre prénom:</label>
<input type="text" id="prenom" name="prenom">
<br/><br/>
<label for="nom">Votre nom:</label>
<input type="text" id="nom" name="nom">
<br/><br/>
<label for="msg">Votre message:</label>
<textarea name="message" id="id"></textarea>
<br/><br/>
<input type="submit" value="Valider ce formulaire">
</form>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"e850cd0aec","url":"https:\/\/blog.alphorm.com\/creer-formulaire-html-efficace","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script><script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>

L’élément<form> :Cet élément définit un formulaire . Il s’agit d’un élément conteneur qui contient tous les champs et boutons, il peut également recevoir quelques attributs spécifiques pour gérer son comportement. Toutes ses caractéristiques sont facultatives, mais il est recommandé de définir au moins les caractéristiques action et méthodologie.

Il contient deux attributs essentiels : L’attribut méthode est utilisé pour envoyer les données à un serveur via le formulaire , il peut prendre deux valeur « get » ou « post » .

Pour la méthode « get » les données envoyées sont visibles dans la barre d’adresse du navigateur, mais pour la méthode « post » les données sont envoyées dans le corps donc il est préferable d’utiliser celle ci pour la sécurité des informations .

Pour l’attribut action determine l’endroit (une URL) où les données collectées par le formulaire doivent être transmises.

L’élement input :cette balise est utilisé pour créer les champs de saisie dans un formulaire , elle contient deux attributs ; L’attribut « type » définit quelle type de données est attendu dans le chaps de formulaire , peut etre : texte , email , date , url …

Et l’attribut « name » est ajouté pour définir le nom du champ, et pour identifier les données du champ lorsque le formulaire est soumis.

Label :C’est une étiquette de chaque champ qui décrit ce que l’utilisateur doit saisir ; elle contient l’attribut « for » qui est utilisé pour associé l’étiquette a un élément du formulaire et attribut fait référence à l’id de l’élément correspondant.
Textarea :elle est utilisé pour créer des champs de saisie de texte multilignes. Elle peut être ajouter pour saisir des commentaires , des descriptions ou de long message . vous pouvez personnalisez ce champ en définissant le noms de colonnes et de lignes avec les attributs « rows » and « cols ».
L’élement button :pour permettre à l’utilisateur d’envoyer les données renseignées dans le formulaire. Il contient l’attribut « type » qui prend les valeurs ; « submit » pour soumettre les données du formulaire , ou la valeur « reset » pour render les champs du formulaire a leurs valeurs initial . Et l’attribut « Value » la valeur que l’on souhaite qu’elle soit ecrit sur le boutton .

Lorsque l’utilisateur va cliquer sur le boutton valider ce formulaire , il sera dirigé vers la parge traitement.html , qui est mis dans l’attribut « action » .

La page du traitement du formulaire si vous utilisez l’action « get » :

Champs de saisie HTML

Comme il est cité précédemment le champ input peut avoir différents types, chacun adapté à des types de données spécifiques.

Voici la liste des types de champs les plus courants :

Le champ de type email : Spécifique aux adresses email, la valeur saisie dans le champ sera automatiquement validée pour vérifier s’il s’agit du format d’une adresse mail valide avant que le formulaire soit envoyé.

				
					
 <input type="email" id="mail" name="email">

Le champ de type password : Permet à l’utilisateur de saisir son mot de passe sans qu’il soit lisible à l’écran.

				
					
 <input type="password" id="pass" name="pass">

Le champ de type date : Permet à l’utilisateur de saisir une date, via un champ texte dont la valeur est validée ou avec un sélecteur de date.

				
					
 <input type="date" id="date" name="date">

Le champ de type url : Permet à l’utilisateur de saisir ou d’éditer une URL , avec une validation intégrée .

				
					
 <input type="url" id="web" name="web">

Le champ de type number : Permet à l’utilisateur de saisir des nombres numériques, des valeurs entières uniquement. Des mécanismes de validation sont intégrés pour rejeter les valeurs non-numériques.

				
					
 <input type="number" id="age" name="age">

Boutons radio HTML

Les boutons radio <input type= »radio »> sont généralement utilisés pour construire des groupes d’options parmi lesquelles on ne peut choisir qu’une valeur. Les « boutons radio » sont représentés par des cercles remplis lorsqu’ils sont sélectionnés.

				
					
 - Aimez-vous cette formation ?<br/>
<input type="radio" id="oui" name="formation" value="oui" checked>
<label for="oui">Oui</label>
<input type="radio" id="nom" name="formation" value="non" >
<label for="oui">Non</label>
<br/><br/>
- Etes-vous majeur?<br/>
<input type="radio" id="ouimajeur" name="majeur" value="oui" checked>
<label for="oui">Oui</label>
<input type="radio" id="nonmajeur" name="majeur" value="non" >
<label for="oui">Non</label>
<br/><br/>

Voici les attributs principaux :

Name : Tous les boutons radio d’un même groupe doivent avoir le même « name » , ce qui signifie qu’une seule option doit être sélectionné . Pas comme dans ce cas si on met un « name » différent pour des éléments du même groupe.

Id: Chaque bouton radio à un identifiant « id » associé à l’attribut « for » dans l’étiquette <label> . Cela permet à l’utilisateur de cliquer sur le texte pour sélectionner l’option.

Value : Chaque bouton doit avoir une valeur unique qui va être ennoyée lorsque le formulaire sera soumis.

Checked : Vous pouvez utiliser l’attribut « checked » a l’une des options pour qu’elle soit sélectionnée par défaut.

Cases à cocher HTML

Les cases à cocher en HTML sont utilisées pour permettre à l’utilisateur de sélectionner plus d’une seule option parmi un ensemble. Ces cases à cocher sont affichés à l’aide du checkbox , qui est un élément input .Pour insérer une case à cocher sur la page web, il faut utiliser le code HTML: < input type= »checkbox » > .

				
					
 -Quelles sont vos fruits préférés ? <br>
<input type="checkbox" name="fruits" id="banane" value="banane">
<label for="banane">Banane</label><br>
<input type="checkbox" name="fruits" id="pomme" value="pomme">
<label for="pomme">Pomme</label><br>
<input type="checkbox" name="fruits" id="fraise" value="fraise">
<label for="fraise">Fraise</label>
<br/><br/>

L’attribut type « checkbox » commande au navigateur d’afficher une case à cocher. Par défaut, la case est carrée et aux dimensions standards. Il possède les mêmes attributs que les boutons radio : « id » pour l’identifiant de case à cocher, « name » pour le nom du groupe auquel cette case appartient, « value » étant la valeur envoyée lorsque la case est cochée. Vous pouvez aussi ajouter l’attribut « checked » pour qu’elle soit cochée par défaut.

Menus déroulants HTML

Les listes déroulantes en HTML sont utilisées pour permettre aux utilisateur de sélectionner une option dans un ensemble. Ils sont utilisés pour présenter un grands nombres d’options dans un espace réduit, de maniéré structurée et lisible.

				
					
 -De quelle ville Etes-vous ?
<select name="ville" >
<optgroup label="Ville de l'Ouest">
<option value="Brest">Brest</option>
<option value="Rennes">Rennes</option>
<option value="Nantes">Nantes</option>
</optgroup>
<optgroup label="Ville de l'Est">
<option value="Strasbourg">Strasbourg</option>
<option value="Besançon">Besançon</option>
</optgroup>
</select>

La balise <select> : Cette liste déroulante est créée avec la balise <select name= » » > avec l’attribut « name » spécifie le nom du champ de formulaire.

La balise option : C’est la balise qui définit les options dans la liste déroulante.

La balise optgroup : Cette balise regroupe les options au sein de la liste, elle permet de rendre le menu plus organisé et clair lorsqu’il y a un grand nombre d’options. L’attribut label définit l’étiquette du groupe d’options. Cette étiquète est lisible par l’utilisateur pour indiquer la catégorie d’option.

Vous pouvez ajouter une sélection par défaut en ajoutant l’attribut « selected » à une balise <option>.

				
					
 <option value="Strasbourg" selected>Strasbourg</option>

Valeurs par défaut HTML

L’ajout d’une valeur par défaut ou un texte indicatif dans les champs de saisie d’un formulaire aide l’utilisateur à facilement comprendre comment il doit remplir son formulaire. Dans cette partie vous allez voir deux attributs différents : « placeholder » et « value ».

Value : cet attribut définit la valeur par défaut dans le champs de saisie .

Exemple :

				
					
 <label for="prenom">Votre prénom:</label>
<input type="text" id="prenom" name="prenom" value="Jean ">

Placeholder : cet attribut est utilisé pour fournir un texte indicatif dans le champ de saisit , ce texte disparait une fois l’utilisateur commence a saisir une valeur . Cet attribut est utile pour fournir des indices contextuels sur ce qui doit être saisie dans les champs de formulaire .

Champs obligatoires HTML

Pour rendre un champ de formulaire obligatoire on utilise l’attribut « required » qui peut être ajouté aux éléments input, textarea ou select . Une fois que le champ est marqué comme « required » l’utilisateur ne peut pas soumettre le formulaire avant de remplir ce champ, le navigateur s’assure d’afficher un message au cas où ce dernier est resté vide.

Comme ceci :

				
					
 <input type="password" id="pass" name="pass" required>

Zones de saisie HTML

Afin de mieux organiser votre formulaire et le rendre plus lisible et organisé vous pouvez utiliser les balises <fieldset> et <legend> pour regrouper votre formulaire en section en associant une légende décrivant ce groupe.

<body>

				
					
 <fieldset>
<legend>partie 1 :</legend>
<label for="prenom">Votre prénom:</label>
<input type="text" id="prenom" name="prenom" value="Jean ">
<br/><br/>
<label for="nom">Votre nom:</label>
<input type="text" id="nom" name="nom" value="Dupont">
<br/><br/>
<label for="mail">Votre Email :</label>
<input type="email" id="mail" name="email">
<br/><br/>
<label for="pass">Votre mot de passe  :</label>
<input type="password" id="pass" name="pass" required>
<br/><br/>
<label for="date">Votre date de naissance  :</label>
<input type="date" id="date" name="date">
<br/><br/>
<label for="web">Votre site web   :</label>
<input type="url" id="web" name="web">
<br/><br/>
<label for="age">Votre age:</label>
<input type="number" id="age" name="age">
<br/><br/>
</fieldset>
<fieldset>
<legend>partie 2 :</legend>
- Aimez-vous cette formation ?<br/>
<input type="radio" id="oui" name="formation1" value="oui" checked>
<label for="oui">Oui</label>
<input type="radio" id="nom" name="formation1" value="non" >
<label for="oui">Non</label>
<br/><br/>
- Etes-vous majeur?<br/>
<input type="radio" id="ouimajeur" name="majeur" value="oui" checked>
<label for="oui">Oui</label>
<input type="radio" id="nonmajeur" name="majeur" value="non" >
<label for="oui">Non</label>
<br/><br/>
-Quelles sont vos fruits préférés ? <br>
<input type="checkbox" name="fruits" id="banane" value="banane">
<label for="banane">Banane</label><br>
<input type="checkbox" name="fruits" id="pomme" value="pomme">
<label for="pomme">Pomme</label><br>
<input type="checkbox" name="fruits" id="fraise" value="fraise">
<label for="fraise">Fraise</label>
<br/><br/>
-De quelle ville Etes-vous ?
<select name="ville" >
<optgroup label="Ville de l'Ouest">
<option value="Brest">Brest</option>
<option value="Rennes">Rennes</option>
<option value="Nantes">Nantes</option>
</optgroup>
<optgroup label="Ville de l'Est">
<option value="Strasbourg" selected>Strasbourg</option>
<option value="Besançon">Besançon</option>
</optgroup>
</select>
<br/><br/>
<label for="msg">Votre message:</label>
<textarea name="message" id="id" placeholder="ecrivez un message"></textarea>
<br/><br/>
<input type="submit" value="Valider ce formulaire">
</fieldset>
</form>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"e850cd0aec","url":"https:\/\/blog.alphorm.com\/creer-formulaire-html-efficace","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>

Voici le lien du CodePen si vous voulez faire des modifications

See the Pen Application fondamentaux de jQuery by Alphorm (@alphorm) on CodePen.

En résume, Les formulaires en HTML ont un rôle primordial dans la collecte des données et informations de l’utilisateurs sur des sites web, en permettant à ce dernier des possibilités d’interactions telles que l’inscription la connexion, et la soumission de commentaires. Ils comportent divers éléments comme des champs de texte, des boutons radio, et des menus déroulants pour structurer les entrées. Qui jouent un rôle important en simplifiant la communication entre l’utilisateur et le serveur, ce qui permet de personnaliser et de traiter les données. En plus de la collecte de données, les formulaires contribuent à l’accessibilité et à l’amélioration de l’expérience utilisateur sur le web.

Formez-vous gratuitement avec Alphorm !

Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.

FAQ

Comment créer un formulaire HTML basique ?

Pour créer un formulaire HTML basique, utilisez la balise

pour définir le formulaire, en ajoutant des champs de saisie avec la balise . Assurez-vous de spécifier les attributs essentiels comme ‘action’ et ‘method’ pour déterminer comment et où les données sont envoyées. Des éléments tels que ,

, et <button> peuvent être ajoutés pour améliorer l’expérience utilisateur. Cette structure permet de collecter efficacement les données des utilisateurs tout en garantissant une soumission correcte vers le serveur.								</div>
				</div>
					</details>
						<details id="e-n-accordion-item-3821" class="e-n-accordion-item" >
				<summary class="e-n-accordion-item-title" data-accordion-index="2" tabindex="-1" aria-expanded="false" aria-controls="e-n-accordion-item-3821" >
					<span class='e-n-accordion-item-title-header'><div class="e-n-accordion-item-title-text"> Quels sont les attributs essentiels d'un formulaire HTML ? </div></span>
							<span class='e-n-accordion-item-title-icon'>
			<span class='e-opened' ><svg aria-hidden="true" class="e-font-icon-svg e-fas-minus" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg></span>
			<span class='e-closed'><svg aria-hidden="true" class="e-font-icon-svg e-fas-plus" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg></span>
		</span>

</summary>
				<div role="region" aria-labelledby="e-n-accordion-item-3821" class="elementor-element elementor-element-eefcc9e1 e-con-full e-flex e-con e-child" data-id="eefcc9e1" data-element_type="container" data-settings="{"jet_parallax_layout_list":[]}">
				<div class="elementor-element elementor-element-01977f8f elementor-widget elementor-widget-text-editor" data-id="01977f8f" data-element_type="widget" data-widget_type="text-editor.default">
									Les attributs essentiels d’un formulaire HTML incluent ‘action’ et ‘method’. ‘Action’ spécifie l’URL où les données doivent être envoyées, tandis que ‘method’ détermine comment les données sont transmises, généralement via ‘get’ ou ‘post’. ‘Post’ est recommandé pour la sécurité, car il envoie les données dans le corps de la requête. D’autres attributs comme ‘name’ et ‘id’ pour les champs <input> sont également cruciaux pour identifier et manipuler les données correctement.								</div>
				</div>
					</details>
						<details id="e-n-accordion-item-3822" class="e-n-accordion-item" >
				<summary class="e-n-accordion-item-title" data-accordion-index="3" tabindex="-1" aria-expanded="false" aria-controls="e-n-accordion-item-3822" >
					<span class='e-n-accordion-item-title-header'><div class="e-n-accordion-item-title-text"> Comment sécuriser les données d'un formulaire HTML ? </div></span>
							<span class='e-n-accordion-item-title-icon'>
			<span class='e-opened' ><svg aria-hidden="true" class="e-font-icon-svg e-fas-minus" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg></span>
			<span class='e-closed'><svg aria-hidden="true" class="e-font-icon-svg e-fas-plus" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg></span>
		</span>

</summary>
				<div role="region" aria-labelledby="e-n-accordion-item-3822" class="elementor-element elementor-element-65767f82 e-con-full e-flex e-con e-child" data-id="65767f82" data-element_type="container" data-settings="{"jet_parallax_layout_list":[]}">
				<div class="elementor-element elementor-element-6d0f09f5 elementor-widget elementor-widget-text-editor" data-id="6d0f09f5" data-element_type="widget" data-widget_type="text-editor.default">
									Pour sécuriser les données d’un formulaire HTML, il est conseillé d’utiliser la méthode ‘post’, qui envoie les données dans le corps de la requête, évitant leur affichage dans l’URL. Assurez-vous que tous les champs sensibles, comme les mots de passe, utilisent des types de champ appropriés, tels que <input type='password'>, pour masquer les informations. Ajouter des validations côté client et serveur peut également protéger contre les entrées malveillantes, assurant que seules les données conformes sont acceptées.								</div>
				</div>
					</details>
						<details id="e-n-accordion-item-3823" class="e-n-accordion-item" >
				<summary class="e-n-accordion-item-title" data-accordion-index="4" tabindex="-1" aria-expanded="false" aria-controls="e-n-accordion-item-3823" >
					<span class='e-n-accordion-item-title-header'><div class="e-n-accordion-item-title-text"> Quels types de champs peut-on utiliser dans un formulaire HTML ? </div></span>
							<span class='e-n-accordion-item-title-icon'>
			<span class='e-opened' ><svg aria-hidden="true" class="e-font-icon-svg e-fas-minus" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg></span>
			<span class='e-closed'><svg aria-hidden="true" class="e-font-icon-svg e-fas-plus" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg></span>
		</span>

</summary>
				<div role="region" aria-labelledby="e-n-accordion-item-3823" class="elementor-element elementor-element-2efbe364 e-con-full e-flex e-con e-child" data-id="2efbe364" data-element_type="container" data-settings="{"jet_parallax_layout_list":[]}">
				<div class="elementor-element elementor-element-389f16f3 elementor-widget elementor-widget-text-editor" data-id="389f16f3" data-element_type="widget" data-widget_type="text-editor.default">
									Dans un formulaire HTML, divers types de champs peuvent être utilisés pour collecter différents types de données. Les champs <input> peuvent être de type ‘text’, ’email’, ‘password’, ‘date’, ‘url’, ou ‘number’, chacun ayant une fonction spécifique. Les champs de type ‘radio’ et ‘checkbox’ permettent des sélections multiples ou uniques, tandis que <textarea> est idéal pour les saisies textuelles longues. Chaque type de champ est conçu pour améliorer l’expérience utilisateur en validant et en facilitant la saisie de données spécifiques.								</div>
				</div>
					</details>
						<details id="e-n-accordion-item-3824" class="e-n-accordion-item" >
				<summary class="e-n-accordion-item-title" data-accordion-index="5" tabindex="-1" aria-expanded="false" aria-controls="e-n-accordion-item-3824" >
					<span class='e-n-accordion-item-title-header'><div class="e-n-accordion-item-title-text"> Comment améliorer l'expérience utilisateur avec les formulaires HTML ? </div></span>
							<span class='e-n-accordion-item-title-icon'>
			<span class='e-opened' ><svg aria-hidden="true" class="e-font-icon-svg e-fas-minus" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg></span>
			<span class='e-closed'><svg aria-hidden="true" class="e-font-icon-svg e-fas-plus" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg></span>
		</span>

</summary>
				<div role="region" aria-labelledby="e-n-accordion-item-3824" class="elementor-element elementor-element-a3de8238 e-con-full e-flex e-con e-child" data-id="a3de8238" data-element_type="container" data-settings="{"jet_parallax_layout_list":[]}">
				<div class="elementor-element elementor-element-3e8f6cd5 elementor-widget elementor-widget-text-editor" data-id="3e8f6cd5" data-element_type="widget" data-widget_type="text-editor.default">
									Pour améliorer l’expérience utilisateur avec les formulaires HTML, utilisez des attributs comme ‘placeholder’ pour fournir des indices sur les données à saisir et ‘required’ pour indiquer les champs obligatoires. Organisez les formulaires avec <fieldset> et <legend> pour une structure claire. Assurez-vous que les labels sont correctement associés aux champs grâce à l’attribut ‘for’ et utilisez des validations pour guider l’utilisateur en temps réel. Ces pratiques rendent les formulaires plus intuitifs et accessibles, augmentant ainsi l’engagement et la satisfaction des utilisateurs.								</div>
				</div>
					</details>
					</div>
					<script type="application/ld+json">{"@context":"https:\/\/schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"Comment cr\u00e9er un formulaire HTML basique ?","acceptedAnswer":{"@type":"Answer","text":""}},{"@type":"Question","name":"Quels sont les attributs essentiels d'un formulaire HTML ?","acceptedAnswer":{"@type":"Answer","text":""}},{"@type":"Question","name":"Comment s\u00e9curiser les donn\u00e9es d'un formulaire HTML ?","acceptedAnswer":{"@type":"Answer","text":""}},{"@type":"Question","name":"Quels types de champs peut-on utiliser dans un formulaire HTML ?","acceptedAnswer":{"@type":"Answer","text":""}},{"@type":"Question","name":"Comment am\u00e9liorer l'exp\u00e9rience utilisateur avec les formulaires HTML ?","acceptedAnswer":{"@type":"Answer","text":""}}]}</script>
							</div>
				<div class="elementor-element elementor-element-05e2a651 elementor-widget elementor-widget-heading" data-id="05e2a651" data-element_type="widget" data-widget_type="heading.default">
					<h2 id="conclusion" class="rb-heading-index-11 elementor-heading-title elementor-size-default">Conclusion</h2>				</div>
				<div class="elementor-element elementor-element-1c857be4 elementor-widget elementor-widget-text-editor" data-id="1c857be4" data-element_type="widget" data-widget_type="text-editor.default">
									<p>En conclusion, les formulaires HTML sont un outil puissant pour interagir avec les utilisateurs et collecter des données pertinentes. Quelles autres fonctionnalités HTML aimeriez-vous explorer pour enrichir vos formulaires et améliorer l’interaction utilisateur?</p>								</div>
					</div>
				</div>
				</div>
		</p></div>
					<div class="entry-bottom">
				<style id="elementor-post-24674">.elementor-24674 .elementor-element.elementor-element-056f822{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:45px 45px;--row-gap:45px;--column-gap:45px;--margin-top:0px;--margin-bottom:45px;--margin-left:0px;--margin-right:0px;}.elementor-24674 .elementor-element.elementor-element-b17d29b .jet-listing-dynamic-terms{text-align:left;}.elementor-24674 .elementor-element.elementor-element-b17d29b .jet-listing-dynamic-terms__link{font-family:"Helvetica";font-size:16px;padding:8px 16px 8px 16px;margin:0px 0px 0px 0px;border-style:solid;border-width:1px 1px 1px 1px;border-color:var( --e-global-color-90b0b4f );border-radius:8px 8px 8px 8px;}.elementor-24674 .elementor-element.elementor-element-b17d29b .jet-listing-dynamic-terms__prefix{font-family:"Helvetica";font-size:12px;}body:not(.rtl) .elementor-24674 .elementor-element.elementor-element-b17d29b .jet-listing-dynamic-terms__prefix{margin-right:8px;}body.rtl .elementor-24674 .elementor-element.elementor-element-b17d29b .jet-listing-dynamic-terms__prefix{margin-left:8px;}.elementor-24674 .elementor-element.elementor-element-ad9ef9d{--grid-side-margin:10px;--grid-column-gap:10px;--grid-row-gap:10px;--grid-bottom-margin:10px;--e-share-buttons-primary-color:var( --e-global-color-primary );}.elementor-24674 .elementor-element.elementor-element-ad9ef9d .elementor-share-btn:hover{--e-share-buttons-primary-color:var( --e-global-color-bf402c9 );}.elementor-24674 .elementor-element.elementor-element-ad9ef9d .elementor-share-btn__title{font-family:"Helvetica";font-size:16px;font-weight:normal;}.elementor-24674 .elementor-element.elementor-element-777cf24 .ubio{font-size:16px;line-height:37px;}@media(max-width:1024px){ .elementor-24674 .elementor-element.elementor-element-ad9ef9d{--grid-side-margin:10px;--grid-column-gap:10px;--grid-row-gap:10px;--grid-bottom-margin:10px;}}@media(max-width:767px){ .elementor-24674 .elementor-element.elementor-element-ad9ef9d{--grid-side-margin:10px;--grid-column-gap:10px;--grid-row-gap:10px;--grid-bottom-margin:10px;}}</style>		<div data-elementor-type="wp-post" data-elementor-id="24674" class="elementor elementor-24674" data-elementor-post-type="rb-etemplate">
				<div class="elementor-element elementor-element-056f822 e-flex e-con-boxed e-con e-parent" data-id="056f822" data-element_type="container" data-settings="{"jet_parallax_layout_list":[]}">
					<div class="e-con-inner">
				<div class="elementor-element elementor-element-b17d29b elementor-widget elementor-widget-jet-listing-dynamic-terms" data-id="b17d29b" data-element_type="widget" data-widget_type="jet-listing-dynamic-terms.default">
				<div class="elementor-widget-container">
					<div class="jet-listing jet-listing-dynamic-terms"><span class="jet-listing-dynamic-terms__prefix">ÉTIQUETÉ : </span><a href="https://blog.alphorm.com/tag/css" class="jet-listing-dynamic-terms__link" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">CSS</a><span class="jet-listing-dynamic-terms__delimiter">,</span> <a href="https://blog.alphorm.com/tag/html" class="jet-listing-dynamic-terms__link" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">HTML</a></div>				</div>
				</div>
				<div class="elementor-element elementor-element-ad9ef9d elementor-share-buttons--shape-rounded elementor-share-buttons--color-custom elementor-share-buttons--view-icon-text elementor-share-buttons--skin-gradient elementor-grid-0 elementor-widget elementor-widget-share-buttons" data-id="ad9ef9d" data-element_type="widget" data-widget_type="share-buttons.default">
							<div class="elementor-grid" role="list">
								<div class="elementor-grid-item" role="listitem">
						<div class="elementor-share-btn elementor-share-btn_facebook" role="button" tabindex="0" aria-label="Partager sur facebook">
															<span class="elementor-share-btn__icon">
								<svg class="e-font-icon-svg e-fab-facebook" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"></path></svg>							</span>
																						<div class="elementor-share-btn__text">
																			<span class="elementor-share-btn__title">
										Facebook									</span>
																	</div>
													</div>
					</div>
									<div class="elementor-grid-item" role="listitem">
						<div class="elementor-share-btn elementor-share-btn_x-twitter" role="button" tabindex="0" aria-label="Partager sur x-twitter">
															<span class="elementor-share-btn__icon">
								<svg class="e-font-icon-svg e-fab-x-twitter" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path></svg>							</span>
																						<div class="elementor-share-btn__text">
																			<span class="elementor-share-btn__title">
										Twitter									</span>
																	</div>
													</div>
					</div>
									<div class="elementor-grid-item" role="listitem">
						<div class="elementor-share-btn elementor-share-btn_linkedin" role="button" tabindex="0" aria-label="Partager sur linkedin">
															<span class="elementor-share-btn__icon">
								<svg class="e-font-icon-svg e-fab-linkedin" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"></path></svg>							</span>
																						<div class="elementor-share-btn__text">
																			<span class="elementor-share-btn__title">
										LinkedIn									</span>
																	</div>
													</div>
					</div>
									<div class="elementor-grid-item" role="listitem">
						<div class="elementor-share-btn elementor-share-btn_email" role="button" tabindex="0" aria-label="Partager sur email">
															<span class="elementor-share-btn__icon">
								<svg class="e-font-icon-svg e-fas-envelope" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"></path></svg>							</span>
																						<div class="elementor-share-btn__text">
																			<span class="elementor-share-btn__title">
										Email									</span>
																	</div>
													</div>
					</div>
									<div class="elementor-grid-item" role="listitem">
						<div class="elementor-share-btn elementor-share-btn_whatsapp" role="button" tabindex="0" aria-label="Partager sur whatsapp">
															<span class="elementor-share-btn__icon">
								<svg class="e-font-icon-svg e-fab-whatsapp" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"></path></svg>							</span>
																						<div class="elementor-share-btn__text">
																			<span class="elementor-share-btn__title">
										WhatsApp									</span>
																	</div>
													</div>
					</div>
						</div>
						</div>
				<div class="elementor-element elementor-element-777cf24 name-underline default-scheme elementor-widget elementor-widget-foxiz-single-author" data-id="777cf24" data-element_type="widget" data-widget_type="foxiz-single-author.default">
				<div class="elementor-widget-container">
					<div class="usr-holder">		<div class="ubox">
			<div class="ubox-header">
				<div class="author-info-wrap">
					<a class="author-avatar" href="https://blog.alphorm.com/author/admin4113" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer"><img alt='' src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%20120'%3E%3C/svg%3E" data-lazy-srcset='https://blog.alphorm.com/wp-content/uploads/2024/09/lEquipe-alphorm_avatar-240x240.png 2x' class='avatar avatar-120 photo' height='120' width='120' decoding='async' data-lazy-src="https://blog.alphorm.com/wp-content/uploads/2024/09/lEquipe-alphorm_avatar-120x120.png"/><noscript><img alt='' src='https://blog.alphorm.com/wp-content/uploads/2024/09/lEquipe-alphorm_avatar-120x120.png' srcset='https://blog.alphorm.com/wp-content/uploads/2024/09/lEquipe-alphorm_avatar-240x240.png 2x' class='avatar avatar-120 photo' height='120' width='120' loading='lazy' decoding='async'/></noscript></a>
					<div class="is-meta">
						<div class="nname-info meta-author">
							<span class="meta-label">Par</span>
															<a class="nice-name" href="https://blog.alphorm.com/author/admin4113" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">L'Équipe Alphorm</a>
																						<i class="verified-tick rbi rbi-wavy"></i>						</div>
						<span class="author-job">Démocratiser la Connaissance Informatique pour Tous !</span>
					</div>
				</div>
									<div class="usocials tooltips-n meta-text">
						<span class="ef-label">Suivre :</span><a class="social-link-website" aria-label="Site web" data-title="Site web" href="https://www.alphorm.com/" target="_blank" rel="noopener nofollow external noreferrer" data-wpel-link="external"><i class="rbi rbi-link" aria-hidden="true"></i></a><a class="social-link-facebook" aria-label="Facebook" data-title="Facebook" href="https://www.facebook.com/Alphorm.Officiel/" target="_blank" rel="noopener nofollow external noreferrer" data-wpel-link="external"><i class="rbi rbi-facebook" aria-hidden="true"></i></a><a class="social-link-twitter" aria-label="X" data-title="X" href="https://twitter.com/alphorm" target="_blank" rel="noopener nofollow external noreferrer" data-wpel-link="external"><i class="rbi rbi-twitter" aria-hidden="true"></i></a><a class="social-link-instagram" aria-label="Instagram" data-title="Instagram" href="https://www.instagram.com/alphorm.officiel/" target="_blank" rel="noopener nofollow external noreferrer" data-wpel-link="external"><i class="rbi rbi-instagram" aria-hidden="true"></i></a><a class="social-link-linkedin" aria-label="LinkedIn" data-title="LinkedIn" href="https://www.linkedin.com/school/alphorm/" target="_blank" rel="noopener nofollow external noreferrer" data-wpel-link="external"><i class="rbi rbi-linkedin" aria-hidden="true"></i></a>					</div>
							</div>
			<div class="ubio description-text rb-text">L'Équipe Alphorm, c'est la démocratisation de la connaissance informatique. Passionnés et dévoués, nous sommes là pour vous guider vers le succès en rendant la technologie accessible à tous. Rejoignez notre aventure d'apprentissage et de partage. Avec nous, le savoir IT devient une ressource inspirante et ouverte à tous dans un monde numérique en constante évolution.</div>
		</div>
		</div>				</div>
				</div>
					</div>
				</div>
				</div>
		
		<div id="recent-posts-3" class="widget entry-widget clearfix widget_recent_entries">
		<div class="block-h widget-heading heading-layout-10"><div class="heading-inner"><h4 class="heading-title"><span>Derniers Articles</span></h4></div></div>
		<ul>
											<li>
					<a href="https://blog.alphorm.com/lire-ecrire-fichier-texte-csharp" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">Techniques pour gérer les fichiers texte en C#</a>
									</li>
											<li>
					<a href="https://blog.alphorm.com/creer-lire-fichier-csv-csharp" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">Créer et lire un fichier CSV avec C#</a>
									</li>
											<li>
					<a href="https://blog.alphorm.com/comprendre-utiliser-json-efficacement" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">JSON : Comprendre et Utiliser Efficacement</a>
									</li>
											<li>
					<a href="https://blog.alphorm.com/creer-base-donnees-sqlite-csharp-visual-studio" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">Créer une Base SQLite dans C#</a>
									</li>
											<li>
					<a href="https://blog.alphorm.com/lecture-donnees-sqlite-csharp-securisation" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">Lecture des données SQLite simplifiée</a>
									</li>
					</ul>

</div>			</div>
						</div>
			</div>
					</div>
			<div class="comment-box-wrap entry-sec">
			<div class="comment-box-header">
									<span class="comment-box-title h3"><i class="rbi rbi-comment" aria-hidden="true"></i><span class="is-invisible">Laisser un commentaire</span></span>
					<a href="#" class="show-post-comment"><i class="rbi rbi-comment" aria-hidden="true"></i>Laisser un commentaire					</a>
							</div>
			<div class="comment-holder no-comment is-hidden">    <div id="comments" class="comments-area">
					<div id="respond" class="comment-respond">
		<h3 id="reply-title" class="comment-reply-title">Laisser un commentaire <small><a rel="follow noopener noreferrer" id="cancel-comment-reply-link" href="/creer-formulaire-html-efficace#respond" style="display:none;" data-wpel-link="internal" target="_self">Annuler la réponse</a></small></h3><p class="must-log-in">Vous devez <a href="https://blog.alphorm.com/wp-login.php?redirect_to=https%3A%2F%2Fblog.alphorm.com%2Fcreer-formulaire-html-efficace" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">vous connecter</a> pour publier un commentaire.</p>	</div>
	    </div>
</div>
		</div>
							</div>
								<div class="sidebar-wrap single-sidebar">
				<div class="sidebar-inner clearfix">
					<style id="elementor-post-3425">.elementor-3425 .elementor-element.elementor-element-5563f48{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}</style>		<div data-elementor-type="wp-post" data-elementor-id="3425" class="elementor elementor-3425" data-elementor-post-type="rb-etemplate">
				<div class="elementor-element elementor-element-5563f48 e-flex e-con-boxed e-con e-parent" data-id="5563f48" data-element_type="container" data-settings="{"jet_parallax_layout_list":[],"sticky":"top","sticky_on":["desktop","tablet","mobile"],"sticky_offset":0,"sticky_effects_offset":0,"sticky_anchor_link_offset":0}">
					<div class="e-con-inner">
					</div>
				</div>
				</div>
						</div>
			</div>
							</div>
				</article>			</div>
		</div>
		</div>
		<footer class="footer-wrap rb-section footer-etemplate">
					<div data-elementor-type="wp-post" data-elementor-id="3053" class="elementor elementor-3053" data-elementor-post-type="rb-etemplate">
				<div class="elementor-element elementor-element-fb3349d e-flex e-con-boxed e-con e-parent" data-id="fb3349d" data-element_type="container" data-settings="{"jet_parallax_layout_list":[]}">
					<div class="e-con-inner">
		<div class="elementor-element elementor-element-6594acb e-con-full e-flex e-con e-child" data-id="6594acb" data-element_type="container" data-settings="{"jet_parallax_layout_list":[]}">
		<div class="elementor-element elementor-element-db25ebb e-con-full e-flex e-con e-child" data-id="db25ebb" data-element_type="container" data-settings="{"jet_parallax_layout_list":[]}">
				<div class="elementor-element elementor-element-8d648d4 elementor-widget elementor-widget-foxiz-logo" data-id="8d648d4" data-element_type="widget" data-widget_type="foxiz-logo.default">
				<div class="elementor-widget-container">
							<div class="the-logo">
			<a href="https://blog.alphorm.com/" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer">
									<img loading="eager" decoding="async" width="472" height="148" src="https://static.alphorm.com/blog-alphorm-uploads/2024/01/08164146/logo-Footer.png" alt="Blog Alphorm"/>
							</a>
					</div>
						</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-1700348 e-con-full e-flex e-con e-child" data-id="1700348" data-element_type="container" data-settings="{"jet_parallax_layout_list":[]}">
				<div class="elementor-element elementor-element-3cd950a elementor-widget elementor-widget-foxiz-social-list" data-id="3cd950a" data-element_type="widget" data-widget_type="foxiz-social-list.default">
				<div class="elementor-widget-container">
							<div class="header-social-list">
			<div class="e-social-holder">
				<a class="social-link-facebook" aria-label="Facebook" data-title="Facebook" href="https://www.facebook.com/Alphorm.Officiel/" target="_blank" rel="noopener nofollow external noreferrer" data-wpel-link="external"><i class="rbi rbi-facebook" aria-hidden="true"></i></a><a class="social-link-twitter" aria-label="X" data-title="X" href="https://twitter.com/alphorm" target="_blank" rel="noopener nofollow external noreferrer" data-wpel-link="external"><i class="rbi rbi-twitter" aria-hidden="true"></i></a><a class="social-link-instagram" aria-label="Instagram" data-title="Instagram" href="https://www.instagram.com/alphorm.officiel/" target="_blank" rel="noopener nofollow external noreferrer" data-wpel-link="external"><i class="rbi rbi-instagram" aria-hidden="true"></i></a><a class="social-link-linkedin" aria-label="LinkedIn" data-title="LinkedIn" href="https://www.linkedin.com/school/alphorm/" target="_blank" rel="noopener nofollow external noreferrer" data-wpel-link="external"><i class="rbi rbi-linkedin" aria-hidden="true"></i></a><a class="social-link-rss" aria-label="Rss" data-title="Rss" href="#" target="_blank" rel="noopener nofollow"><i class="rbi rbi-rss" aria-hidden="true"></i></a>			</div>
		</div>
						</div>
				</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-b9c90bb e-con-full e-flex e-con e-child" data-id="b9c90bb" data-element_type="container" data-settings="{"jet_parallax_layout_list":[]}">
				<div class="elementor-element elementor-element-f8a9cfa no-edge is-divider-pipe-2 elementor-widget elementor-widget-foxiz-navigation" data-id="f8a9cfa" data-element_type="widget" data-widget_type="foxiz-navigation.default">
				<div class="elementor-widget-container">
							<nav id="site-navigation" class="main-menu-wrap template-menu" aria-label="main menu">
			<ul id="menu-main-menu-categories-2" class="main-menu rb-menu large-menu" itemscope itemtype="https://www.schema.org/SiteNavigationElement"><li class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-23924"><a href="https://blog.alphorm.com/developpement" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer"><span>Développement</span></a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-23926"><a href="https://blog.alphorm.com/3d-et-animation" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer"><span>3D et Animation</span></a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-23925"><a href="https://blog.alphorm.com/cybersecurite" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer"><span>Cybersécurité</span></a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-23927"><a href="https://blog.alphorm.com/infrastructure" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer"><span>Infrastructure</span></a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-23928"><a href="https://blog.alphorm.com/virtualisation" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer"><span>Virtualisation</span></a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-23929"><a href="https://blog.alphorm.com/reseaux" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer"><span>Réseaux</span></a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-23930"><a href="https://blog.alphorm.com/bureautique" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer"><span>Bureautique</span></a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-23957"><a href="https://blog.alphorm.com/base-de-donnees" data-wpel-link="internal" target="_self" rel="follow noopener noreferrer"><span>BDD</span></a></li>
</ul>		</nav>
				<div id="s-title-sticky" class="s-title-sticky">
			<div class="s-title-sticky-left">
				<span class="sticky-title-label">En cours de lecture :</span>
				<span class="h4 sticky-title">Créer un formulaire HTML efficace</span>
			</div>
					</div>
					</div>
				</div>
				</div>
		<div class="elementor-element elementor-element-623cf5a e-con-full e-flex e-con e-child" data-id="623cf5a" data-element_type="container" data-settings="{"jet_parallax_layout_list":[]}">
				<div class="elementor-element elementor-element-1c4ee53 elementor-widget elementor-widget-heading" data-id="1c4ee53" data-element_type="widget" data-widget_type="heading.default">
					<p class="elementor-heading-title elementor-size-default">© Alphorm - Tous droits réservés</p>				</div>
				</div>
					</div>
				</div>
				</div>
		</footer>
		</div>
		<script type="rocketlazyloadscript">
            (function () {
                const yesStorage = () => {
                    let storage;
                    try {
                        storage = window['localStorage'];
                        storage.setItem('__rbStorageSet', 'x');
                        storage.removeItem('__rbStorageSet');
                        return true;
                    } catch {
                        return false;
                    }
                };
				
				                const readingSize = yesStorage() ? sessionStorage.getItem('rubyResizerStep') || '' : '1';
                if (readingSize) {
                    const body = document.querySelector('body');
                    switch (readingSize) {
                        case '2':
                            body.classList.add('medium-entry-size');
                            break;
                        case '3':
                            body.classList.add('big-entry-size');
                            break;
                    }
                }
            })();
		</script>
						<script type="rocketlazyloadscript" data-rocket-type='text/javascript'></script>
			<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/*"},{"not":{"href_matches":["\/wp-*.php","\/wp-admin\/*","\/wp-content\/uploads\/*","\/wp-content\/*","\/wp-content\/plugins\/*","\/wp-content\/themes\/foxiz-child\/*","\/wp-content\/themes\/foxiz\/*","\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
    <script type="rocketlazyloadscript" data-rocket-type="module">
        import Chatbot from "https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js";

let sessionId = sessionStorage.getItem('visitorSessionBlog');
        if (!sessionId) {
            sessionId = `visitor_${Math.random().toString(36).substring(2, 15)}_blog`;
            sessionStorage.setItem('visitorSessionBlog', sessionId);
        }

let autoOpenChat = sessionStorage.getItem('chatOpened') ? false : true;

Chatbot.init({
                chatflowid: "5807b8d6-177c-4968-bc97-05a9aa93f315",
                apiHost: "https://flowise-prod.alphorm.com",
                chatflowConfig: {
                    sessionId: sessionId
                },
                observersConfig: {},
                theme: {
                    button: {
                        backgroundColor: '#3B81F6',
                        right: 20,
                        bottom: 20,
                        size: 45,
                        dragAndDrop: true,
                        iconColor: 'white',
                        customIconSrc: 'https://static.alphorm.com/prod/assets/images/site/logo-header-small.svg'
                    },
                    tooltip: {
                        showTooltip: true,
                        tooltipMessage: 'Bienvenue sur Alphorm! 👋 Je suis là pour vous aider 😊!',
                        tooltipBackgroundColor: '#3B81F6',
                        tooltipTextColor: 'white',
                        tooltipFontSize: 15
                    },
                    chatWindow: {
                        showTitle: true,
                        showAgentMessages: true,
                        title: 'Farabi',
                        titleAvatarSrc: 'https://static.alphorm.com/ia/assets/farabi.png',
                        welcomeMessage: "Merci d'avoir ouvert le chat ! 🎉\n J'étais en attente de votre message. Comment puis-je vous aider ? 😊",
                        errorMessage: 'Une erreur est survenue. Veuillez réessayer.',
                        backgroundColor: '#F0F0F0',
                        height: chatWindowHeight,
                        width: chatWindowWidth,
                        fontSize: 16,
                        starterPrompts: ['Qui est Farabi ? 🤖', 'Comment peux-tu m’aider ?'],
                        starterPromptFontSize: 15,
                        botMessage: {
                            backgroundColor: '#f7f8ff',
                            textColor: '#303235',
                            showAvatar: true,
                            avatarSrc: 'https://static.alphorm.com/ia/assets/farabi.png'
                        },
                        userMessage: {
                            backgroundColor: '#3B81F6',
                            textColor: '#ffffff',
                            showAvatar: true,
                            avatarSrc: 'https://static.alphorm.com/prod/assets/images/profil/avatar-default-anonymous.png'
                        },
                        textInput: {
                            placeholder: 'Tapez votre question ici...',
                            backgroundColor: '#ffffff',
                            textColor: '#303235',
                            sendButtonColor: '#3B81F6',
                            maxChars: 500,
                            maxCharsWarningMessage: 'Vous avez dépassé la limite de 500 caractères.',
                            autoFocus: true,
                            sendMessageSound: false,
                            receiveMessageSound: false
                        },
                        footer: {
                            textColor: 'rgb(177 183 192)',
                            text: "J'apprends tous les jours, pardonnez-moi si mes réponses ne sont pas parfaites.",
                            company: 'Alphorm',
                            companyLink: 'https://www.alphorm.com/support-contact'
                        },
                        autoWindowOpen: {
                            autoOpen: autoOpenChat,
                            openDelay: 2,
                            autoOpenOnMobile: false
                        }
                    },
                    customCSS: `
                        img[alt="Bubble button icon"] {
                            filter: brightness(0) invert(1);
                        }
                        img[alt="Bot avatar"] {
                            width: 30px;
                            height: 30px;
                            border-radius: 50%;
                        }
                    `
                }
            });
        }

if (autoOpenChat) {
            sessionStorage.setItem('chatOpened', 'false');
        }
		
  		document.addEventListener("DOMContentLoaded", () => {
            adjustChatWidth();
        });

let lastScreenWidth = window.innerWidth;

window.addEventListener("resize", () => {
            let newScreenWidth = window.innerWidth;

if (Math.abs(newScreenWidth - lastScreenWidth) > 20) {
                lastScreenWidth = newScreenWidth;
                setTimeout(adjustChatWidth, 100);
            }
        });

</script>
    			<script type="rocketlazyloadscript">
				const lazyloadRunObserver = () => {
					const lazyloadBackgrounds = document.querySelectorAll( `.e-con.e-parent:not(.e-lazyloaded)` );
					const lazyloadBackgroundObserver = new IntersectionObserver( ( entries ) => {
						entries.forEach( ( entry ) => {
							if ( entry.isIntersecting ) {
								let lazyloadBackground = entry.target;
								if( lazyloadBackground ) {
									lazyloadBackground.classList.add( 'e-lazyloaded' );
								}
								lazyloadBackgroundObserver.unobserve( entry.target );
							}
						});
					}, { rootMargin: '200px 0px 200px 0px' } );
					lazyloadBackgrounds.forEach( ( lazyloadBackground ) => {
						lazyloadBackgroundObserver.observe( lazyloadBackground );
					} );
				};
				const events = [
					'DOMContentLoaded',
					'elementor/lazyload/observe',
				];
				events.forEach( ( event ) => {
					document.addEventListener( event, lazyloadRunObserver );
				} );
			</script>
			<script type="rocketlazyloadscript" data-rocket-type="text/javascript">var algolia = {"debug":false,"application_id":"EIVP353TQ8","search_api_key":"47bbd04521ddac4327e2811b5c2f393d","powered_by_enabled":true,"search_hits_per_page":"10","query":"","indices":{"searchable_posts":{"name":"wp_searchable_posts","id":"searchable_posts","enabled":true,"replicas":[]},"terms_category":{"name":"wp_terms_category","id":"terms_category","enabled":true,"replicas":[]},"terms_post_tag":{"name":"wp_terms_post_tag","id":"terms_post_tag","enabled":true,"replicas":[]}},"autocomplete":{"sources":[{"index_id":"searchable_posts","index_name":"wp_searchable_posts","label":"Mes articles","admin_name":"All posts","position":10,"max_suggestions":5,"tmpl_suggestion":"autocomplete-post-suggestion","enabled":true},{"index_id":"terms_category","index_name":"wp_terms_category","label":"Categories","admin_name":"Categories","position":20,"max_suggestions":3,"tmpl_suggestion":"autocomplete-term-suggestion","enabled":true},{"index_id":"terms_post_tag","index_name":"wp_terms_post_tag","label":"Tags","admin_name":"Tags","position":20,"max_suggestions":3,"tmpl_suggestion":"autocomplete-term-suggestion","enabled":true}],"input_selector":"input[name='s']:not(.no-autocomplete):not(#adminbar-search)"}};</script>
<script type="text/html" id="tmpl-autocomplete-header">
	<div class="autocomplete-header">
		<div class="autocomplete-header-title">{{{ data.label }}}</div>
		<div class="clear"></div>
	</div>
</script>

/* Initialize Algolia client */
		var client = algoliasearch( algolia.application_id, algolia.search_api_key );

/**
		 * Algolia hits source method.
		 *
		 * This method defines a custom source to use with autocomplete.js.
		 *
		 * @param object $index Algolia index object.
		 * @param object $params Options object to use in search.
		 */
		var algoliaHitsSource = function( index, params ) {
			return function( query, callback ) {
				index
					.search( query, params )
					.then( function( response ) {
						callback( response.hits, response );
					})
					.catch( function( error ) {
						callback( [] );
					});
			}
		}

/* Setup autocomplete.js sources */
		var sources = [];
		algolia.autocomplete.sources.forEach( function( config, i ) {
			var suggestion_template = wp.template( config[ 'tmpl_suggestion' ] );
			sources.push( {
				source: algoliaHitsSource( client.initIndex( config[ 'index_name' ] ), {
					hitsPerPage: config[ 'max_suggestions' ],
					attributesToSnippet: [
						'content:10'
					],
					highlightPreTag: '__ais-highlight__',
					highlightPostTag: '__/ais-highlight__'
				} ),
				debounce: config['debounce'],
				templates: {
					header: function () {
						return wp.template( 'autocomplete-header' )( {
							label: _.escape( config[ 'label' ] )
						} );
					},
					suggestion: function ( hit ) {
						if ( hit.escaped === true ) {
							return suggestion_template( hit );
						}
						hit.escaped = true;

for ( var key in hit._highlightResult ) {
							/* We do not deal with arrays. */
							if ( typeof hit._highlightResult[ key ].value !== 'string' ) {
								continue;
							}
							hit._highlightResult[ key ].value = _.escape( hit._highlightResult[ key ].value );
							hit._highlightResult[ key ].value = hit._highlightResult[ key ].value.replace( /__ais-highlight__/g, '<em>' ).replace( /__\/ais-highlight__/g, '</em>' );
						}

for ( var key in hit._snippetResult ) {
							/* We do not deal with arrays. */
							if ( typeof hit._snippetResult[ key ].value !== 'string' ) {
								continue;
							}

hit._snippetResult[ key ].value = _.escape( hit._snippetResult[ key ].value );
							hit._snippetResult[ key ].value = hit._snippetResult[ key ].value.replace( /__ais-highlight__/g, '<em>' ).replace( /__\/ais-highlight__/g, '</em>' );
						}

return suggestion_template( hit );
					}
				}
			} );

} );

/* Setup dropdown menus */
		document.querySelectorAll( algolia.autocomplete.input_selector ).forEach( function( element ) {

var config = {
				debug: algolia.debug,
				hint: false,
				openOnFocus: true,
				appendTo: 'body',
				templates: {
					empty: wp.template( 'autocomplete-empty' )
				}
			};

if ( algolia.powered_by_enabled ) {
				config.templates.footer = wp.template( 'autocomplete-footer' );
			}

/* Instantiate autocomplete.js */
			var autocomplete = algoliaAutocomplete( element, config, sources )
				.on( 'autocomplete:selected', function ( e, suggestion ) {
					/* Redirect the user when we detect a suggestion selection. */
					window.location.href = suggestion.permalink ?? suggestion.posts_url; // Users use the `posts_url` property instead of `permalink`.
				} );

/* Force the dropdown to be re-drawn on scroll to handle fixed containers. */
			window.addEventListener( 'scroll', function() {
				if ( autocomplete.autocomplete.getWrapper().style.display === "block" ) {
					autocomplete.autocomplete.close();
					autocomplete.autocomplete.open();
				}
			} );
		} );

/* Scroll Depth */
		"use strict";
		var defaults = {
		percentage: true
		};

var $window = $(window),
		cache = [],
		scrollEventBound = false,
		lastPixelDepth = 0;

/*
		* Plugin
		*/

$.scrollDepth = function(options) {

var startTime = +new Date();

options = $.extend({}, defaults, options);

/*
		* Functions
		*/

function sendEvent(action, label, scrollDistance, timing) {
		if ( 'undefined' === typeof MonsterInsightsObject || 'undefined' === typeof MonsterInsightsObject.sendEvent ) {
		return;
		}
			var paramName = action.toLowerCase();
	var fieldsArray = {
	send_to: 'G-VC8SKQBEJS',
	non_interaction: true
	};
	fieldsArray[paramName] = label;

if (arguments.length > 3) {
	fieldsArray.scroll_timing = timing
	MonsterInsightsObject.sendEvent('event', 'scroll_depth', fieldsArray);
	} else {
	MonsterInsightsObject.sendEvent('event', 'scroll_depth', fieldsArray);
	}
			}

function calculateMarks(docHeight) {
		return {
		'25%' : parseInt(docHeight * 0.25, 10),
		'50%' : parseInt(docHeight * 0.50, 10),
		'75%' : parseInt(docHeight * 0.75, 10),
		/* Cushion to trigger 100% event in iOS */
		'100%': docHeight - 5
		};
		}

function rounded(scrollDistance) {
		/* Returns String */
		return (Math.floor(scrollDistance/250) * 250).toString();
		}

function init() {
		bindScrollDepth();
		}

/*
		* Public Methods
		*/

/* Reset Scroll Depth with the originally initialized options */
		$.scrollDepth.reset = function() {
		cache = [];
		lastPixelDepth = 0;
		$window.off('scroll.scrollDepth');
		bindScrollDepth();
		};

/* Add DOM elements to be tracked */
		$.scrollDepth.addElements = function(elems) {

if (typeof elems == "undefined" || !$.isArray(elems)) {
		return;
		}

$.merge(options.elements, elems);

/* If scroll event has been unbound from window, rebind */
		if (!scrollEventBound) {
		bindScrollDepth();
		}

};

/* Remove DOM elements currently tracked */
		$.scrollDepth.removeElements = function(elems) {

if (typeof elems == "undefined" || !$.isArray(elems)) {
		return;
		}

$.each(elems, function(index, elem) {

var inElementsArray = $.inArray(elem, options.elements);
		var inCacheArray = $.inArray(elem, cache);

if (inElementsArray != -1) {
		options.elements.splice(inElementsArray, 1);
		}

if (inCacheArray != -1) {
		cache.splice(inCacheArray, 1);
		}

});

};

/*
		* Throttle function borrowed from:
		* Underscore.js 1.5.2
		* http://underscorejs.org
		* (c) 2009-2013 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
		* Underscore may be freely distributed under the MIT license.
		*/

/*
		* Scroll Event
		*/

function bindScrollDepth() {

scrollEventBound = true;

$window.on('scroll.scrollDepth', throttle(function() {
		/*
		* We calculate document and window height on each scroll event to
		* account for dynamic DOM changes.
		*/

var docHeight = $(document).height(),
		winHeight = window.innerHeight ? window.innerHeight : $window.height(),
		scrollDistance = $window.scrollTop() + winHeight,

/* Recalculate percentage marks */
		marks = calculateMarks(docHeight),

/* Timing */
		timing = +new Date - startTime;

checkMarks(marks, scrollDistance, timing);
		}, 500));

}

init();
		};

/* UMD export */
		return $.scrollDepth;

}));

jQuery.scrollDepth();
		} else {
		setTimeout(monsterinsights_scroll_tracking_load, 200);
		}
		}
		monsterinsights_scroll_tracking_load();
		});
		}
		/* End MonsterInsights Scroll Tracking */
		
});</script><link rel='stylesheet' id='widget-share-buttons-css' href='https://blog.alphorm.com/wp-content/plugins/elementor-pro/assets/css/widget-share-buttons.min.css?ver=3.30.0' media='all' />
<link rel='stylesheet' id='e-apple-webkit-css' href='https://blog.alphorm.com/wp-content/plugins/elementor/assets/css/conditionals/apple-webkit.min.css?ver=3.30.2' media='all' />
<link rel='stylesheet' id='e-sticky-css' href='https://blog.alphorm.com/wp-content/plugins/elementor-pro/assets/css/modules/sticky.min.css?ver=3.30.0' media='all' />
<link data-minify="1" rel='stylesheet' id='jet-elements-css' href='https://blog.alphorm.com/wp-content/cache/min/1/wp-content/plugins/jet-elements/assets/css/jet-elements.css?ver=1751793719' media='all' />
<script id="foxiz-core-js-extra">
var foxizCoreParams = {"ajaxurl":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","darkModeID":"RubyDarkMode","cookieDomain":"","cookiePath":"\/"};
</script>
<script type="rocketlazyloadscript" data-minify="1" data-rocket-src="https://blog.alphorm.com/wp-content/cache/min/1/wp-content/plugins/foxiz-core/assets/core.js?ver=1751793720" id="foxiz-core-js" data-rocket-defer defer></script>
<script type="rocketlazyloadscript" id="rocket-browser-checker-js-after">
"use strict";var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){return protoProps&&defineProperties(Constructor.prototype,protoProps),staticProps&&defineProperties(Constructor,staticProps),Constructor}}();function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}var RocketBrowserCompatibilityChecker=function(){function RocketBrowserCompatibilityChecker(options){_classCallCheck(this,RocketBrowserCompatibilityChecker),this.passiveSupported=!1,this._checkPassiveOption(this),this.options=!!this.passiveSupported&&options}return _createClass(RocketBrowserCompatibilityChecker,[{key:"_checkPassiveOption",value:function(self){try{var options={get passive(){return!(self.passiveSupported=!0)}};window.addEventListener("test",null,options),window.removeEventListener("test",null,options)}catch(err){self.passiveSupported=!1}}},{key:"initRequestIdleCallback",value:function(){!1 in window&&(window.requestIdleCallback=function(cb){var start=Date.now();return setTimeout(function(){cb({didTimeout:!1,timeRemaining:function(){return Math.max(0,50-(Date.now()-start))}})},1)}),!1 in window&&(window.cancelIdleCallback=function(id){return clearTimeout(id)})}},{key:"isDataSaverModeOn",value:function(){return"connection"in navigator&&!0===navigator.connection.saveData}},{key:"supportsLinkPrefetch",value:function(){var elem=document.createElement("link");return elem.relList&&elem.relList.supports&&elem.relList.supports("prefetch")&&window.IntersectionObserver&&"isIntersecting"in IntersectionObserverEntry.prototype}},{key:"isSlowConnection",value:function(){return"connection"in navigator&&"effectiveType"in navigator.connection&&("2g"===navigator.connection.effectiveType||"slow-2g"===navigator.connection.effectiveType)}}]),RocketBrowserCompatibilityChecker}();
</script>
<script id="rocket-preload-links-js-extra">
var RocketPreloadLinksConfig = {"excludeUris":"\/(?:.+\/)?feed(?:\/(?:.+\/?)?)?$|\/(?:.+\/)?embed\/|\/(index.php\/)?(.*)wp-json(\/.*|$)|\/refer\/|\/go\/|\/recommend\/|\/recommends\/","usesTrailingSlash":"","imageExt":"jpg|jpeg|gif|png|tiff|bmp|webp|avif|pdf|doc|docx|xls|xlsx|php","fileExt":"jpg|jpeg|gif|png|tiff|bmp|webp|avif|pdf|doc|docx|xls|xlsx|php|html|htm","siteUrl":"https:\/\/blog.alphorm.com","onHoverDelay":"100","rateThrottle":"3"};
</script>
<script type="rocketlazyloadscript" id="rocket-preload-links-js-after">
(function() {
"use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e=function(){function i(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(e,t,n){return t&&i(e.prototype,t),n&&i(e,n),e}}();function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var t=function(){function n(e,t){i(this,n),this.browser=e,this.config=t,this.options=this.browser.options,this.prefetched=new Set,this.eventTime=null,this.threshold=1111,this.numOnHover=0}return e(n,[{key:"init",value:function(){!this.browser.supportsLinkPrefetch()||this.browser.isDataSaverModeOn()||this.browser.isSlowConnection()||(this.regex={excludeUris:RegExp(this.config.excludeUris,"i"),images:RegExp(".("+this.config.imageExt+")$","i"),fileExt:RegExp(".("+this.config.fileExt+")$","i")},this._initListeners(this))}},{key:"_initListeners",value:function(e){-1<this.config.onHoverDelay&&document.addEventListener("mouseover",e.listener.bind(e),e.listenerOptions),document.addEventListener("mousedown",e.listener.bind(e),e.listenerOptions),document.addEventListener("touchstart",e.listener.bind(e),e.listenerOptions)}},{key:"listener",value:function(e){var t=e.target.closest("a"),n=this._prepareUrl(t);if(null!==n)switch(e.type){case"mousedown":case"touchstart":this._addPrefetchLink(n);break;case"mouseover":this._earlyPrefetch(t,n,"mouseout")}}},{key:"_earlyPrefetch",value:function(t,e,n){var i=this,r=setTimeout(function(){if(r=null,0===i.numOnHover)setTimeout(function(){return i.numOnHover=0},1e3);else if(i.numOnHover>i.config.rateThrottle)return;i.numOnHover++,i._addPrefetchLink(e)},this.config.onHoverDelay);t.addEventListener(n,function e(){t.removeEventListener(n,e,{passive:!0}),null!==r&&(clearTimeout(r),r=null)},{passive:!0})}},{key:"_addPrefetchLink",value:function(i){return this.prefetched.add(i.href),new Promise(function(e,t){var n=document.createElement("link");n.rel="prefetch",n.href=i.href,n.onload=e,n.onerror=t,document.head.appendChild(n)}).catch(function(){})}},{key:"_prepareUrl",value:function(e){if(null===e||"object"!==(void 0===e?"undefined":r(e))||!1 in e||-1===["http:","https:"].indexOf(e.protocol))return null;var t=e.href.substring(0,this.config.siteUrl.length),n=this._getPathname(e.href,t),i={original:e.href,protocol:e.protocol,origin:t,pathname:n,href:t+n};return this._isLinkOk(i)?i:null}},{key:"_getPathname",value:function(e,t){var n=t?e.substring(this.config.siteUrl.length):e;return n.startsWith("/")||(n="/"+n),this._shouldAddTrailingSlash(n)?n+"/":n}},{key:"_shouldAddTrailingSlash",value:function(e){return this.config.usesTrailingSlash&&!e.endsWith("/")&&!this.regex.fileExt.test(e)}},{key:"_isLinkOk",value:function(e){return null!==e&&"object"===(void 0===e?"undefined":r(e))&&(!this.prefetched.has(e.href)&&e.origin===this.config.siteUrl&&-1===e.href.indexOf("?")&&-1===e.href.indexOf("#")&&!this.regex.excludeUris.test(e.href)&&!this.regex.images.test(e.href))}}],[{key:"run",value:function(){"undefined"!=typeof RocketPreloadLinksConfig&&new n(new RocketBrowserCompatibilityChecker({capture:!0,passive:!0}),RocketPreloadLinksConfig).init()}}]),n}();t.run();
}());
</script>
<script id="rocket_lazyload_css-js-extra">
var rocket_lazyload_css_data = {"threshold":"300"};
</script>
<script id="rocket_lazyload_css-js-after">
!function o(n,c,a){function u(t,e){if(!c[t]){if(!n[t]){var r="function"==typeof require&&require;if(!e&&r)return r(t,!0);if(s)return s(t,!0);throw(e=new Error("Cannot find module '"+t+"'")).code="MODULE_NOT_FOUND",e}r=c[t]={exports:{}},n[t][0].call(r.exports,function(e){return u(n[t][1][e]||e)},r,r.exports,o,n,c,a)}return c[t].exports}for(var s="function"==typeof require&&require,e=0;e<a.length;e++)u(a[e]);return u}({1:[function(e,t,r){"use strict";{const c="undefined"==typeof rocket_pairs?[]:rocket_pairs,a=(("undefined"==typeof rocket_excluded_pairs?[]:rocket_excluded_pairs).map(t=>{var e=t.selector;document.querySelectorAll(e).forEach(e=>{e.setAttribute("data-rocket-lazy-bg-"+t.hash,"excluded")})}),document.querySelector("#wpr-lazyload-bg-container"));var o=rocket_lazyload_css_data.threshold||300;const u=new IntersectionObserver(e=>{e.forEach(t=>{t.isIntersecting&&c.filter(e=>t.target.matches(e.selector)).map(t=>{var e;t&&((e=document.createElement("style")).textContent=t.style,a.insertAdjacentElement("afterend",e),t.elements.forEach(e=>{u.unobserve(e),e.setAttribute("data-rocket-lazy-bg-"+t.hash,"loaded")}))})})},{rootMargin:o+"px"});function n(){0<(0<arguments.length&&void 0!==arguments[0]?arguments[0]:[]).length&&c.forEach(t=>{try{document.querySelectorAll(t.selector).forEach(e=>{"loaded"!==e.getAttribute("data-rocket-lazy-bg-"+t.hash)&&"excluded"!==e.getAttribute("data-rocket-lazy-bg-"+t.hash)&&(u.observe(e),(t.elements||=[]).push(e))})}catch(e){console.error(e)}})}n(),function(){const r=window.MutationObserver;return function(e,t){if(e&&1===e.nodeType)return(t=new r(t)).observe(e,{attributes:!0,childList:!0,subtree:!0}),t}}()(document.querySelector("body"),n)}},{}]},{},[1]);
</script>
<script type="rocketlazyloadscript" data-rocket-src="https://blog.alphorm.com/wp-content/plugins/elementor/assets/js/webpack.runtime.min.js?ver=3.30.2" id="elementor-webpack-runtime-js" data-rocket-defer defer></script>
<script type="rocketlazyloadscript" data-rocket-src="https://blog.alphorm.com/wp-content/plugins/elementor/assets/js/frontend-modules.min.js?ver=3.30.2" id="elementor-frontend-modules-js" data-rocket-defer defer></script>
<script type="rocketlazyloadscript" data-rocket-src="https://blog.alphorm.com/wp-includes/js/jquery/ui/core.min.js?ver=1.13.3" id="jquery-ui-core-js" data-rocket-defer defer></script>
<script type="rocketlazyloadscript" id="elementor-frontend-js-before">
var elementorFrontendConfig = {"environmentMode":{"edit":false,"wpPreview":false,"isScriptDebug":false},"i18n":{"shareOnFacebook":"Partager sur Facebook","shareOnTwitter":"Partager sur Twitter","pinIt":"L\u2019\u00e9pingler","download":"T\u00e9l\u00e9charger","downloadImage":"T\u00e9l\u00e9charger une image","fullscreen":"Plein \u00e9cran","zoom":"Zoom","share":"Partager","playVideo":"Lire la vid\u00e9o","previous":"Pr\u00e9c\u00e9dent","next":"Suivant","close":"Fermer","a11yCarouselPrevSlideMessage":"Diapositive pr\u00e9c\u00e9dente","a11yCarouselNextSlideMessage":"Diapositive suivante","a11yCarouselFirstSlideMessage":"Ceci est la premi\u00e8re diapositive","a11yCarouselLastSlideMessage":"Ceci est la derni\u00e8re diapositive","a11yCarouselPaginationBulletMessage":"Aller \u00e0 la diapositive"},"is_rtl":false,"breakpoints":{"xs":0,"sm":480,"md":768,"lg":1025,"xl":1440,"xxl":1600},"responsive":{"breakpoints":{"mobile":{"label":"Portrait mobile","value":767,"default_value":767,"direction":"max","is_enabled":true},"mobile_extra":{"label":"Mobile Paysage","value":880,"default_value":880,"direction":"max","is_enabled":false},"tablet":{"label":"Tablette en mode portrait","value":1024,"default_value":1024,"direction":"max","is_enabled":true},"tablet_extra":{"label":"Tablette en mode paysage","value":1200,"default_value":1200,"direction":"max","is_enabled":false},"laptop":{"label":"Portable","value":1366,"default_value":1366,"direction":"max","is_enabled":false},"widescreen":{"label":"\u00c9cran large","value":2400,"default_value":2400,"direction":"min","is_enabled":false}},
"hasCustomBreakpoints":false},"version":"3.30.2","is_static":false,"experimentalFeatures":{"e_font_icon_svg":true,"additional_custom_breakpoints":true,"container":true,"e_optimized_markup":true,"theme_builder_v2":true,"landing-pages":true,"nested-elements":true,"e_element_cache":true,"home_screen":true,"global_classes_should_enforce_capabilities":true,"cloud-library":true,"e_opt_in_v4_page":true,"mega-menu":true},"urls":{"assets":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/elementor\/assets\/","ajaxurl":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","uploadUrl":"https:\/\/blog.alphorm.com\/wp-content\/uploads"},"nonces":{"floatingButtonsClickTracking":"9499efc41e"},"swiperClass":"swiper","settings":{"page":[],"editorPreferences":[]},"kit":{"body_background_background":"classic","active_breakpoints":["viewport_mobile","viewport_tablet"],"global_image_lightbox":"yes","lightbox_enable_counter":"yes","lightbox_enable_fullscreen":"yes","lightbox_enable_zoom":"yes","lightbox_enable_share":"yes","lightbox_title_src":"title","lightbox_description_src":"description"},"post":{"id":48167,"title":"Cr%C3%A9er%20un%20formulaire%20HTML%20efficace","excerpt":"Apprenez \u00e0 cr\u00e9er un formulaire HTML pour collecter efficacement les donn\u00e9es utilisateur gr\u00e2ce \u00e0 divers champs et \u00e9l\u00e9ments.","featuredImage":"https:\/\/static.alphorm.com\/blog-alphorm-uploads\/2025\/01\/09111138\/formulaire-html-champs-soumission-45.png"}};
</script>
<script type="rocketlazyloadscript" data-rocket-src="https://blog.alphorm.com/wp-content/plugins/elementor/assets/js/frontend.min.js?ver=3.30.2" id="elementor-frontend-js" data-rocket-defer defer></script>
<script type="rocketlazyloadscript" data-rocket-src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/components/prism-core.min.js?ver=1.23.0" id="prismjs_core-js" data-rocket-defer defer></script>
<script type="rocketlazyloadscript" data-rocket-src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/autoloader/prism-autoloader.min.js?ver=1.23.0" id="prismjs_loader-js" data-rocket-defer defer></script>
<script type="rocketlazyloadscript" data-rocket-src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/normalize-whitespace/prism-normalize-whitespace.min.js?ver=1.23.0" id="prismjs_normalize-js" data-rocket-defer defer></script>
<script type="rocketlazyloadscript" data-rocket-src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/line-numbers/prism-line-numbers.min.js?ver=1.23.0" id="prismjs_line_numbers-js" data-rocket-defer defer></script>
<script type="rocketlazyloadscript" data-rocket-src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/toolbar/prism-toolbar.min.js?ver=1.23.0" id="prismjs_toolbar-js" data-rocket-defer defer></script>
<script type="rocketlazyloadscript" data-rocket-src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js?ver=1.23.0" id="prismjs_copy_to_clipboard-js" data-rocket-defer defer></script>
<script type="rocketlazyloadscript" data-rocket-src="https://blog.alphorm.com/wp-includes/js/underscore.min.js?ver=1.13.7" id="underscore-js" data-rocket-defer defer></script>
<script id="wp-util-js-extra">
var _wpUtilSettings = {"ajax":{"url":"\/wp-admin\/admin-ajax.php"}};
</script>
<script type="rocketlazyloadscript" data-rocket-src="https://blog.alphorm.com/wp-includes/js/wp-util.min.js?ver=6.8.1" id="wp-util-js" data-rocket-defer defer></script>
<script type="rocketlazyloadscript" data-minify="1" data-rocket-src="https://blog.alphorm.com/wp-content/cache/min/1/wp-content/plugins/wp-search-with-algolia/js/algoliasearch/dist/algoliasearch-lite.umd.js?ver=1751793720" id="algolia-search-js" data-rocket-defer defer></script>
<script type="rocketlazyloadscript" data-rocket-src="https://blog.alphorm.com/wp-content/plugins/wp-search-with-algolia/js/autocomplete.js/dist/autocomplete.min.js?ver=2.10.1" id="algolia-autocomplete-js" data-rocket-defer defer></script>
<script type="rocketlazyloadscript" data-minify="1" data-rocket-src="https://blog.alphorm.com/wp-content/cache/min/1/wp-content/plugins/wp-search-with-algolia/js/autocomplete-noconflict.js?ver=1751793720" id="algolia-autocomplete-noconflict-js" data-rocket-defer defer></script>
<script type="rocketlazyloadscript" data-rocket-src="https://blog.alphorm.com/wp-includes/js/comment-reply.min.js?ver=6.8.1" id="comment-reply-js" async data-wp-strategy="async"></script>
<script type="rocketlazyloadscript" data-rocket-src="https://blog.alphorm.com/wp-content/themes/foxiz/assets/js/jquery.waypoints.min.js?ver=3.1.1" id="jquery-waypoints-js" data-rocket-defer defer></script>
<script type="rocketlazyloadscript" data-rocket-src="https://blog.alphorm.com/wp-content/themes/foxiz/assets/js/rbswiper.min.js?ver=6.5.8" id="rbswiper-js" data-rocket-defer defer></script>
<script type="rocketlazyloadscript" data-rocket-src="https://blog.alphorm.com/wp-content/themes/foxiz/assets/js/jquery.mp.min.js?ver=1.1.0" id="jquery-magnific-popup-js" data-rocket-defer defer></script>
<script type="rocketlazyloadscript" data-rocket-src="https://blog.alphorm.com/wp-content/themes/foxiz/assets/js/jquery.tipsy.min.js?ver=1.0" id="rb-tipsy-js" data-rocket-defer defer></script>
<script type="rocketlazyloadscript" data-rocket-src="https://blog.alphorm.com/wp-content/themes/foxiz/assets/js/jquery.ui.totop.min.js?ver=v1.2" id="jquery-uitotop-js" data-rocket-defer defer></script>
<script id="foxiz-global-js-extra">
var foxizParams = {"sliderSpeed":"5000","sliderEffect":"slide","sliderFMode":"1","twitterName":"alphorm","highlightShareFacebook":"1","highlightShareTwitter":"1","highlightShareReddit":"1","singleLoadNextLimit":"20","liveInterval":"600"};
</script>
<script type="rocketlazyloadscript" data-minify="1" data-rocket-src="https://blog.alphorm.com/wp-content/cache/min/1/wp-content/themes/foxiz/assets/js/global.js?ver=1751793720" id="foxiz-global-js" data-rocket-defer defer></script>
<script id="monsterinsights-user-journey-js-extra">
var monsterinsights_user_journey = {"is_ssl":"1","page_id":"48167"};
</script>
<script type="rocketlazyloadscript" data-minify="1" data-rocket-src="https://blog.alphorm.com/wp-content/cache/min/1/wp-content/plugins/monsterinsights-user-journey/assets/js/frontend/user-journey.js?ver=1751793720" id="monsterinsights-user-journey-js" async data-wp-strategy="async"></script>
<script type="rocketlazyloadscript" data-minify="1" data-rocket-src="https://blog.alphorm.com/wp-content/cache/min/1/wp-content/plugins/jet-engine/assets/lib/jet-plugins/jet-plugins.js?ver=1751793720" id="jet-plugins-js" data-rocket-defer defer></script>
<script id="jet-engine-frontend-js-extra">
var JetEngineSettings = {"ajaxurl":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","ajaxlisting":"https:\/\/blog.alphorm.com\/creer-formulaire-html-efficace\/?nocache=1752491043","restNonce":"5122e0f79e","hoverActionTimeout":"400","post_id":"48167","query_builder":{"custom_ids":[]}};
</script>
<script type="rocketlazyloadscript" id="jet-engine-frontend-js-before">window.addEventListener('DOMContentLoaded', function() {
			jQuery( window ).on( 'jet-engine/frontend/loaded', function() {
				window.JetPlugins.hooks.addFilter(
					'jet-popup.show-popup.data',
					'JetEngine.popupData',
					function( popupData, popup, triggeredBy ) {

if ( ! triggeredBy ) {
							return popupData;
						}

if ( ! triggeredBy.data( 'popupIsJetEngine' ) ) {
							return popupData;
						}

var wrapper = triggeredBy.closest( '.jet-listing-grid__items' );

if ( wrapper.length && wrapper.data( 'cctSlug' ) ) {
							popupData['cctSlug'] = wrapper.data( 'cctSlug' );
						}

return popupData;
					}
				);
			} );
		
});</script>
<script type="rocketlazyloadscript" data-minify="1" data-rocket-src="https://blog.alphorm.com/wp-content/cache/min/1/wp-content/plugins/jet-engine/assets/js/frontend.js?ver=1751793720" id="jet-engine-frontend-js" data-rocket-defer defer></script>
<script type="rocketlazyloadscript" data-rocket-src="https://blog.alphorm.com/wp-content/plugins/elementor-pro/assets/lib/sticky/jquery.sticky.min.js?ver=3.30.0" id="e-sticky-js" data-rocket-defer defer></script>
<script type="rocketlazyloadscript" data-rocket-src="https://blog.alphorm.com/wp-content/plugins/jet-elements/assets/js/lib/tweenjs/tweenjs.min.js?ver=2.0.2" id="jet-tween-js-js" data-rocket-defer defer></script>
<script type="rocketlazyloadscript" data-rocket-src="https://blog.alphorm.com/wp-content/plugins/elementor-pro/assets/js/webpack-pro.runtime.min.js?ver=3.30.0" id="elementor-pro-webpack-runtime-js" data-rocket-defer defer></script>
<script type="rocketlazyloadscript" data-rocket-src="https://blog.alphorm.com/wp-includes/js/dist/hooks.min.js?ver=4d63a3d491d11ffd8ac6" id="wp-hooks-js"></script>
<script type="rocketlazyloadscript" data-rocket-src="https://blog.alphorm.com/wp-includes/js/dist/i18n.min.js?ver=5e580eb46a90c2b997e6" id="wp-i18n-js"></script>
<script type="rocketlazyloadscript" id="wp-i18n-js-after">
wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } );
</script>
<script type="rocketlazyloadscript" id="elementor-pro-frontend-js-before">
var ElementorProFrontendConfig = {"ajaxurl":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"9d62150504","urls":{"assets":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/elementor-pro\/assets\/","rest":"https:\/\/blog.alphorm.com\/wp-json\/"},"settings":{"lazy_load_background_images":true},"popup":{"hasPopUps":true},"shareButtonsNetworks":{"facebook":{"title":"Facebook","has_counter":true},"twitter":{"title":"Twitter"},"linkedin":{"title":"LinkedIn","has_counter":true},"pinterest":{"title":"Pinterest","has_counter":true},"reddit":{"title":"Reddit","has_counter":true},"vk":{"title":"VK","has_counter":true},"odnoklassniki":{"title":"OK","has_counter":true},"tumblr":{"title":"Tumblr"},"digg":{"title":"Digg"},"skype":{"title":"Skype"},"stumbleupon":{"title":"StumbleUpon","has_counter":true},"mix":{"title":"Mix"},"telegram":{"title":"Telegram"},"pocket":{"title":"Pocket","has_counter":true},"xing":{"title":"XING","has_counter":true},"whatsapp":{"title":"WhatsApp"},"email":{"title":"Email"},"print":{"title":"Print"},"x-twitter":{"title":"X"},"threads":{"title":"Threads"}},
"facebook_sdk":{"lang":"fr_FR","app_id":""},"lottie":{"defaultAnimationUrl":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/elementor-pro\/modules\/lottie\/assets\/animations\/default.json"}};
</script>
<script type="rocketlazyloadscript" data-rocket-src="https://blog.alphorm.com/wp-content/plugins/elementor-pro/assets/js/frontend.min.js?ver=3.30.0" id="elementor-pro-frontend-js" data-rocket-defer defer></script>
<script type="rocketlazyloadscript" data-rocket-src="https://blog.alphorm.com/wp-content/plugins/elementor-pro/assets/js/elements-handlers.min.js?ver=3.30.0" id="pro-elements-handlers-js" data-rocket-defer defer></script>
<script id="jet-elements-js-extra">
var jetElements = {"ajaxUrl":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","isMobile":"false","templateApiUrl":"https:\/\/blog.alphorm.com\/wp-json\/jet-elements-api\/v1\/elementor-template","devMode":"false","messages":{"invalidMail":"Please specify a valid e-mail"}};
</script>
<script type="rocketlazyloadscript" data-rocket-src="https://blog.alphorm.com/wp-content/plugins/jet-elements/assets/js/jet-elements.min.js?ver=2.7.8.1" id="jet-elements-js" data-rocket-defer defer></script>
<script id="jet-tabs-frontend-js-extra">
var JetTabsSettings = {"ajaxurl":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","isMobile":"false","templateApiUrl":"https:\/\/blog.alphorm.com\/wp-json\/jet-tabs-api\/v1\/elementor-template","devMode":"false","isSelfRequest":""};
</script>
<script type="rocketlazyloadscript" data-rocket-src="https://blog.alphorm.com/wp-content/plugins/jet-tabs/assets/js/jet-tabs-frontend.min.js?ver=2.2.9.2" id="jet-tabs-frontend-js" data-rocket-defer defer></script>
		
							<script type="rocketlazyloadscript" data-rocket-src="//www.googletagmanager.com/gtag/js?id=G-VC8SKQBEJS"  data-cfasync="false" data-wpfc-render="false" async></script>
			<script type="rocketlazyloadscript" data-cfasync="false" data-wpfc-render="false">
				var mi_version = '9.6.0';
				var mi_track_user = true;
				var mi_no_track_reason = '';
								var MonsterInsightsDefaultLocations = {"page_location":"https:\/\/blog.alphorm.com\/creer-formulaire-html-efficace\/"};
								if ( typeof MonsterInsightsPrivacyGuardFilter === 'function' ) {
					var MonsterInsightsLocations = (typeof MonsterInsightsExcludeQuery === 'object') ? MonsterInsightsPrivacyGuardFilter( MonsterInsightsExcludeQuery ) : MonsterInsightsPrivacyGuardFilter( MonsterInsightsDefaultLocations );
				} else {
					var MonsterInsightsLocations = (typeof MonsterInsightsExcludeQuery === 'object') ? MonsterInsightsExcludeQuery : MonsterInsightsDefaultLocations;
				}

var disableStrs = [
										'ga-disable-G-VC8SKQBEJS',
									];

/* Function to detect opted out users */
				function __gtagTrackerIsOptedOut() {
					for (var index = 0; index < disableStrs.length; index++) {
						if (document.cookie.indexOf(disableStrs[index] + '=true') > -1) {
							return true;
						}
					}

return false;
				}

/* Disable tracking if the opt-out cookie exists. */
				if (__gtagTrackerIsOptedOut()) {
					for (var index = 0; index < disableStrs.length; index++) {
						window[disableStrs[index]] = true;
					}
				}

/* Opt-out function */
				function __gtagTrackerOptout() {
					for (var index = 0; index < disableStrs.length; index++) {
						document.cookie = disableStrs[index] + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
						window[disableStrs[index]] = true;
					}
				}

if ('undefined' === typeof gaOptout) {
					function gaOptout() {
						__gtagTrackerOptout();
					}
				}
								window.dataLayer = window.dataLayer || [];

window.MonsterInsightsDualTracker = {
					helpers: {},
					trackers: {},
				};
				if (mi_track_user) {
					function __gtagDataLayer() {
						dataLayer.push(arguments);
					}

function __gtagTracker(type, name, parameters) {
						if (!parameters) {
							parameters = {};
						}

if (parameters.send_to) {
							__gtagDataLayer.apply(null, arguments);
							return;
						}

if (type === 'event') {
														parameters.send_to = monsterinsights_frontend.v4_id;
							var hookName = name;
							if (typeof parameters['event_category'] !== 'undefined') {
								hookName = parameters['event_category'] + ':' + name;
							}

if (typeof MonsterInsightsDualTracker.trackers[hookName] !== 'undefined') {
								MonsterInsightsDualTracker.trackers[hookName](parameters);
							} else {
								__gtagDataLayer('event', name, parameters);
							}
							
						} else {
							__gtagDataLayer.apply(null, arguments);
						}
					}

__gtagTracker('js', new Date());
					__gtagTracker('set', {
						'developer_id.dZGIzZG': true,
											});
					if ( MonsterInsightsLocations.page_location ) {
						__gtagTracker('set', MonsterInsightsLocations);
					}
										__gtagTracker('config', 'G-VC8SKQBEJS', {"forceSSL":"true","link_attribution":"true"} );
															window.gtag = __gtagTracker;										(function () {
						/* https://developers.google.com/analytics/devguides/collection/analyticsjs/ */
						/* ga and __gaTracker compatibility shim. */
						var noopfn = function () {
							return null;
						};
						var newtracker = function () {
							return new Tracker();
						};
						var Tracker = function () {
							return null;
						};
						var p = Tracker.prototype;
						p.get = noopfn;
						p.set = noopfn;
						p.send = function () {
							var args = Array.prototype.slice.call(arguments);
							args.unshift('send');
							__gaTracker.apply(null, args);
						};
						var __gaTracker = function () {
							var len = arguments.length;
							if (len === 0) {
								return;
							}
							var f = arguments[len - 1];
							if (typeof f !== 'object' || f === null || typeof f.hitCallback !== 'function') {
								if ('send' === arguments[0]) {
									var hitConverted, hitObject = false, action;
									if ('event' === arguments[1]) {
										if ('undefined' !== typeof arguments[3]) {
											hitObject = {
												'eventAction': arguments[3],
												'eventCategory': arguments[2],
												'eventLabel': arguments[4],
												'value': arguments[5] ? arguments[5] : 1,
											}
										}
									}
									if ('pageview' === arguments[1]) {
										if ('undefined' !== typeof arguments[2]) {
											hitObject = {
												'eventAction': 'page_view',
												'page_path': arguments[2],
											}
										}
									}
									if (typeof arguments[2] === 'object') {
										hitObject = arguments[2];
									}
									if (typeof arguments[5] === 'object') {
										Object.assign(hitObject, arguments[5]);
									}
									if ('undefined' !== typeof arguments[1].hitType) {
										hitObject = arguments[1];
										if ('pageview' === hitObject.hitType) {
											hitObject.eventAction = 'page_view';
										}
									}
									if (hitObject) {
										action = 'timing' === arguments[1].hitType ? 'timing_complete' : hitObject.eventAction;
										hitConverted = mapArgs(hitObject);
										__gtagTracker('event', action, hitConverted);
									}
								}
								return;
							}

try {
								f.hitCallback();
							} catch (ex) {
							}
						};
						__gaTracker.create = newtracker;
						__gaTracker.getByName = newtracker;
						__gaTracker.getAll = function () {
							return [];
						};
						__gaTracker.remove = noopfn;
						__gaTracker.loaded = true;
						window['__gaTracker'] = __gaTracker;
					})();
									} else {
										console.log("");
					(function () {
						function __gtagTracker() {
							return null;
						}

window['__gtagTracker'] = __gtagTracker;
						window['gtag'] = __gtagTracker;
					})();
									}
			</script>
				
			<script type="rocketlazyloadscript" data-cfasync="false" data-wpfc-render="false">
		if (window.hasOwnProperty('MonsterInsightsDualTracker')){
			window.MonsterInsightsDualTracker.trackers['form:impression'] = function (parameters) {
				__gtagDataLayer('event', 'form_impression', {
					form_id: parameters.event_label,
					content_type: 'form',
					non_interaction: true,
					send_to: parameters.send_to,
				});
			};