Aligning form fields and check boxes side-by-side

Site URL: https://guitar-turbot-wyhd.squarespace.com/

Hi - first I want to align both fields side-by-side.

Then the three check-boxes underneith also side-by-side.

Thank you and all the best from Oslo, Norway + STAY SAFE!!!

Lovely - thank you!

Hi !  I was looking to do the same but just to align both fields side-by-side. I used this code in my ccs box and it didnt do anything. can you help. thanks.

On 6/15/2020 at 8:44 AM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (min-width:768px) {
div#block-yui_3_17_2_1_1590817488800_15909 .checkbox .option {
    float: left !important;
    width: 30% !important;
}
}

 

11 minutes ago, jennypetit said:

Hi !  I was looking to do the same but just to align both fields side-by-side. I used this code in my ccs box and it didnt do anything. can you help. thanks.

 

If you share link to page where you insert form, I can check easier.

On 7/11/2020 at 2:49 AM, tuanphan said:

If you share link to page where you insert form, I can check easier.

https://sarahernandezpsicologa.squarespace.com/ 

password ONE

I want to aline side by side the name, email and button on the form.

thank you

On 7/12/2020 at 12:09 AM, jennypetit said:

https://sarahernandezpsicologa.squarespace.com/ 

password ONE

I want to aline side by side the name, email and button on the form.

thank you

Incorrect password

3 hours ago, tuanphan said:

Incorrect password

One

So I've now added one more field - and I want 'Din e-post' together with 'Bedriftens navn' on the same line please?

And also the check boxes to appear behind 'Velg ditt nyhetsbrev' ie. all on the same line.

26 minutes ago, jussi said:

So I've now added one more field - and I want 'Din e-post' together with 'Bedriftens navn' on the same line please?

And also the check boxes to appear behind 'Velg ditt nyhetsbrev' ie. all on the same line.

Difficult to help without checking url

www.it-folk.no

On 8/26/2020 at 1:30 PM, jussi said:

www.it-folk.no

 

Add to Home > Design > Custom CSS

/* Align form items */
@media screen and (min-width:768px) {
div#block-yui_3_17_2_1_1590817488800_15909 {
	.form-wrapper .field-list>div:nth-child(2), .form-wrapper .field-list>div:nth-child(3) {
    width: 45%;
    float: left;
}
.form-wrapper .field-list>div:nth-child(2) {
    margin-right: 5%;
}
}
}

You can adjust width, spacing..

Hello, I have just been playing with this code for my forms. Can anyone tell me why it stops the form fields from working? The select boxes don't drop down and I can't type in the text fields.

I have attached a screen shot of my form and the code I am using is below:

To put the email and phone next to one another:
div#block-yui_3_17_2_1_1596178403634_3980 {.form-wrapper .field-list>div:nth-child(2), .form-wrapper .field-list>div:nth-child(3) {width: 48.8%; float: left;} .form-wrapper .field-list>div:nth-child(2) {margin-right:2%;}}

To put the date, time and location fields next to one another:
div#block-yui_3_17_2_1_1596178403634_3980{.form-wrapper .field-list>div:nth-child(4), .form-wrapper .field-list>div:nth-child(5), .form-wrapper .field-list>div:nth-child(6){width:32% !important; float: left;}.form-wrapper .field-list>div:nth-child(4), .form-wrapper .field-list>div:nth-child(5) {margin-right: 2%;}}

Also, would love to know how I can make the date, time and location fields span the full width of their 32% so it looks nice and even! 

Cheers,
Carli

On 12/1/2020 at 5:21 PM, Carli said:

Hello, I have just been playing with this code for my forms. Can anyone tell me why it stops the form fields from working? The select boxes don't drop down and I can't type in the text fields.

I have attached a screen shot of my form and the code I am using is below:

To put the email and phone next to one another:
div#block-yui_3_17_2_1_1596178403634_3980 {.form-wrapper .field-list>div:nth-child(2), .form-wrapper .field-list>div:nth-child(3) {width: 48.8%; float: left;} .form-wrapper .field-list>div:nth-child(2) {margin-right:2%;}}

To put the date, time and location fields next to one another:
div#block-yui_3_17_2_1_1596178403634_3980{.form-wrapper .field-list>div:nth-child(4), .form-wrapper .field-list>div:nth-child(5), .form-wrapper .field-list>div:nth-child(6){width:32% !important; float: left;}.form-wrapper .field-list>div:nth-child(4), .form-wrapper .field-list>div:nth-child(5) {margin-right: 2%;}}

Also, would love to know how I can make the date, time and location fields span the full width of their 32% so it looks nice and even! 

Cheers,
Carli

Can you share link to page in screenshot? We can check easier

On 12/3/2020 at 10:32 PM, tuanphan said:

Can you share link to page in screenshot? We can check easier

https://goose-clementine-937a.squarespace.com/ password: love

There are forms on the following pages:
https://goose-clementine-937a.squarespace.com/book-a-consultation
'Email', 'Phone', 'Date', 'Time' & 'Location' fields are not working

https://goose-clementine-937a.squarespace.com/request-a-quote
All seem to be working except for the 'Ideal Budget' and "How Did You Find Me' fields near the bottom.

https://goose-clementine-937a.squarespace.com/contact
The 'Email', and 'Phone' fields are not working.

On 12/5/2020 at 10:02 AM, Carli said:

https://goose-clementine-937a.squarespace.com/ password: love

There are forms on the following pages:
https://goose-clementine-937a.squarespace.com/book-a-consultation
'Email', 'Phone', 'Date', 'Time' & 'Location' fields are not working

https://goose-clementine-937a.squarespace.com/request-a-quote
All seem to be working except for the 'Ideal Budget' and "How Did You Find Me' fields near the bottom.

https://goose-clementine-937a.squarespace.com/contact
The 'Email', and 'Phone' fields are not working.

Add to Home > Design > Custom CSS

.form-wrapper .field-list .field:nth-child(7) {
    clear: left;
}

On 8/15/2020 at 11:50 AM, tuanphan said:

Difficult to help without checking url

Hello @tuanphan I need your help. If you see on the page url I am sharing , there are 8 forms. I would like to keep the same layout and tick boxes, but I would like to just have 1 form and 1 submit button.

https://www.pages.firstco.uk.com/services

Is this something you can help?

Thanks in advance

On 6/15/2020 at 1:44 PM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (min-width:768px) {
div#block-yui_3_17_2_1_1590817488800_15909 .checkbox .option {
    float: left !important;
    width: 30% !important;
}
}

 

Hey tuanphan :)

Could you help me. Out please? 

I want to make a questionnaire with 4 multiple choice answers each in sperate textarea. Needs to be attached to each product I'm selling.

Could you help me out on something like that please? :/

Thamk you

On 3/4/2021 at 3:31 AM, Junleung said:

Hey tuanphan :)

Could you help me. Out please? 

I want to make a questionnaire with 4 multiple choice answers each in sperate textarea. Needs to be attached to each product I'm selling.

 

Could you help me out on something like that please? :/

 

Thamk you

Can you share link to page where you added form? We can check easier

19 hours ago, tuanphan said:

Can you share link to page where you added form? We can check easier

Hi, thanks for getting back. I've dm you 

On 3/8/2021 at 7:32 AM, Junleung said:

Hi, thanks for getting back. I've dm you 

Have you solved it yet? If no, you can share url, we can take a look

On 3/7/2021 at 5:24 AM, tuanphan said:

Can you share link to page where you added form? We can check easier

Nope not yet. 

Page : plumcompetitions. Com/gaming-competiitons/p/peacock

Password: google123

I'm also trying to change checkout button background color to black and the checkout button font colour to yellow. I've tried everything, tried all the codes I found in 3 different forms to no avail. I'm using 7.1 

Thank you in advance 

On 4/19/2021 at 9:11 PM, Junleung said:

Nope not yet. 

 

Page : plumcompetitions. Com/gaming-competiitons/p/peacock

Password: google123

 

I'm also trying to change checkout button background color to black and the checkout button font colour to yellow. I've tried everything, tried all the codes I found in 3 different forms to no avail. I'm using 7.1 

 

Thank you in advance 

The url doesn't exist.

With checkout button, add to Design > Custom CSS

/* checkout button */
.checkout-button {
    background-color: black !important;
    color: #d4af37 !important;
}

On 4/21/2021 at 11:34 AM, tuanphan said:

The url doesn't exist.

With checkout button, add to Design > Custom CSS

/* checkout button */
.checkout-button {
    background-color: black !important;
    color: #d4af37 !important;
}

 

Didn't work 😕

On 5/11/2021 at 11:02 PM, Junleung said:

Didn't work 😕

Can you share link to cart page?