A Few Form Styling Questions

[NikkiG]

Hi there, I've got a few form styling questions that are probably simple questions, but I'd prefer not break anything today, so I thought I' just jump on here and ask those who are much smarter than myself. 🙂 

1) How do I change the color of the fields? 

2) How do I decrease the space between the field label and field itself? 

3) How do I style the inline thank you message? 
4) How do I resize the captcha for mobile? (see screenshot)

[JetEdge]

Indeed the .hs_recaptcha class name was the only thing that affects the element. 

This snippet may help others achieve a more low-profile, flat look (eg: `border-radius` / `max-width` / `overflow:hidden` will help hide that ugly drop shadow) :

.hbspt-form .hs_recaptcha {
  transform:scale(0.75);
  -webkit-transform:scale(0.75);
  transform-origin:0 ;
  -webkit-transform-origin:0;
  border-radius: 10px !important;
  overflow: hidden !important;
  opacity: 0.55 !important;
  margin: 0 auto 0.15rem 0 !important;
  max-width: 16rem !important;
}

[tjoyce]

If you get stuck again with your form design, try this tool, it might be faster than hand coding the CSS.

[TRooInbound · Accepted solution]

Hi @NikkiG,

Nice to see you again! how are you? and what's plan for Christmas party?

We are waiting for your invitation to join you. 

So now go for your question answer,

here I am given you CSS targeted class name and hope you write related CSS syntax with using this class names,

1) How do I change the color of the fields? 

.hs-form-field > label {
	color:red
}

2) How do I decrease the space between the field label and field itself? 

.hs-form-field > label {
    display:block;
	line-height:normal;
	margin-bottom:0;
	padding-bottom:0
}

3)  How do I style the inline thank you message? 

.submitted-message {
    font-size:24px;
	line-height:30px;
	color:red;
}

4) How do I resize the captcha for mobile? (see screenshot)

.hs_recaptcha {
    transform:scale(0.77);
	-webkit-transform:scale(0.77);
	transform-origin:0 ;
	-webkit-transform-origin:0;
}

Hope this help! 

Did my post help answer your query? Help the Community by marking it as a solution.

Team TRooInbound

[KimberlyO]

Hi 

I implemented your #3 for the Thank you message CSS with a few modifications but it does not seem to work. Any guidance?  

.submitted-message {
   font-size: 24px;
   line-height: 30px;
   color: #3e3e3e;
}

Thanks

[KimberlyO]

Never mind your code work....

It took clearing my cookies and cache to see it work properly.

[NikkiG]

Hi @TRooInbound - 

Wow! I'm SO sorry! I thought I replied to this LONG ago! I definitely remember typing a whole response and everything! 

Thank you so much, as always for your help! I implemented everything except #1. I'm looking to change the actual field itself, not the label. See example below. Obviously, I don't want it to be red, just used a contrasting color. I asked support and their suggestion was to ask the community. 🙂 

So sorry again for the lack of response! I hope you had happy holidays and your new year is going great so far!