Redimensionnement d’un formulaire web

Dernière mise à jour le 20 juil. 2023

Modification de la hauteur et la largeur d’un formulaire web

La hauteur et la largeur d’un formulaire web peuvent être modifiées dans le code incorporé du formulaire web pour définir une taille statique, basée sur les pixels, ou une taille relative basée sur les pourcentages d’empreinte écran.

Annotation

Cette procédure s’applique uniquement aux codes intégrés de script et d’iframe. Il est impossible de redimensionner les formulaires web URL.

Par défaut, la hauteur et la largeur d’un formulaire web sont mises à l’échelle selon la taille du navigateur. Cette propriété dynamique permet d’afficher le formulaire web dans la plupart des résolutions d’écran.

Pour ajuster les dimensions du formulaire web, vous devez d’abord obtenir le code HTML ou de script de votre formulaire web.

La modification de la taille du cadre du formulaire web dépend du code que vous utilisez :

Code HTML (iframe)

Le code de HTML fournit des commandes dans la chaîne copiée à partir du formulaire web.

Voici un exemple de chaîne de code iframe :

<iframe src=&quot;https://secure.na1.adobesign.com/public/esignWidget?wid=CBFCIBAA3AAABLblqZhDGvdwEWK6RveVqcwpzncUOYmtOI*&hosted=false&quot; width=&quot;100%&quot; height=&quot;100%&quot; frameborder=&quot;0&quot; style=&quot;border: 0; overflow: hidden; min-height: 500px; min-width: 600px;&quot;></iframe>

Près de la fin de la chaîne de code se trouvent les paramètres width="100%" et height="100%". Le réglage de ces paramètres ajuste la taille de cadre du formulaire web. Vous pouvez utiliser des pourcentages ou une taille de pixel fixe (veillez à supprimer le symbole de pourcentage).

Modifiez la chaîne de code dans un éditeur de texte, puis copiez et collez le code modifié dans votre page web.

Annotation

L’argument  ?wid= indique l’ID de formulaire web unique et sera donc différent pour chaque formulaire web créé.

Code (Java)Script (script)

L’option javascript est légèrement plus complexe, car les paramètres ne sont pas déjà inclus dans la chaîne. Le concept reste toutefois le même.

Vous trouverez ci-dessous un exemple de script du même formulaire web. 

<script type='text/javascript' language='JavaScript' src='https://secure.na1.adobesign.com/public/embeddedWidget?wid=CBFCIBAA3AAABLblqZhDGvdwEWK6RveVqcwpzncUOYmtOI*'>
</script>

Pour ajuster la taille du cadre avec un script, vous devez entourer les éléments <script></script> d’un élément <div> contenant les propriétés du cadre. Cela oblige le code de script <script> à résider dans le conteneur <div>, ce qui le soumet aux limites de ce dernier.

Exemple d’élément <div> d’une largeur de 600 pixels, d’une hauteur de 500 pixels et d’une bordure noire pleine d’une largeur de 1 pixel :

<div style=&quot;height:500px; width:600px; border:1px solid black;&quot;> 
</div>

Le script doit être contenu dans l’élément <div>, ce qui donne un bloc de code complet qui ressemble à :

<html>

    <div style=&quot;height:500px; widget:600px; border: 1px solid black;&quot;>

        <script type='text/javascript' language='JavaScript' src='https://secure.na1.adobesign.com/public/embeddedWidget?wid=CBFCIBAA3AAABLblqZhDGvdwEWK6RveVqcwpzncUOYmtOI*'>

        </script>

    </div>

</html>

Le formulaire web qui en résulte s’affiche avec les dimensions indiquées.

Autres exemples de configuration du script

Plein écran 1

<body style=&quot;margin: 0; padding: 0;&quot;>

        <script type='text/javascript' language='JavaScript' src='https://secure.na1.adobesign.com/public/embeddedWidget?wid=CBFCIBAA3AAABLblqZhDGvdwEWK6RveVqcwpzncUOYmtOI*'>

        </script>

</body>

Plein écran 2

<div style=&quot;height:100%; width:100%; border:0px solid black;&quot;>

        <script type='text/javascript' language='JavaScript' src='https://secure.na1.adobesign.com/public/embeddedWidget?wid=CBFCIBAA3AAABLblqZhDGvdwEWK6RveVqcwpzncUOYmtOI*'>

        </script>

</div>