Formatting Form

  • seventhree
    Asked on June 26, 2021 at 8:00 PM

    https://form.jotform.com/211767256879068

    Hello,

    Could you please help with a few changes.

    1) Remove header and footer separator

    2) Remove the required star up top (*) as it already shows the bottom required field

    1624751347 60d7bcf304c4c  Screenshot 10

    3) I enabled 2 columns as per another thread, but I wasn't able to move the items on the left up:

    1624751554 60d7bdc254ba2  Screenshot 21


    4) And lastly, I wanted a wall of text to go under the image. I added a long text box with read only value, but users can still click this and shrink it. Ideally this needs to look like the header, where it's just text and not a form field

    Thanks,

  • Bojan Support Team Lead
    Replied on June 27, 2021 at 7:38 AM

    Greetings.

    To achieve remove header and footer separators and asterisks next to the required questions, please add the following CSS to your form:

    .form-header-group {
     margin-bottom: none !important;
    }
    .form-buttons-wrapper {
     border-top: none !important;
    }
    .form-required {
     display: none !important;
    }

    To display questions next to the image you have added, you will need to modify your forms a little.

    You need to add Section Collapse elements before the Email field and after the Phone field. You also need to set the Section Visibility to Visible and Button Visibility to Hidden:

    screenshot 6165 Screenshot 10

    After that, add the following CSS:

    @media screen and (min-width: 770px) {
     #section_12 {
      position: absolute;
      top: 325px;
      width: 675px;
     }
    }

    To add static text on your form, you can use the Paragprah field:

    screenshot 6166 Screenshot 21

    You can see all these changes on the following form:
    https://form.jotform.com/211772832785969

    If you wish, feel free to clone the example form to your account. You can click here to see how to achieve this.

    Let us know if you have any additional questions.

  • seventhree
    Replied on June 27, 2021 at 11:06 AM

    Hi Bojan, thank you for the feedback and the changes were all OK, just one detail: it looks good on desktop, but its off on tablet/phone mode.

    I cloned the form and moved the image and paragraph text where I feel looks better.

    It now looks OK on phone mode.

    Tablet mode: The items are currently aligned to the left, could these be centered.

    Desktop mode: Could you help move the image/paragraph to the right as where it previously was?

    https://www.jotform.com/build/211774514186155

    Thank You!

  • Billy JotForm Support
    Replied on June 27, 2021 at 8:46 PM

    Desktop mode: Could you help move the image/paragraph to the right as where it previously was?

    To perform this, change "min-width" to "max-width"

    Open the form using the regular builder and drag the image to where you want it to be.

    Tablet mode: The items are currently aligned to the left, could these be centered.

    Yes, items can be centered with the help of CSS codes. However, where would the image be placed?

    We'll be waiting for your response.

  • seventhree
    Replied on June 28, 2021 at 2:50 PM

    Hello,

    I apologize, I attached the wrong URL, please see here: https://form.jotform.com/211774547580159

    The correct order on mobile/tablet should be:

    Image
    Image Description
    Name
    Email
    Phone
    Take Photo Widget
    Message

    As stated on the previous message, mobile looks OK now:

    1624905843 60da1873d9bb6  Screenshot 10
    1624905908 60da18b40c600  Screenshot 21

    Tablet/Desktop do not look OK and need the following adjustments

    Tablet: Center Items, they are currently left aligned

    1624906008 60da191864dd8  Screenshot 32|

    And on desktop, image and description need to be placed on the right hand side

    1624906132 60da19947a0ba  Screenshot 43

    Thank you.

  • Jovanne JotForm Support
    Replied on June 28, 2021 at 8:26 PM

    Hi,

    Please allow me some time to conduct some tests, and I will get back to you as soon as I have more information.

    Thank you.

  • Jovanne JotForm Support
    Replied on June 28, 2021 at 9:15 PM

    Hi,

    Please try adding this custom CSS code:

    /* desktop */

    @media screen and (min-width: 992px){
    #section_12 {
      position: absolute;
      top: 224px;
      width: 675px;
    }

    img.form-image {
      float: right;   
    }

    li#id_3 {
      margin-top: -20px;
    }

    ul.form-section.page-section {
      height: 1100px;
    }

    li#id_15 {

      width: 300px;
      margin-left: 376px;
      margin-top: -75px;
    }

    }


    /* tablet */

    @media only screen and (min-width: 600px) and (max-width: 768px){
    li#id_15 {
      margin: 0 auto;
    }

    ul#section_12 {
      margin-left: 180px;
    }

    li#id_2 {
      margin-left: -105px;
    }

    }


    Please give it a try and let us know if this worked for you.

  • seventhree
    Replied on June 29, 2021 at 9:56 AM

    I have added as requested and it breaks the form, please look or clone:

    https://form.jotform.com/211774514186155

    1624974836 60db25f4ccdd0  Screenshot 10

  • seventhree
    Replied on June 29, 2021 at 10:26 AM

    Hello Team,

    I decided to start a new form and arrange it differently.

    Thank you for your time and help, you can close this case :)

    Regards!