Hola! ¡Tenemos nuestra Comunidad en Español!

Form HTML formatting is off

SOLVE
Highlighted
Regular Contributor

Hi, when pasting my Hubspot form HTML into Shopify the formatting is off. See here: https://www.screencast.com/t/ZiidECSs9AoP

 

Anyone know how I can alter to have the field names near the field boxes? 

Thanks!

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Community Thought Leader

Hey @Brandy13

 

Try adding this CSS to only impact that form instance.

#hbspt-form-1528756626623-6602667311 {
  max-width: 70%;
  text-align: center;
  margin: 0 auto;
}

 

Try adding this CSS for .hs-button.large.primary

input [type = "submit"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: #ffffff;
  background-color: #ef4347;
  background-image: none;
}

You should find the main css file named theme.scss.liquid in the Assets section. These temporary fixes will clean things up right away. However, you'll want to do a more thorough job to make the form match your site better.

 

Ask the guys at Clean Themes for premium theme support. They may just bang it out for you in a few minutes if you tell them you're a HubSpot customer. Can't hurt to ask. Smiley Wink

Hope that helps.

 

Best,
Frank

 

MFrankJohnson-dot-com-HubSpot-Community-banner-gif-v20190817

Reply
0 Upvotes
4 Replies 4
Community Thought Leader


2000px-Ok_sign_font_awesomeDoes my post help answer your question?

Help the Community by marking it as SOLVED

 

Q: [HubSpot ] form HTML formatting is off [on Shopify page]

 

Short A: You're gonna wanna control the form appearance on Shopify using CSS.

 

Longer A:

Would help to know what Shopify theme you're using and to see a link to your page.

 

Just sayin.

 

Best,
Frank

Shopify Partner

share-on-Linkedin-Button-75x19.png 


Your Remote HubSpot Partner

www.MFrankJohnson.com

 

Remember to include @MFrankJohnson in your message if you'd like me to reply.

Hope that helps.

 

Best,
Frank

 

MFrankJohnson-dot-com-HubSpot-Community-banner-gif-v20190817

Regular Contributor

Thanks for the reply. @MFJLabs

 

Here's a link to the "live" Shopify page. See form in the middle of the page. 

https://teamzealios.com/pages/gam?hv=kwyav

 

I'm using the Shopify Canopy theme. 

 

Reply
0 Upvotes
Community Thought Leader

Hey @Brandy13

 

Try adding this CSS to only impact that form instance.

#hbspt-form-1528756626623-6602667311 {
  max-width: 70%;
  text-align: center;
  margin: 0 auto;
}

 

Try adding this CSS for .hs-button.large.primary

input [type = "submit"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: #ffffff;
  background-color: #ef4347;
  background-image: none;
}

You should find the main css file named theme.scss.liquid in the Assets section. These temporary fixes will clean things up right away. However, you'll want to do a more thorough job to make the form match your site better.

 

Ask the guys at Clean Themes for premium theme support. They may just bang it out for you in a few minutes if you tell them you're a HubSpot customer. Can't hurt to ask. Smiley Wink

Hope that helps.

 

Best,
Frank

 

MFrankJohnson-dot-com-HubSpot-Community-banner-gif-v20190817

Reply
0 Upvotes
Regular Contributor

@MFrankJohnson Thank you!!

Reply
0 Upvotes