Very Custom Form Styling

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!

Hi,

It looks like you figured it out?

On 9/17/2022 at 4:29 AM, tuanphan said:

Hi,

It looks like you figured it out?

 

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.

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

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

Hi,

I see your site - mockup already same

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.

#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!

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!

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

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.

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

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.

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?

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

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!

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!

2 minutes ago, Ziggy said:

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

I so appreciate the help! If you have a Venmo or Paypal, I'd love to buy that coffee for you!