Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Aligning form fields and check boxes side-by-side


jussi
Go to solution Solved by tuanphan,

Question

  • Answers 26
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

There are errors in the site.css file. I don't know what the cause is. The first thing you can try is remove all your custom CSS. Make a copy somewhere so you can restore. If that gets

Posted Images

Recommended Posts

  • 0

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;
}
}

 

Link to post
  • 0

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;
}
}

 

 

Link to post
  • 0
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.

Link to post
  • 0
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

Link to post
  • 0

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.

Skjermbilde (178).png

Link to post
  • 0
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

Link to post
  • 0
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..

Link to post
  • 0

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

Screen Shot 2020-12-01 at 9.16.18 pm.png

Link to post
  • 0
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

Screen Shot 2020-12-01 at 9.16.18 pm.png

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

Link to post
  • 0
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.

Edited by Carli
Link to post
  • 0
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;
}

 

Link to post
  • 0
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

Link to post
  • 0
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

Link to post
  • 0
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

Link to post
  • 0
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

Link to post
  • 0
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 

Link to post
  • 0
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.

image.thumb.png.093289139c49f044f679064c11aa3206.png

With checkout button, add to Design > Custom CSS

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

 

Link to post
  • 0
On 4/21/2021 at 11:34 AM, tuanphan said:

The url doesn't exist.

image.thumb.png.093289139c49f044f679064c11aa3206.png

With checkout button, add to Design > Custom CSS


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

 

Didn't work 😕

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...