E-Signature: How to align multiple fields in a row using custom CSS?

  • Profile Image
    argonous
    Asked on December 23, 2020 at 10:36 AM

    Hello Team,

    Here is today's challenge!

    For the example form below, I need for the question spacing and label alignment (global settings) of the top section to remain the same. For the Approvals section, I need for the Signature label alignment to remain on top, with the label alignment for the Name and Email fields to change to left.

    I also need for the question spacing of the Name and Email fields to be reduced so they are closer to each other and the signature block. The overall length of the Name and Email fields (labels and text entry block) should be the same as their corresponding signature block. I have attached an example of what I am trying to achieve.

    As always, thanks for your help!

  • Profile Image
    Jimmy_D
    Answered on December 23, 2020 at 11:39 AM

    Hello!

    Kindly inject the following CSS code to your form and let us know if you need further assistance.

    .form-all{
        max-width: 880px!important;
    }  
          
    #id_12, #id_11, #id_5, #id_4{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin: 0;
        padding: 3px;
    }

    #label_12, #label_11, #label_5, #label_4{
        width: 30%;
        margin-right:.50em;
        margin-bottom: 0;
    }
    #cid_12,
    #cid_11,#cid_5, #cid_4{
        width: 65%;
    }

    1608741490_5fe37272c3a89_

    Regards,


  • Profile Image
    argonous
    Answered on December 23, 2020 at 06:13 PM

    Thank you!

    Thanks to the example you provided, I have been adjusting the code to get to what I wanted. However, I now have a follow up question for the same form.

    I want to draw a border around the Signature #1, Name #1, and Email #1 elements. I want to do the same for the other "groupings" in the form. Please note that I do not want the borders for each individual elements, but a complete border around the three elements together to give the appearance of a single "group".

    Thanks as always!

  • Profile Image
    Zahra_S
    Answered on December 23, 2020 at 10:15 PM

    Hi there!

    Unfortunately, it is not possible to add a border around multiple form fields.

    If you want to embed your form somewhere, you can get the full source code of the form and then edit it to add a border around all fields.

    Guide: how-to-get-the-full-source-code-of-your-form

    Feel free to contact us if you need further assistance.



  • Profile Image
    Zahra_S
    Answered on December 23, 2020 at 11:43 PM

    Please ignore my previous response because I have a solution for you.

    I shared your query with my colleagues, and @Ariel came up with an amazing workaround for you.

    Take a look at this form: https://form.jotform.com/203578373158968.

    Let's refer to the 3 blocks as #1, #2 and #3. We will use Section Collapse to create 3 sections and add respective fields in each section. After that, we will add custom CSS code to create a border around each section.

    Step 1: Add 4 Section Collapse fields and name them to make the process easier. Please rename the name and email fields too.

    1608784195_5fe419430b311_section-collaps

    Step 2: Now, we will move the fields in respective sections.

    1608784353_5fe419e1dfe1d_

    Step 3: Set the Section Visibility to VISIBLE and Button Visibility to HIDDEN.

    1608784598_5fe41ad6706ad_section-visible

    Step 4: Add the following CSS code in the form:

    #cid_18 + ul, 
    #cid_18 + ul + ul, 
    #cid_18 + ul, #cid_18 + ul + ul + ul {
     border: 1px solid;
     width: 33%;
     padding-bottom: 30px;
     margin-right: 0.33%;
    }
    #cid_18 + ul li, 
    #cid_18 + ul + ul li, 
    #cid_18 + ul li, 
    #cid_18 + ul + ul + ul li{
     min-width: 100%;

    }


    I hope this helps. Let us know if you need further assistance.