Form Alignment and Styling Questions

  • Profile Image
    art_crate
    Asked on April 17, 2018 at 08:01 PM

    Hello,

    I have some alignment and styling issues I'd like to resolve with my form. Please see below.

    **How do I remove drop shadow from around form questions?


    Question 1: Reduce size of first name field and center with button. See screenshot below.


    1524009003Design-Survey_Q1.jpg

    Question 2 and other questions where applicable: Center buttons under fields. See Below

    1524009181Design-Survey_Q2.jpg

    Question 3,4,5,8: Equally spacing horizontally and vertically between image elements. Center all options under question. See Below.

    1524009550Design-Survey_Q3-4_etc.jpg

    Question 13: Shorten Fields, Center under Question with button. Change Submit button style to match other buttons. See Below

    1524009619Design-Survey_Q13.jpg


    Thank you so much for the edit help! I know some of these are a little picky, but it will really help with the overall UX of the form.

    Best

  • Profile Image
    Nik_C
    Answered on April 18, 2018 at 02:46 AM

    Regarding centering of the button, please insert the below CSS to your Custom CSS field: 

    button#form-pagebreak-next_171 {

        margin-left: -200px;

    }

    button#form-pagebreak-next_177 {

        margin-left: -200px;

    }

    button#form-pagebreak-next_164 {

        margin-left: -200px;

    }

    To remove the shadow around the form, please use this CSS:

    .form-all {

        box-shadow: none!important;

    }

    Regarding the name field, please insert this CSS:

    input#input_166 {

        width: 400px;

        margin-left: 28%;

    }

    For submit button, please use this CSS:

    .form-submit-button {

        font-size: 12px!important;

        font-family: "Open Sans", sans-serif!important;

        font-weight: 500!important;

    }

    For fields on last page, you can use this CSS to short the width:

    input#input_144 {

        width: 400px!important;

    }

    input#input_163 {

        width: 400px!important;

    }

    nput#input_178 {

        width: 400px!important;

    }

    You can change the width of course, just change the number.

    For "What Best Describes Your Living Space?", please try with this CSS, but insert it to custom CSS of the field:

    div#_d1 {

        padding-left: 40px;

    }

    div#_d2 {

        padding-left: 80px;

    }

    div#_d4 {

        padding-left: 40px;

    }

    div#_d5 {

        padding-left: 80px;

    }

    Please let us know how it worked.

    Thank you!

     
  • Profile Image
    art_crate
    Answered on April 18, 2018 at 05:14 PM

    Hi Nik,

    Thank you for your CSS. 

    I am having a few issues I need help with.

    ------


    Question 3: What Best Describes Your Living Space? 

    The selections jump around when selected.


    Tablet & Mobile View

    I am having a lot of issues with alignment and spacing when the form is viewed in Tablet & Mobile View. Please have a look at the form.


    Question 13 (Last Question)

    Is it possible to have "First Name" Field populated/editable with the input from Question 1? {input166}


    Thanks!

  • Profile Image
    Richie_P
    Answered on April 18, 2018 at 05:44 PM

    I have checked your form and for your

    Question 3: What Best Describes Your Living Space? 

    The selections jump around when selected.

    Yes, it seems that the Image Radio Buttons disappears at first then re-appears with the corrected image. This maybe caused with the image taking time to load.

    I have tried it in chrome but I can't seem to replicate it. Here is my screen cast:


    Tablet & Mobile View

    I am having a lot of issues with alignment and spacing when the form is viewed in Tablet & Mobile View. Please have a look at the form.

    The form seems to be mobile responsive at my end.

    .

    May we know if you have embedded your form into a website? Can we have the website URL?

    Question 13 (Last Question)

    Is it possible to have "First Name" Field populated/editable with the input from Question 1? {input166}

    To clarify, you want to pass a value from your first question "What best describes your living space" to the name field?

    We can use conditional logic on that.

    Here is  the guide:-How-to-Pass-Field-Value-to-Another-Field


    Hope this information helps.


  • Profile Image
    art_crate
    Answered on April 18, 2018 at 06:13 PM

    Hi Richie!

    Thank you for your swift reply.

    Please see screen captures below: I am also in Chrome

    1524089483Mobile-Alignment.gif


    1524089575Question Jump.gif