Jump to content

Very Custom Form Styling

Recommended Posts

Site URL: https://roadrunner-echidna-9e76.squarespace.com/get-started

Hi all,

I need some help styling a form block. For reference, attached is what I want the form to look like.

Link: https://roadrunner-echidna-9e76.squarespace.com/get-started
PW: ephemora2k22

1. How can I get the Form Name to display in the form block? It appears in the Lightbox version of the form, but not in the block version.
2. I used two Text fields in place of the Name field because I wanted "First Name/Last Name" to appear as placeholder text. How can I hide the "Last Name" field title specifically?
3. How do I target the Budget dropdown menu? I want to style the box itself as well as the font.
4. I used custom code to place the First Name/Last Name fields side by side as well as the Budget/Date fields. However, it looks like the Budget/Date fields aren't lining up horizontally. These fields are not responding to margin edits. Mayyyybe once I style the budget dropdown box this will be taken care of, but IDK how to do that yet! Help?

Thank you!

Contact Page.jpg

Link to comment
On 9/22/2022 at 12:55 AM, knockout said:

No, not yet. The screenshot is my mockup; it shows what I want it to look like. You can see what it actually looks like at the link in question.

Hi,

I see your site - mockup already same

image.thumb.png.4f7e1ef0af8dcfbf487073b03ce79589.png

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 9/23/2022 at 9:13 AM, tuanphan said:

Hi,

I see your site - mockup already same

image.thumb.png.4f7e1ef0af8dcfbf487073b03ce79589.png

It's not the same. I am trying to achieve the 4 items I described in my original post:

1. I want the form name at the top ("Request a Quote" in blue on purple);

2. I want to hide the "Last Name" field title in blue;

3. I want to be able to style the drop-down "Budget Range" menu;

4. I want to line up the Budget/When's your wedding fields horizontally.

Link to comment

#1: Can you add the form title in so that styling can be suggested?

#2: CSS

#text-6275ebb7-786e-4c51-bcbc-5824a719b110 {
  .title {
   display:none;
 }
}

#3: this will need some tweaking, but should be a start for you:

#select-f4d1d42e-9e94-4b58-bb47-6d395a78e46a-field {
  .form-wrapper .field-list .field select {
    width: 90%;
    background-color:#cccccc;
    border-radius: 42px;
    option {
      padding:8px 12px;
    }
  }
}

#4: not sure I can see the change you want to make here, sorry!

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
4 minutes ago, Ziggy said:

#1: Can you add the form title in so that styling can be suggested?

#2: CSS

#text-6275ebb7-786e-4c51-bcbc-5824a719b110 {
  .title {
   display:none;
 }
}

#3: this will need some tweaking, but should be a start for you:

#select-f4d1d42e-9e94-4b58-bb47-6d395a78e46a-field {
  .form-wrapper .field-list .field select {
    width: 90%;
    background-color:#cccccc;
    border-radius: 42px;
    option {
      padding:8px 12px;
    }
  }
}

#4: not sure I can see the change you want to make here, sorry!

1. Form name is already in there (see attached)

2. This worked, thanks!

3. No change at all when copy/pasting this in, unfortunately. I left your code in there however for you to see. (See screenshot also attached)

4. The text reading "Got a budget range?" and "When's your wedding?" are not aligned horizontally: the budget field is lower vertically than the wedding date question. This may be a moot question once question 3 is solved for, but just wanted to clarify just in case.

And thank you for your help!

Screen Shot 2022-09-30 at 1.18.38 PM.png

Screen Shot 2022-09-30 at 1.23.52 PM.png

Link to comment

Can you try this alteration of the CSS:

#select-f4d1d42e-9e94-4b58-bb47-6d395a78e46a-field {
  select {
    width: 90%;
    background-color:#cccccc;
    border-radius: 42px;
    option {
      padding:8px 12px;
    }
  }
}

 

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
2 hours ago, Ziggy said:

Can you try this alteration of the CSS:

#select-f4d1d42e-9e94-4b58-bb47-6d395a78e46a-field {
  select {
    width: 90%;
    background-color:#cccccc;
    border-radius: 42px;
    option {
      padding:8px 12px;
    }
  }
}

 

Still no changes to the drop-down box.

2 hours ago, Ziggy said:

If you add a line to the form fields, and place it at the top, add your title to that and untoggle the line. Then we can use that for the title styling.

Okay, I set that up but it still appears inside the form-inner-wrapper and what I want to target to create this purple background is the upper part of the form-wrapper. I also added the below just to see what would be targeted:

.form-wrapper .field-list .section:nth-child(1) {
  background-color: @lavender;
}

 

Link to comment

Try changing the form background color value to this:

background: rgb(248,246,244)
background: linear-gradient(180deg, rgba(223,207,229,1) 0%, rgba(223,207,229,1) 9%, rgba(248,246,244,1) 9%, rgba(248,246,244,1) 100%);

And adjust the two instances of 9% up or down to suit.

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
15 minutes ago, Ziggy said:

Try changing the form background color value to this:

background: rgb(248,246,244)
background: linear-gradient(180deg, rgba(223,207,229,1) 0%, rgba(223,207,229,1) 9%, rgba(248,246,244,1) 9%, rgba(248,246,244,1) 100%);

And adjust the two instances of 9% up or down to suit.

Okay, the second part of that, the one with the linear gradient, that was some magic. Very cool, thank you for that.

Now, I feel like I've tried every trick in the book to style that one line's font-size to be larger, but it's not working. The most I can get is that the margin below "Request a Quote" increases as though the text is larger, but the text does't actually change size. Any ideas?

Link to comment

Try this:

#section-148f7f39-6e8b-44e5-9a8c-a475860b7cc5 {
  .form-wrapper .field-list .title {
    font-size:24px;
  }
}

Or:

#section-148f7f39-6e8b-44e5-9a8c-a475860b7cc5 {
  .title {
    font-size:24px !important;
  }
}

 

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
4 minutes ago, Ziggy said:

Try this:

#section-148f7f39-6e8b-44e5-9a8c-a475860b7cc5 {
  .form-wrapper .field-list .title {
    font-size:24px;
  }
}

Or:

#section-148f7f39-6e8b-44e5-9a8c-a475860b7cc5 {
  .title {
    font-size:24px !important;
  }
}

 

The second one here worked wonders! Thank you! Man, just when you thought you'd tried all the combinations...

 

3 hours ago, Ziggy said:

Can you try this alteration of the CSS:

#select-f4d1d42e-9e94-4b58-bb47-6d395a78e46a-field {
  select {
    width: 90%;
    background-color:#cccccc;
    border-radius: 42px;
    option {
      padding:8px 12px;
    }
  }
}

 

You've already dedicated like half a day to helping me, but if you have further thoughts on this, I'd take 'em. If not, I'll just leave as is.

Thank you so much for your help!

Link to comment
1 minute ago, knockout said:

You've already dedicated like half a day to helping me, but if you have further thoughts on this, I'd take 'em. If not, I'll just leave as is.

I just need a coffee, but sadly I'm about done for the week, glad I could help out! Brilliant website BTW!

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

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.