Espacement entre les questions

Bonjour,

J'ai vu qu'on pouvait diminuer l'espacement entre les questions pour tous le formulaires. Mais je souhaiterais diminuer l'espacement uniquement entre certaines questions. Est-ce possible svp ?

Regards

Hi Francis,

Thanks for reaching out to Jotform Support. While we do offer Support in many foreign languages, and we're working hard to add more every day, we don't currently have French Support agents who can help you. So I'll try to help you in English using Google Translate, but you can reply in whichever language you feel comfortable using.

Now, coming back to your question, to understand your request better, can you explain a bit more about the issue, so I can get a better idea of what's happening? If you mention shrinking fields, it's easy to do. Let me show you how to do it:

1. In Form Builder, select the field you want to shrink and right-click on it.
2. In the dropdown menu, click on Shrink.
3. Once you shrink them, you can simply drag and drop them where you want.

You can also shrink fields in the properties of the them. Let me walk you through it:

1. While in Form Builder, select the field you want to shrink and click on the Gear icon next to it.
2. In the menu on the right side of the page, click on the Advanced tab.
3. Scroll down and toggle the Shrink option to On.

To unshrink the fields:

1. Select the field you want to unshrink and click on the Gear icon next to it.
2. In the menu on the right side of the page, click on the Advanced tab.
3. Scroll down and toggle the Shrink option to Off.

We also have a guide about How to Position Form Elements in Jotform that you can check out. If you want to make specific changes on your form with custom CSS codes, Can you take a screenshot of your request? We’ve got a guide here that’ll show you how to do that.

Once we hear back from you, we'll be able to move forward with a solution.

Actually my problem is the following.

Between the title "Crypto Pay Direct" and the line "Total Commande", there is too much space.

And it 's the same between "0 EUR" and "Envoyé"

And between the timer and "A l'adresse"

You see ?

I would like to reduce the space especially at these 3 location.

Thanks for help

Hi Francis,

According to your screen recording, I believe you're referring to this form. I cloned your form and tried to replicate the issue, but I was not able to see the Crypto Pay Direct page when I tried to make a payment. Take a look at the screencast of the result below:

Can you explain a bit more about the issue so we can look into it?

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

No, the form is https://eu.jotform.com/build/243363947501054

and the app is : https://eu.jotform.com/app/build/243363924595365

and the name of both is : Commande de Vin Maison Blanche_V_CRYPTO

Hi Francis,

I'll need a bit of time to look into this. I'll get back to you as soon as I can.

Thanks for your patience and understanding, we appreciate it.

Hi Francis,

You can Inject the CSS Code below to reduce the space between fields. Let me show you how:

1. First, Copy this code.

#id_58 {

  height : 135px !important;

  margin-top : -10px !important;

}



#id_73 div.form-input-wide {

  height : 50px !important;

}

#id_61 div.form-html {

  margin-top : -30px !important;

}

2. In Form Builder, click on the Paint Roller icon on the upper right side of the panel.

3. Under the Form Designer Menu, go to the Styles tab and add the CSS Code to the Inject Custom CSS input box.

After that, try to re-embed again the form to your App. Check out the screencast of the result below:

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

Bonjour,

Cela fonctionne, mais comment faites-vous pour identifier le champs avec le bon ID ?

Pour moi j'ai trouver que les champs :

• Total Commande = #id_58
• A l’adresse = #id_61

Mais le ID #id_73 correspond à quel champs ?

Hi Francis,

You can find the Field ID in the Advance Setting of the form field. Let me show you how:

1. In Form Builder, click on the Gear icon of the field.
2. Hover your mouse to the Field Properties and go to the Advance Tab.
3. Scroll down, click the dropdown arrow of the Field Details section, and you will see the Unique Name or Field ID of the field.

Also, the #id_73 code refers to the Crypto Pay Direct field. Take a look at the screenshot below:

Let us know if you have any other questions.

For the Crypto Pay Direct field I can see this and not id-73 :

Moreover, how can I reduce the distance between this :

Total Commande:

and this :

And, reduce the distance between this :

I tried to use the formats / bloc / div but without success....

Hi Francis,

The Crypto Pay Direct field is a Paragraph element, and this field does not have a field ID in the same way that other fields do. However, you can still get the CSS Code which is #id_73 in the Advance Designer of your form. Let me show you how:

1. In Form Builder, click the Paint Roller icon on the upper right side of the panel.
2. Under the Colors tab, click on the Advance Designer button, and you will be redirected to the Advance Designer Builder.
3. Hover your mouse over the upper right side of the panel and click on the CSS tab.
4. Then, Double-Click the Crypto Pay Direct field, and the CSS Code: #id_73 will appear on the input box.

Also, I checked the spacing between the two fields and can see that it is working properly when being accessed via a mobile device. Take a look at the screenshot below:

Let us know if you have any other questions.

Ok for the first question.

But not for the second :-)

How can I reduce the distance between this :

Total Commande:

and this :

{totalCommande} EURe monerium ou EURT tether

~

{totalCommande} EUR

And, moreover, reduce the distance between this :

{totalCommande} EURe monerium ou EURT tether

and this : ~

and this :{totalCommande} EUR

I tried to use the formats / bloc / div but without success....

Hi Francis,

Are you referring to the space between each word of the Total Commande field? If so, you can add the CSS Code below. Let me show you how:

/* Target paragraph fields */

.form-html {

 letter-spacing: -0.05em; /* Adjust letter spacing */

 line-height: 1.0; /* Adjust line spacing (1.4 is an example, adjust as needed) */

}

Check out the screenshot of the result below:

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

Where can I put this CSS code please ?

Please, no, between these 4 lines :

Total Commande:

{totalCommande} EURe monerium ou EURT tether

~

{totalCommande} EUR

Hi Francis,

I checked the value you mentioned on your form and noticed that these have been added in a paragraph field. So, if you want to reduce the distance between them, you will have to edit the HTML code in the paragraph element. Doing that is easy, let me show you how:

1. In Form Builder, click on the Paragraph element, then click on the Pencil icon on the right side of the field to edit it.
2. Click on the Source code icon and then delete the existing HTML code.
3. Paste the HTML code provided below and then click on OK and Save.

<p style="text-align: center; margin: 0;"><strong>Total Commande:</strong></p>

<blockquote style="margin: 0; padding: 0;">

    <div style="text-align: center; margin: 0; line-height: 1.2;">

        <strong><span style="color: #999999;">{totalCommande} EURe monerium ou EURT tether</span></strong>

    </div>

    <div style="text-align: center; margin: 0; line-height: 1.2;">

        <strong><span style="color: #999999;">~</span></strong>

    </div>

    <div style="text-align: center; margin: 0; line-height: 1.2;">

        <strong><span style="color: #999999;">{totalCommande} EUR</span></strong>

    </div>

</blockquote>

You can also increase or reducing the distance by editing the 'line-height: 1.2' values in your HTML code.

Give it a try and reach out again if you have any other questions.

ok thanks