How do I align all of the field elements?

  • mkanna
    Asked on May 6, 2024 at 1:16 PM

    Hi there,


    I am having issues with alligning my form. My goal is to have a SF integration for time in business, i jimmyrigged it to where if i use a full name element and changed the titles it would stay alligned but i cant integrate it due to it not being a number element. The issue im running into now is that i have one with the header and i need it to be alligned with the 2nd box which doesnt have a header nor do i want one.

    Please help :)

    Jotform Thread 14592391 Screenshot
  • Nelson JotForm Support
    Replied on May 6, 2024 at 1:56 PM

    Hi Matt,

    Thanks for reaching out to Jotform Support. I've checked your account to possibly locate the form you are working with. However, it seems like you have several forms on your account. Could you please send to us the form URL so we can check it here? Let me show you how to do it:

    • On your Form Builder, at the color orange navigation bar, click on Publish.
    • In the Menu that will appear on the left-side of the screen, select Quick Share.
    • Under Share With Link, click on Copy Link.

    How do I align all of the field elements? Image 1 Screenshot 20

    As soon as we hear back from you, we can move forward with a solution.

  • mkanna
    Replied on May 6, 2024 at 1:57 PM

    Of course! here is the link to the form https://form.jotform.com/241203951465150

  • Nelson JotForm Support
    Replied on May 6, 2024 at 2:24 PM

    Hello Matt,

    Thanks for getting back to us with the form URL. I've cloned the form and can confirm that everything is aligned. Please see the screencast below for the result:

    How do I align all of the field elements? Image 1 Screenshot 20
    Can you try it again and see how it goes? If you run into the same issue again, let us know, and we'll do some more testing to see what's going on. 

    Once we have a better idea of what’s going on, we’ll be able to come up with a solution.

  • mkanna
    Replied on May 6, 2024 at 2:30 PM

    Awesome! So i am going to have to do this to a few forms can you show me how you realigned them?

  • Devemer JotForm Support
    Replied on May 6, 2024 at 3:21 PM

    Hi Matt,

    Thanks for getting back to us. I checked your form and can see that it's aligned by our standards. Can you specify to us which section of the form needs further alignment? Also, can you send us screenshots of how it looks like on your end? Check out this guide about how to send a screenshot to our Support Forum.

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

  • mkanna
    Replied on May 6, 2024 at 3:41 PM

    Hi Devemer, I think you misunderstood me, It is good right now but i want to know how you fixed the alignment.

  • Devemer JotForm Support
    Replied on May 6, 2024 at 4:35 PM

    Hi Matt,

    Thanks for getting back to us, and I'm sorry about the confusion. I checked on the previous exchange you had with my colleague, and it looks like he didn't do anything special as well. He simply cloned the form and everything is already aligned. It must've been a short visual glitch, but it should be good now. For reference, though, you can manage how your form looks by utilizing the Form Designer feature or injecting CSS codes to your form.

    Let us know if there’s anything else we can help you with.

  • mkanna
    Replied on May 7, 2024 at 11:01 AM

    Hi Devemer, Again i see the same issue when i open the form it still is giving me the same issue. See the screenshot below and how this section is off centered. Can you walk me through how to get this to be corrected?How do I align all of the field elements? Image 1 Screenshot 20

  • Princess JotForm Support
    Replied on May 7, 2024 at 12:30 PM

    Hi Matt,

    Thanks for getting back to us. When I cloned and tested your form, the same thing happened for me. This happens because the field doesn't have a field label. After investigating it a bit, I found a solution. Let's add a label to it and just make it hidden. Let me show you how:

    1. In Form Builder, select your Months field and click the Gear Icon to open Properties.
    2. Input any Text to the Field Label text box.How do I align all of the field elements? Image 1 Screenshot 40

    Let's make it hidden by adding a Custom CSS code and make the label color to white. Just add the CSS code below:

    #label_135 {
      color: #ffffff !important;
    }

    Let me show you how to add it to your form:

    1. In Form Builder, click the Paint Roller icon to open Form Designer.
    2. Navigate to Styles tab.
    3. Scroll down to find the Inject Custom CSS section and paste the custom CSS code above. How do I align all of the field elements? Image 2 Screenshot 51

    Here's a screencast of before and after result:

    How do I align all of the field elements? Image 3 Screenshot 62

    Also, here's the link to my cloned form for you to check and see the results. You can also clone the form by following this guide on How to Clone an Existing Form From a URL.

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

 
Your Answer