Probléme adaptation formulaire

Je suis en train de finaliser mon design de formulaire mais j'ai un soucis quand je le raccourci, quand je mets mon formulaire sur une colonnoe plus étroite, les deux premieres lignes ne s'affichent pas comme il faut. Sauriez-vous me débloquer svp ?

Voici mon formulaire quand je le réduis :
https://asphaltec-stjerome.ca/pierres-agregats/

Voici mon formulaire sur un format normal, la c'est bon :
https://asphaltec-stjerome.ca/contact/

Voici le lien de mon formulaire :
https://form.jotform.com/KeysMarketing/asphaltec

Bonjour Kevin,

Merci de contacter l'assistance Jotform. Autant que je peux voir sur votre page web, il y a deux formulaires embarqués, l'un ID 250274115665253, qui correspond au lien https://form.jotform.com/KeysMarketing/asphaltec que vous mentionnez, et l'autre ID 250277875143260:

Mais le formulaire nommé Asphaltec que vous mentionnez ne présente pas de problème. Comme il peut y avoir confusion, pouvez-vous confirmer que l'autre formulaire, nommé Clone of Asphaltec, doit apparaître et être corrigé?

Aussitôt que vous revenez vers nous, nous pourrons mieux comprendre votre problème et trouver une solution.

Ok j'ai intégré le meme formulaire maintenant sur la page contact et la page Pierres / Agregats :
https://asphaltec-stjerome.ca/pierres-agregats/

Lien du formulaire : https://form.jotform.com/KeysMarketing/asphaltec

J'avais créé un clone du formulaire asphaltec, Clone of Asphaltec, pour faire des tests mais je n'y arrive pas, ca fait deux jours que je suis dessus, c'est vraiment compliqué a chaque fois de travailler l'apparence d'un simple formulaire, je perds beaucoup de temps.

Pouvez vous faire en sorte de garder le visuel de la page contact, mais qu'il soit le meme partout, tablette, mobile etc et qu'il s'affiche comme il faut ? Comme vous le voyez les deux premieres lignes ne s'affichent pas comme il faut, j'ai tout essayé avec chatgpt, en travaillant sur le clone je n'y arrive pas.

Vous disiez que le formulaire Asphaltec ne presente pas de probleme, mais il en presente bien un, le meme que le clone, voici l'affichage sur une colonne plus reduite :

Hi Kevin,

Unfortunately, our French support agents are busy helping other Jotform users at the moment. I'll try to help you in English using Google Translate, but you can reply in whichever language you feel comfortable using. Or, if you'd rather have support in French, let us know and we can have them do that. But, keep in mind that you'd have to wait until they're available again.

As for your question, we can fix the  mobile view of the form by injecting a custom CSS code and  adjusting the fields width to auto. We also need to update one code on your form. let me show you how: 

1. First, copy this code, remember to look for the first code that I provided and delete the same existing code on your form:

div#cid_4 {   /*look for this code in your form and delete it */

  width : 751px !important;

}

@media screen and (max-width: 480px) {

  input#input_8, input#input_5 {

    width: 100% !important; /* Forces the input fields to span the full width */

    max-width: 100% !important; /* Prevents overflow */

    box-sizing: border-box !important; /* Ensures padding and border are inside the width */

    padding: 10px !important; /* Adds padding for better appearance */

    display: block !important; /* Forces the inputs to behave as block elements */

  }

  /* Ensure the parent form container is also set to full width */

  .form-all {

    width: 100% !important; /* Forces the form to span the full screen width */

    padding: 0 !important; /* Removes any unnecessary padding around the form */

    margin: 0 !important; /* Removes any margin that could cause spacing issues */

  }

  /* Ensure there are no padding or margins on the form section containers */

  .form-section {

    margin: 0 !important; /* Ensures sections don’t add extra margins */

    padding: 0 !important; /* Removes padding that could affect width */

  }

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Change the width size of the fields to auto by going to the Options tab. changing it form Fixed to Auto. That's it.

Give it a try and let us know if you need any other help.

Bonjour,
Je ne comprends vous dites : n'oubliez pas de chercher le premier code que j'ai fourni et supprimez le même code existant sur votre formulaire.

Quel est ce code ? Pouvez vous me donner le code au complet svp il y aura moins de confusions et d'échanges inutiles. Merci beaucoup pour votre aide.

Je ne suis pas sur de comprendre si il faut juste supprimer la premiere ligne de mon code :
div#cid_4 { /*look for this code in your form and delete it */

 width : 751px !important;

}

puis ajouter tout le reste ?

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400&display=swap');





.form-all {

    background-color : transparent !important;

    color : white !important;

    font-size : 16px !important;

    padding : 0px !important;

    border-radius : 0px;

    box-sizing : border-box;

}





.inlineEditor.form-field-label {

    display : none !important;

}





/* Adjust form padding - 21629421 */

ul.form-section {

    padding : 0px 0px;

}





input, textarea, select {

    padding : 12px 10px !important;

    height : auto !important;

    line-height : 1.5 !important;

    border : 1px solid black !important;

    color : #797A7C !important;

    background : none !important;

}





textarea#input_10 {

    padding : 12px 10px !important;

    height : 150px !important;

    line-height : 1.5 !important;

}





/* Supprimer le contour bleu au survol et au focus */

input:hover, textarea:hover, select:hover,

input:focus, textarea:focus, select:focus {

    outline : none !important;

    border : 1px solid black !important;

    box-shadow : none !important;

    color : #797A7C !important;

}





.form-line {

    width : 100% !important;

    margin : 0 0 5px 0 !important;

    padding : 0 !important;

    box-sizing : border-box;

}





li#id_12.form-line {

    margin-top : 0px !important;

}





select#input_12 {

    background : none !important;

}





input {

    background : none !important;

}





textarea#input_10 {

    background : none !important;

}





/* Importer la police Raleway Regular (400) depuis Google Fonts */

button#input_2 {

    width : 100% !important;

    padding : 12px 20px !important;

    /* Correction du;

    manquant */

    background-color : #C00600 !important;

    border : none;

    cursor : pointer;

    position : static;

    box-sizing : border-box;

    margin : 10px 0 0 0;

    font-size : 16px;

    font-family : 'Raleway', sans-serif;

    font-weight : 600 !important;

    color : white;

    text-align : center;

    letter-spacing : 1px !important;

}





/* Suppression de l'effet au survol */

button#input_2:hover {

    background-color : #C00600 !important;

    color : white !important;

    border : none !important;

}





/* Conteneur du bouton : évite qu'il soit coupé */

.form-buttons-wrapper {

    margin-bottom : 15px !important;

    /* Ajoute de l'espace sous le bouton */

    overflow : visible !important;

    /* Assure que le bouton ne soit pas tronqué */;

}





label {

    display : none !important;

}





input::placeholder, textarea::placeholder, select::placeholder {

    color : #797A7C !important;

}





select {

    color : #797A7C !important;

}





div#cid_4 {

    width : 717px;

}





.form-buttons-wrapper.form-buttons-center.jsTest-button-wrapperField {

    border : none !important;

}





.jf-form-buttons:not(.form-pagebreak-back) {

    margin-left : 7px;

    margin-top : 10px;

    margin-bottom : 10px;

}





.submit-button {

    width : 638px !important;

}





/* Correction de l'effet hover du bouton */

li[data-type="control_button"] .form-submit-button:hover {

    background-color : #C00600 !important;

    color : white !important;

}





.form-dropdown,

.form-textarea,

.form-textbox,

.signature-pad-passive,

.signature-wrapper {

    color : #797A7C !important;

}





textarea::placeholder {

    color : #797A7C !important;

}





select option {

    background-color : black !important;

    color : white !important;

}





.form-line-active,

.form-line-error {

    background : transparent !important;

}





.supernova .form-all {

    border : none;

    box-shadow : none;

}





.form-line-error {

    background : transparent !important;

}





.form-error-message {

    background-color : red !important;

    display : none !important;

}





.form-error-arrow {

    border-bottom-color : red !important;

}





.error-navigation-container {

    display : none !important;

}





.form-required {

    color : transparent !important;

}





.form-buttons-wrapper {

    margin : 0px;

    padding : 0px;

}





/* Code to increase the width of the email and phone number fields on mobile view - 22863051 */

@media only screen and (max-width: 480px){

}





#input_8, #input_5 {

    margin-bottom : 5px !important;

}

Hi Kevin,

If you check your custom CSS codes on the form, you will see that there is an existing code that is giving a different width size. you just need to remove the code to avoid any conflicts on your form. This is the code that needs to be removed.

div#cid_4 { /*look for this code in your form and delete it */

  width : 717px !important;

}

Check the screenshot below:

Once this is done, paste the codes that I provided previously. I already provided the full code to execute what you want on the form. Sharing it again below:

div#cid_4 { /*look for this code in your form and delete it */

  width : 751px !important;

}

@media screen and (max-width: 480px) {

  input#input_8, input#input_5 {

    width: 100% !important; /* Forces the input fields to span the full width */

    max-width: 100% !important; /* Prevents overflow */

    box-sizing: border-box !important; /* Ensures padding and border are inside the width */

    padding: 10px !important; /* Adds padding for better appearance */

    display: block !important; /* Forces the inputs to behave as block elements */

  }

  /* Ensure the parent form container is also set to full width */

  .form-all {

    width: 100% !important; /* Forces the form to span the full screen width */

    padding: 0 !important; /* Removes any unnecessary padding around the form */

    margin: 0 !important; /* Removes any margin that could cause spacing issues */

  }

  /* Ensure there are no padding or margins on the form section containers */

  .form-section {

    margin: 0 !important; /* Ensures sections don’t add extra margins */

    padding: 0 !important; /* Removes padding that could affect width */

  }

}

You also need to change the width of the elements to Auto. Let me show you how:

1. In Form Builder, click on each field then click on the Gear Icon to open Properties.
2. Go to the Options Tab, and look for Width. You just need to toggle it to Auto.
3. Do this for all fields that has a fixed width that is set.

Give it a try and let us know how it goes.

Super ca marche merci beaucoup !! Tout est beau.