ReCaptcha Button Misaligned

SOLVE
Highlighted
New Contributor

Hi,

 

When creating my landing page, I noticed that the captcha button is misaligned from my submit button. Any ideas as to how I can edit this in the back-end to that both are aligned?

 

Thank you

 

Screen Shot 2020-08-28 at 12.50.38 PM.png

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
Solution
Top Contributor

Hi Lo,

After looking at the form it is not embedded inside an iframe which is good because it gives you the ability to adjust the styling.

 

Look in the stylesheet sr-base.min.css for the following CSS rule. 

 

.grecaptcha-badge {
margin-left: 180px !important;

 

Change it to this if you want recaptcha centered

.grecaptcha-badge {
margin: 0 auto;

 

Or change it to this if you want to control the alignment by changing the left margin percent value

.grecaptcha-badge {
margin: 0 0 0 45%;

Jacob Lett
Marketing Consultant
Strategic marketing consultant and skilled web designer specializing in the manufacturing industry to increase revenue through driving website leads and brand awareness.

View solution in original post

Reply
0 Upvotes
3 Replies 3
Highlighted
Top Contributor

Would it be possible for you to share a URL of the page with the form? The solution depends on if you are using the prebuilt hubspot form styles or a custom form javascript embed. If it is the later, you would need to make a change to the frontend CSS code to make the adjustment.


Jacob Lett

Freelance HubSpot CMS Developer & Web Designer


bootstrapcreative-horizontal-trim.png

Located in Michigan, USA

Need a custom HubSpot theme or template? 


Jacob Lett
Marketing Consultant
Strategic marketing consultant and skilled web designer specializing in the manufacturing industry to increase revenue through driving website leads and brand awareness.

Reply
0 Upvotes
Highlighted
New Contributor

Hi Jacob,

 

Here is the URL: https://info.buspatrol.com/discovery-form-suffolk-0

 

Thank you

Lo

Reply
0 Upvotes
Highlighted
Solution
Top Contributor

Hi Lo,

After looking at the form it is not embedded inside an iframe which is good because it gives you the ability to adjust the styling.

 

Look in the stylesheet sr-base.min.css for the following CSS rule. 

 

.grecaptcha-badge {
margin-left: 180px !important;

 

Change it to this if you want recaptcha centered

.grecaptcha-badge {
margin: 0 auto;

 

Or change it to this if you want to control the alignment by changing the left margin percent value

.grecaptcha-badge {
margin: 0 0 0 45%;

Jacob Lett
Marketing Consultant
Strategic marketing consultant and skilled web designer specializing in the manufacturing industry to increase revenue through driving website leads and brand awareness.

View solution in original post

Reply
0 Upvotes