Form Alignment and Styling Questions

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.

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

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

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

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

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!

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!

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.

Hi Richie!

Thank you for your swift reply.

Please see screen captures below: I am also in Chrome