Jump to content

Form styling has broken it's function?

Recommended Posts

Hello!

Through lots of trial and error and with the help of many threads in this forum, I was able to figure out how to float form fields into multiple columns, and apply additional styling. However, it seems like this styling is now preventing the function of the form fields. If you check it out here, you'll see how all of the fields below name/email/phone are un-clickable.

https://fife-sunflower-68mk.squarespace.com/appointment-enquiry

pw: elipsis

Curious if anyone has any insight as to what might be happening?

 

Link to comment
  • Replies 6
  • Views 648
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

I think grid is going to be a better option. You have the additional comments floating over a bunch of fields and blocking them off.

This is not a full solution but some starter code. Anytime you mess with SS form styling is it always a challenge to get things to look good.

// begin appointment enquiry multi-column form, uses LESS syntax

  #block-yui_3_17_2_1_1689350752189_2879 .field-list {
  
    display : grid;
    grid-column-gap : 1.5vw;
    grid-template-columns : repeat( 6, 1fr );
    
    }
    
  #block-yui_3_17_2_1_1689350752189_2879 .form-item {
  
    grid-column : ~"1 / -1";
    
    }
    
  #block-yui_3_17_2_1_1689350752189_2879 .description {
  
    padding : 0;
    
    }
    
  #block-yui_3_17_2_1_1689350752189_2879 #select-7e5087e2-19de-427f-9bab-9ed57e548c5d {
  
    grid-column : ~"1 / 3";
    
    }
    
  #block-yui_3_17_2_1_1689350752189_2879 #select-84584693-059c-4a6b-82f4-002531232b32 {
  
    align-self : end;
    grid-column : ~"3 / 5";
    
    }
    
  #block-yui_3_17_2_1_1689350752189_2879 #select-d3e38a4d-6524-4abd-a0b3-dfb0361a04cf {
  
    align-self : end;
    grid-column : ~"5 / 7";
    
    }
    
  #name-yui_3_17_2_1_1689350768418_2630 {
  
    grid-column-gap : 1.5vw;
    
    }
    
  // email
  
  #block-yui_3_17_2_1_1689350752189_2879 #email-yui_3_17_2_1_1689350768418_2631,
  
  // date
  
  #block-yui_3_17_2_1_1689350752189_2879 #date-38fd01b9-6309-4d5e-8a25-ef27953302b8,
  
  // time
  
  #block-yui_3_17_2_1_1689350752189_2879 #select-5f36f9ac-ded2-401c-8b3c-d9c6cb1dde1b
  
    {
    
      grid-column : ~"1 / 4";
      
      }
      
  // phone
  
  #block-yui_3_17_2_1_1689350752189_2879 #phone-bd70cb9f-365d-49a1-8c91-86fc1d5951d6,
  
  // guests
  
  #block-yui_3_17_2_1_1689350752189_2879 #select-ace7ed4e-3864-4adc-bd4a-543368bb7a54,
  
  // visited
  
  #block-yui_3_17_2_1_1689350752189_2879 #radio-cbb65afd-a254-4b88-85e3-92768565566a
  
    {
    
      grid-column : ~"4 / 7";
      
      }
      
  #date-38fd01b9-6309-4d5e-8a25-ef27953302b8 input {
  
    max-width : unset;
    
    }
    
  // end appointment enquiry multi-column form

image.thumb.png.df99760c92d23c35081b28a31882d527.png

Let us know how it goes.

Edited by creedon
version 2

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
15 hours ago, creedon said:

I think grid is going to be a better option. You've the additional comments floating over a bunch of fields and blocking them off.

This is not a full solution but some starter code. Anytime you mess with SS form styling is it always a challenge to get things to look good.

#block-yui_3_17_2_1_1689350752189_2879 .field-list {

  display : grid;
  grid-column-gap : 1.5vw;
  grid-template-columns : repeat( 6, 1fr );
  
  }

#block-yui_3_17_2_1_1689350752189_2879 .form-item {

  grid-column : 1 / -1;
  
  }

#block-yui_3_17_2_1_1689350752189_2879 .description {

  padding : 0;
  
  }

#block-yui_3_17_2_1_1689350752189_2879 #select-7e5087e2-19de-427f-9bab-9ed57e548c5d {

  grid-column : 1 / 3;
  
  }

#block-yui_3_17_2_1_1689350752189_2879 #select-84584693-059c-4a6b-82f4-002531232b32 {

  align-self : end;
  grid-column : 3 / 5;
  
  }

#block-yui_3_17_2_1_1689350752189_2879 #select-d3e38a4d-6524-4abd-a0b3-dfb0361a04cf {

  align-self : end;
  grid-column : 5 / 7;
  
  }

#name-yui_3_17_2_1_1689350768418_2630 {

  grid-column-gap : 1.5vw;
  
  }

/* email */

#block-yui_3_17_2_1_1689350752189_2879 #email-yui_3_17_2_1_1689350768418_2631,

/* date */

#block-yui_3_17_2_1_1689350752189_2879 #date-38fd01b9-6309-4d5e-8a25-ef27953302b8,

/* time */
  
#block-yui_3_17_2_1_1689350752189_2879 #select-5f36f9ac-ded2-401c-8b3c-d9c6cb1dde1b
  
  {
  
    grid-column : 1 / 4;
    
    }

/* phone */

#block-yui_3_17_2_1_1689350752189_2879 #phone-bd70cb9f-365d-49a1-8c91-86fc1d5951d6,

/* guests */

#block-yui_3_17_2_1_1689350752189_2879 #select-ace7ed4e-3864-4adc-bd4a-543368bb7a54,

/* visited */

#block-yui_3_17_2_1_1689350752189_2879 #radio-cbb65afd-a254-4b88-85e3-92768565566a

  {
  
    grid-column : 4 / 7;
    
    }

#date-38fd01b9-6309-4d5e-8a25-ef27953302b8 input {

  max-width : unset;
  
  }

image.thumb.png.df99760c92d23c35081b28a31882d527.png

Let us know how it goes.

Thanks so much for this super speedy reply, @creedon! I've tried pasting in your solution to my custom CSS area, but for some reason nothing is being applied. I've both left my original code, and deleted it to no avail. Any thoughts?

Link to comment
Quote

but for some reason nothing is being applied.

The issue was that SS uses LESS ( a CSS preprocessor ) for Design > Custom CSS. LESS messed up the syntax of the code.

I've updated my code post.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
52 minutes ago, creedon said:

The issue was that SS uses LESS ( a CSS preprocessor ) for Design > Custom CSS. LESS messed up the syntax of the code.

I've updated my code post.

Ah, that makes more sense. It's applying, but the styles are out of whack. I'll keep playing with it—grids are new to me! 

Screen Shot 2023-07-25 at 2.43.36 PM.png

Link to comment
Quote

It's applying, but the styles are out of whack.

Either way you go something is going to be out of whack. I think the upside using grids is better.

Check out A Complete Guide to CSS Grid.

For the radio buttons you might want to go with a flex display. Although by default I think you'll get some overlap and have to adjust spacing to get the overlap out.

That should fix the dropdown icon for the previous select menu.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
On 7/25/2023 at 6:42 PM, creedon said:

Either way you go something is going to be out of whack. I think the upside using grids is better.

Check out A Complete Guide to CSS Grid.

For the radio buttons you might want to go with a flex display. Although by default I think you'll get some overlap and have to adjust spacing to get the overlap out.

That should fix the dropdown icon for the previous select menu.

Hi @creedon, I'm still trying to grasp grids, thank you so much for the link! I'm not sure how you were able to get the configuration in your screen shot. My fields are wonky sizes and I'm trying to figure out what needs to be updated in the code in order to correct it. I'm confused by the syntax, specifically the ~": 

      grid-column : ~"1 / 4";

As much as I've searched this handy article to figure out the use or how to play with it, I'm not sure where I'm going wrong.

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.