Jump to content

formatting forms with multiple fields on one line

Recommended Posts

Site URL: https://www.kindman.co

Hi!

Two coding questions:

1. I'd like to be able to format my forms so that the text blocks are inline with at least two text blocks on each line.  ( I don't need pronouns or email to be longer than "first and "last name" in both. Both of the forms i'm thinking of are here:

https://www.kindman.co/hsp-empowerment-group  (bottom of page)

https://www.kindman.co/contact 

I've tried some of the things i've seen for others forms, but they don't seem to work for mine.

2. We'd love to have a double drop-down in our site navigation under "About" where when you hover over "Our Team" it would list the team members names, rather than the way it is now where they are all listed under About.  The current way it looks a little messy/cluttered.

Thanks so much for your help!

Link to comment
  • Replies 4
  • Views 1.9k
  • Created
  • Last Reply
  • 2 weeks later...
On 5/2/2020 at 7:24 AM, tuanphan said:

1. First, Last, Pronouns in 1 line?

2. You mean mega menu?

Try this plugin https://thompsonweb.design/squarespace-plugins-extensions/mega-menu-plugin-squarespace

First, Last (1st line)

Pronouns, Email (2nd line)

 

Or First, Last, Pronouns (1st line)

Email (2nd line)

How do  I format for this?

Also is there a way to make dropdown fonts the same fonts as the rest of the form headers?

Thanks!

Link to comment

Add to Contact Us Page Settings > Advanced > header

<style>
@media screen and (min-width:901px) {
.form-item.fields.name+div {
    float: left !important;
    width: 49% !important;
    margin-right: 2%;
}
.form-item.field.email {
    width: 49%;
    float: left;
}
}
</style>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 5/12/2020 at 7:09 AM, tuanphan said:

Add to Contact Us Page Settings > Advanced > header


<style>
@media screen and (min-width:901px) {
.form-item.fields.name+div {
    float: left !important;
    width: 49% !important;
    margin-right: 2%;
}
.form-item.field.email {
    width: 49%;
    float: left;
}
}
</style>

 

thank you so much! this worked very well.  As for the header menu drop-down, I don't think it's a mega menu. Like Under "About" we already have a drop down, but i'd love to be able to put the therapists that are listed at the bottom under Our Team so that when you move over that it lists them all. Is that possible?

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.