Formatting Form

  • Profile Image
    seventhree
    Asked on June 26, 2021 at 08: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_

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

    1624751554_60d7bdc254ba2_


    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,

  • Profile Image
    Bojan_J
    Answered on June 27, 2021 at 07: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.png

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

    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.

  • Profile Image
    seventhree
    Answered 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!

  • Profile Image
    Billy_G
    Answered on June 27, 2021 at 08: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.

  • Profile Image
    seventhree
    Answered on June 28, 2021 at 02: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_
    1624905908_60da18b40c600_

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

    Tablet: Center Items, they are currently left aligned

    1624906008_60da191864dd8_|

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

    1624906132_60da19947a0ba_

    Thank you.

  • Profile Image
    Jovanne_A
    Answered on June 28, 2021 at 08: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.

  • Profile Image
    Jovanne_A
    Answered on June 28, 2021 at 09: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.

  • Profile Image
    seventhree
    Answered on June 29, 2021 at 09:56 AM

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

    https://form.jotform.com/211774514186155

    1624974836_60db25f4ccdd0_

  • Profile Image
    seventhree
    Answered 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!