Generer du code css pour agrandir ma case telephone

Je n'arrive pas a generer du code css pour agrandir ma case telephone et que toutes mes cases / champs soit de la meme largeur. Ma case numero de telephone nest toujours pas a 750 max de largeur, elle fait la moitié en largeur par rapport aux autres. Pouvez-vous m'aider svp ?

Bonjour Kevin,

Merci de contacter l'assistance Jotform. Pouvez-vous essayer le code suivant:

input#input_4_full {

 min-width: 715px;

}

Lequel donne le résultat suivant:

Faites un essai et dites-nous comment ça se passe.

Bonjour,
https://form.jotform.com/243644582855265
Quand je rajoute le css, rien ne change, je sauvegarde puis dans le tableau de bord du formulaire j’ai un bon affichage, puis quand je le prévisualise, l’affichage est comme avant, toujours pas bon, c’est étrange..
Pensez-vous que quelque chose rentre en conflit avec ?
Au plaisir,
---
[Kévin Sazarin]
Kévin SAZARIN
Gérant Keys Marketing
contact@keys-marketing.ca<contact>
(514) 416-5620<tel:>
keys-marketing.ca<https: />
Réserver une consultation<https:>
De : Jotform <noreply>
Date : lundi, 30 décembre 2024 à 11:40
À : contact@keys-marketing.fr <contact>
Objet : Re: Generer du code css pour agrandir ma case telephone
[Jotform]<https:>
[Autoresponder]
There’s a new response on your question:
Generer du code css pour agrandir ma case telephone
Bonjour Kevin,
Merci de contacter l'assistance Jotform. Pouvez-vous essayer le code suivant2
input#input_4_full {
min-width: 715px;
}
Lequel donne le résultat suivant:[https://www.jotform.com/uploads/forum/FredVo_translator/1735576764_6772ccbcb989e_]
Faites un essai et dites-nous comment ça se passe.
[Autoresponder]
Answered by
Frédéric
View this thread<https:>
[Jotform Team]
4 Embarcadero Center, Suite 780, San Francisco CA 94111
24/7 Support<https:>
Unsubscribe Thread<https:>
</https:></https:></https:></https:></contact></noreply></https:></tel:></contact>...

Rebonjour,

Lorsque j’essaie d’intégrer mon formulaire sur mon site WordPress en iframe, cela ne fonctionne pas non plus.

 

De plus, il est toujours très difficile d’obtenir un rendu esthétique et harmonieux pour mes formulaires. Il est compliqué d’obtenir exactement ce que je veux. J’aimerais vraiment pouvoir reproduire à l’identique le formulaire que l’on trouve à la fin de cette page : https://pixalie.com/

Il y a souvent des éléments qui ne sont pas alignés ou qui n’ont pas la même largeur. Par exemple, dans ce formulaire, les champs sont plus étroits que le bouton. Si vous regardez attentivement, vous verrez que cela crée un déséquilibre. Je n’arrive pas à obtenir un formulaire parfait. Mon souhait serait d’avoir un formulaire bien conçu que je puisse facilement dupliquer, avec la possibilité de modifier uniquement les couleurs et les polices selon mes besoins. Pourriez-vous m’aider, s’il vous plaît ? Je consacre souvent une journée entière à essayer d’obtenir un formulaire esthétique, mais sans succès. Cela me pousse à envisager de changer de solution, je perds trop de temps.

Cher Kevin,

oui, en effet, le comportement semble meilleur de mon coté avec le code suivant, avec lequel le champ Téléphone se met correctement à jour quand je change la taille de la fenêtre:

input#input_4_full {

 max-width: 715px !important;

}

J'espère que cela correspond lieux à vos attentes.

Faites un essai et dites-nous comment ça se passe. 

Rebonjour,
Lorsque j’essaie d’intégrer mon formulaire sur mon site WordPress en iframe, cela ne fonctionne pas non plus.
[cid:image003.png@01DB5AB0.A21C28E0]
De plus, il est toujours très difficile d’obtenir un rendu esthétique et harmonieux pour mes formulaires. Il est compliqué d’obtenir exactement ce que je veux. J’aimerais vraiment pouvoir reproduire à l’identique le formulaire que l’on trouve à la fin de cette page : https://pixalie.com/
[cid:image004.png@01DB5AB0.B41DAFF0]
Il y a souvent des éléments qui ne sont pas alignés ou qui n’ont pas la même largeur. Par exemple, dans ce formulaire, les champs sont plus étroits que le bouton. Si vous regardez attentivement, vous verrez que cela crée un déséquilibre. Je n’arrive pas à obtenir un formulaire parfait. Mon souhait serait d’avoir un formulaire bien conçu que je puisse facilement dupliquer, avec la possibilité de modifier uniquement les couleurs et les polices selon mes besoins. Pourriez-vous m’aider, s’il vous plaît ? Je consacre souvent une journée entière à essayer d’obtenir un formulaire esthétique, mais sans succès. Cela me pousse à envisager de changer de solution, je perds trop de temps.
Au plaisir,
---
[Kévin Sazarin]
Kévin SAZARIN
Gérant Keys Marketing
contact@keys-marketing.ca<contact>
(514) 416-5620<tel:>
keys-marketing.ca<https: />
Réserver une consultation<https:>
De : Keys Marketing 🇫🇷 <contact>
Date : lundi, 30 décembre 2024 à 11:45
À : forum+22577261@jotform.com <forum>
Objet : Re: Generer du code css pour agrandir ma case telephone
Bonjour,
https://form.jotform.com/243644582855265
Quand je rajoute le css, rien ne change, je sauvegarde puis dans le tableau de bord du formulaire j’ai un bon affichage, puis quand je le prévisualise, l’affichage est comme avant, toujours pas bon, c’est étrange..
Pensez-vous que quelque chose rentre en conflit avec ?
Au plaisir,
---
[Kévin Sazarin]
Kévin SAZARIN
Gérant Keys Marketing
contact@keys-marketing.ca<contact>
(514) 416-5620<tel:>
keys-marketing.ca<https: />
Réserver une consultation<https:>
De : Jotform <noreply>
Date : lundi, 30 décembre 2024 à 11:40
À : contact@keys-marketing.fr <contact>
Objet : Re: Generer du code css pour agrandir ma case telephone
[Jotform]<https:>
[Autoresponder]
There’s a new response on your question:
Generer du code css pour agrandir ma case telephone
Bonjour Kevin,
Merci de contacter l'assistance Jotform. Pouvez-vous essayer le code suivant2
input#input_4_full {
min-width: 715px;
}
Lequel donne le résultat suivant:[https://www.jotform.com/uploads/forum/FredVo_translator/1735576764_6772ccbcb989e_]
Faites un essai et dites-nous comment ça se passe.
[Autoresponder]
Answered by
Frédéric
View this thread<https:>
[Jotform Team]
4 Embarcadero Center, Suite 780, San Francisco CA 94111
24/7 Support<https:>
Unsubscribe Thread<https:>
</https:></https:></https:></https:></contact></noreply></https:></tel:></contact></forum></contact></https:></tel:></contact>...

Je viens d'essayer votre code ca ne fonctionne pas..

Hi Kevin,

Our French Support agents are busy helping other Jotform users right now, so 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, it might take a while until they're available again.

Now, coming back to your question, it's easy to adjust the width of a Phone field. Let me show you how:

1. First, copy this code:

/*Adjust the width of Phone Field- 22577261*/

input#input_4_full {

min-width: 715px !important;

}

/*Ends here*/

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.

Here's the result and my demo form for your reference:

Give it a try and let us know if you have any other questions.

Bonjour,

D'accord, aucun probleme pour l'anglais. Merci pour votre retour rapide.
Alors oui ca a allonger mon champ, mais ca l'a trop allongé pourtant jai mis 717 partout dans mon code css. Puis je ne sais pas pourquoi mon bouton depasse a gauche.
Je voudrais vraiment pouvoir reussir a duppliquer le style et la mise en forme de mon formulaire de base que javais fait avec elementor, un formulaire propre tout aligné avec des cases plus grosses et surtout de la meme taille.


J'aimerais arriver a faire ca : moins d'espace, tout bien aligner champ comme bouton etc. Est ce possible d'arriver a ce resultat ?

Hi Kevin,

Can you clarify with us the look you are aiming for so we can provide you with the complete CSS code and avoid giving you multiple codes that might cause overlapping styles? Should the look apply to both mobile and desktop devices? Does this include the background color, font style, font color, and the border of the input fields, or are you simply referring to the alignment of the fields? Meanwhile, if the other image you've shown us is from a published form or website, you can share the link so we can further inspect it and copy the code.

Once we hear back from you, we'll be able to help you with this.

Bonjour,

Oui comme ecrit ci-dessus, je voudrais exactement le meme visuel que ce formulaire. C’est un formulaire que j’avais fait avec elementor sur wordpress, que je veux supprimer et répliquer a l’identique avec Jotform. Vous le trouverez en bas de la page d’accueil : https://pixalie.com/

J’ai réussi a faire ce que je voulais avec les couleurs, la police, et la bordure mais il me manque encore des éléments que je n’arrive pas à regler : 

• le champ Numéro de téléphone est trop grand et n'est pas identique aux autres champs et donc pas alignés avec les autres
• Il faut agrandir le champ en hauteur
• Il faut réduire l'espace entre les champs
• Il faut que le bouton ENVOYER soit de la meme taille et aligné avec les champs.

L'apparence doit rester la meme ou que tout reste bien aligné que l’écran se rétrécisse ou s’agrandisse, ca doit donc s'appliquer à la fois aux appareils mobiles et aux ordinateurs de bureau.

Merci de votre aide.

Hi Kevin,

I started a new version of the CSS as the previous one was already formed spaghetti code which makes it hard to debug.

.form-all {

  background-color: black !important;

}

.inlineEditor.form-field-label {

  display: none !important;

}

.form-line {

  margin-top: -10px !important;

  margin-bottom: 0px !important;

}

li#id_12.form-line {

  margin-top: 10px !important;

}

select#input_12 {

  background: none !important;

}

input {

  background: none !important;

}





textarea#input_10 {

  background: none !important;

}

button#input_2 {

  background: #a874ec;

}





label {

  display: none !important;

}





input::placeholder {

  color: White;

}

select {

  color: White;

}





div#cid_4 {

  width: 717px;

}

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

  border: none !important;

}





.form-buttons-wrapper {

  margin: 0px;

  padding: 0px;

}





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

  margin-left: 7px;

  margin-top: 10px;

  margin-bottom: 10px;

}

.submit-button {

  width: 660px !important;

}

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

  .form-line-column,

  .form-textarea,

  .form-textbox {

    width: auto !important;

  }

  div#cid_12,

  div#cid_4,

  div#cid_10 {

    width: 717px !important;

  }

}

Using the code above style the form as close as possible to the reference form that you want. This also makes the style work in all sizes. See the screencast below for the result:

Keep us updated and let us know if you need any more help. 

Super, merci beaucoup ca semble beaucoup mieux.
C'est a 95% bon. Voici les derniers petits ajustements pour un rendu optimal.

Il faudrait :
- Que le bouton "ENVOYER" soit aligné aux champs, il est encore un peu plus grand que les champs.
- Sous le bouton "ENVOYER", il y a une case qui apparait je ne sais pas ce que c'est. Il faudrait la faire disparaitre.
- Mettre l'arriere-plan en transparent, plus pratique si le noir n'est pas le meme ou pouvoir duppliquer ce formulaire et s'en resservir sur nimporte quel fond.
- Elargir tous les champs si possible ? Sinon je devrais jouer avec mes marges avec mon constructeur elementor mais si il pouvait déja etre en "plein ecran", sans marge, ce serait parfait (tout en ayant toujours tous les champs et boutons de la meme taille et alignés bien sur).

- Quand on clique sur une case pour remplir le champ, la case change de couleur et se mets sur fond blanc, ca ne va pas, il faudrait que rien ne se passe au niveau de l'affiahce que le fond reste transparent.

- Quand j'ecris dans le formulaire, la police est grise, on n'arrive pas a le lire, il faut qu'elle soit blanche.

Si tu souhaites directement travailler sur mon fomulaire pour te rendre compte, je viens de creer une copie du formulaire pixalie, clone of pixalie, tu peux le modifier sans probleme.
https://form.jotform.com/250044900671247

Merci beaucoup pour ton aide.

Hi Kevin,

You can copy the code below to fix the previous issues that you mentioned:

.submit-button {

  width: 638px !important;

}

.form-dropdown:not(.time-dropdown):not(:required),

.form-dropdown:not(:required),

.form-dropdown:required:invalid,

.form-spinner-input,

.form-textbox::placeholder,

li[data-type="control_fileupload"] .jfUpload-heading,

li[data-type="control_fileupload"] .qq-upload-button {

  color: #ffffff !important;

}

.form-dropdown,

.form-textarea,

.form-textbox,

.signature-pad-passive,

.signature-wrapper {

  color: #ffffff !important;

}

textarea::placeholder {

  color: white !important;

}

select option {

  background-color: black !important;

  color: white !important; 

}

.form-line-active,.form-line-error{

  background: transparent !important;

} 

See the screencast below for the result:

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

J'ai enfin réussi a générer le bon code CSS pour mon fomulaire apres plus de 3 jours de travail et d'essais et erreurs.

Voici le bon code :

.form-all {

  background-color : transparent !important;

  color : white !important;

  font-size : 18px !important;

  padding : 020px !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 : 15px 10px !important;

  /* 15px en haut/bas, 10px à gauche/droite */

  height : auto !important;

  /* S'assure que la hauteur s'adapte */

  line-height : 1.5 !important;

  /* Améliore la lisibilité */;

}

textarea#input_10 {

  padding : 15px 10px !important;

  /* Garde un padding uniforme */

  height : 150px !important;

  /* Augmente la hauteur spécifique pour ce champ */

  line-height : 1.5 !important;

  /* Garde une bonne lisibilité */;

}

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

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

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

  outline : none !important;

  /* Supprime le contour bleu */

  border : 1px solid white !important;

  /* Ajoute une bordure blanche */

  box-shadow : none !important;

  /* Supprime tout effet d'ombre par défaut */;

}

.form-line {

  width : 100% !important;

  /* Étendre la ligne à 100% */

  margin : 0 0 10px 0 !important;

  /* Ajoute 10px d'espace en bas */

  padding : 0 !important;

  /* Supprime tout padding inutile */

  box-sizing : border-box;

  /* Assurez que tout est bien inclus */;

}

input, textarea, select {

  color : #ccc !important;

  /* Texte en gris clair */

  background : none !important;

  /* Fond transparent (optionnel) */;

}

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

  color : white !important;

  /* Texte en blanc quand le champ est actif */;

}

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;

}

button#input_2 {

  width : 100% !important;

  background-color : #A873EC;

  border : none;

  cursor : pointer;

  position : static;

  padding : 10px;

  box-sizing : border-box;

  margin : 10px 0 0 0;

  font-size : 20px;

  /* Définit la taille de la police */

  font-family : 'NURA NORMAL', sans-serif;

  /* Utilise la police NURA NORMAL */

  color : white;

  /* Texte en blanc */

  /* Ajoute 10px d'espace au-dessus pour uniformiser */;

}

label {

  display : none !important;

}

input::placeholder {

  color : white !important;

}

select {

  color : white !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;

}

.form-dropdown:not(.time-dropdown):not(:required),

.form-dropdown:not(:required),

.form-dropdown:required:invalid,

.form-spinner-input,

.form-textbox::placeholder,

li[data-type="control_fileupload"] .jfUpload-heading,

li[data-type="control_fileupload"] .qq-upload-button {

  color : #ffffff !important;

}

.form-dropdown,

.form-textarea,

.form-textbox,

.signature-pad-passive,

.signature-wrapper {

  color : #ffffff !important;

}

textarea::placeholder {

  color : white !important;

}

select option {

  background-color : black !important;

  color : white !important;

}

.form-line-active,

.form-line-error {

  background : transparent !important;

}

.form-header-group {

  border-bottom : none;

}

.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;

}

.submit-button {

  width : 638px !important;

  min-width : 150px;

}

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

  background-color : #ffffff !important;

  color : #A873EC !important;

}

.form-required {

  color : #ffffff00 !important;

}

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

}

.form-buttons-wrapper {

  margin : 0px;

  padding : 0px;

}

.form-all {

    background-color : transparent !important;

    color : white !important;

    font-size : 18px !important;

    padding : 020px !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 : 15px 10px !important;

    /* 15px en haut/bas, 10px à gauche/droite */

    height : auto !important;

    /* S'assure que la hauteur s'adapte */

    line-height : 1.5 !important;

    /* Améliore la lisibilité */;

}



textarea#input_10 {

    padding : 15px 10px !important;

    /* Garde un padding uniforme */

    height : 150px !important;

    /* Augmente la hauteur spécifique pour ce champ */

    line-height : 1.5 !important;

    /* Garde une bonne lisibilité */;

}



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

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

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

    outline : none !important;

    /* Supprime le contour bleu */

    border : 1px solid white !important;

    /* Ajoute une bordure blanche */

    box-shadow : none !important;

    /* Supprime tout effet d'ombre par défaut */;

}



.form-line {

    width : 100% !important;

    /* Étendre la ligne à 100% */

    margin : 0 0 10px 0 !important;

    /* Ajoute 10px d'espace en bas */

    padding : 0 !important;

    /* Supprime tout padding inutile */

    box-sizing : border-box;

    /* Assurez que tout est bien inclus */;

}



input, textarea, select {

    color : #ccc !important;

    /* Texte en gris clair */

    background : none !important;

    /* Fond transparent (optionnel) */;

}



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

    color : white !important;

    /* Texte en blanc quand le champ est actif */;

}



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;

}



button#input_2 {

    width : 100% !important;

    background-color : #A873EC;

    border : none;

    cursor : pointer;

    position : static;

    padding : 10px;

    box-sizing : border-box;

    margin : 10px 0 0 0;

    font-size : 20px;

    /* Définit la taille de la police */

    font-family : 'NURA NORMAL', sans-serif;

    /* Utilise la police NURA NORMAL */

    color : white;

    /* Texte en blanc */

    /* Ajoute 10px d'espace au-dessus pour uniformiser */;

}



label {

    display : none !important;

}



input::placeholder {

    color : white !important;

}



select {

    color : white !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;

}



.form-dropdown:not(.time-dropdown):not(:required),

.form-dropdown:not(:required),

.form-dropdown:required:invalid,

.form-spinner-input,

.form-textbox::placeholder,

li[data-type="control_fileupload"] .jfUpload-heading,

li[data-type="control_fileupload"] .qq-upload-button {

    color : #ffffff !important;

}



.form-dropdown,

.form-textarea,

.form-textbox,

.signature-pad-passive,

.signature-wrapper {

    color : #ffffff !important;

}



textarea::placeholder {

    color : white !important;

}



select option {

    background-color : black !important;

    color : white !important;

}



.form-line-active,

.form-line-error {

    background : transparent !important;

}



.form-header-group {

    border-bottom : none;

}



.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;

}



.submit-button {

    width : 638px !important;

    min-width : 150px;

}



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

    background-color : #ffffff !important;

    color : #A873EC !important;

}



.form-required {

    color : #ffffff00 !important;

}



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

}



.form-buttons-wrapper {

    margin : 0px;

    padding : 0px;

}

À noter que lorsque je fais un test d'email directement via jotform, je le reçois bien sur mon adresse.
Je ne comprends pas pourquoi on ne recoit rien, pourriez vous jeter un oeil svp ?

Hi Kevin,

To avoid confusion, I moved your other question to a new thread and will help you with that here.

Let us know if you have any other questions.

c'est le formulaire appelé Pixalie.
https://form.jotform.com/250074630012239
Merci de ne pas le modifier, vous pouvez faire vos tests avec un clone svp ?
sur ordinateur il est parfait cest juste sur mobile ou ca ne va pas.
Merci beaucoup pour votre aide

Hi Kevin,

To avoid confusion, I moved your other question to a new thread and will help you with that here.

Reach out again if you have any other question.