embed form styling in wordpress site

SOLVE
New Contributor

Hi

I understand this is a COS help section, but was advised by HS support to post here.

I have a wordpress site with HS forms which are laid out properly. I am developing a new WP site where the HS forms present very differently.

Examples of issues include:

1. any checkbox appears as an unordered list with a disc to the left of each checkbox

2. Labels have no formatting, ie, are showing as standard body text. This creates a form with a bunch of lines of text and the occasional box underneath. There is no distinction between label text, eg, First Name, and help or rich text information.

3. button styling is grey, which is not HS nor my website button styling.

 

In Inspect Element, all of the form text is just treated as body text.

 

Can you please help me understand how to correct the issues?

 

Cheers, Jenn

2 Accepted solutions

Accepted Solutions
Advisor

When embedding the form, be sure to check the "Remove hubspot default styling" box and then you can style the form with your own custom CSS on WordPress using the normal CSS input element selectors or the hubspot classes such as "hs-input" or "hs-submit". If you're having trouble try right clicking on one of the elements and inspect them to see where the styles are coming from.

--
Stefen Phelps
Web Developer / Co-founder
Kelp Creative Agency
Twitter — @stefen
Regular Advisor

Also,

You may want to check out the docs on customizing the embed code http://developers.hubspot.com/docs/methods/forms/advanced_form_options for more advanced options.

 

Reply
0 Upvotes
4 Replies 4
Advisor

When embedding the form, be sure to check the "Remove hubspot default styling" box and then you can style the form with your own custom CSS on WordPress using the normal CSS input element selectors or the hubspot classes such as "hs-input" or "hs-submit". If you're having trouble try right clicking on one of the elements and inspect them to see where the styles are coming from.

--
Stefen Phelps
Web Developer / Co-founder
Kelp Creative Agency
Twitter — @stefen
Regular Advisor

Also,

You may want to check out the docs on customizing the embed code http://developers.hubspot.com/docs/methods/forms/advanced_form_options for more advanced options.

 

Reply
0 Upvotes
Regular Advisor | Gold Partner | HubSpot Certified Trainer

This tool will help you out if you aren't familiar with CSS StyleSheets

Reply
0 Upvotes
Highlighted
Occasional Contributor

Jenn,

  

We've built a plugin for WordPress that extends WP search into HubSpot content, included is also a widget that pulls any number of recent posts from HubSpot. No need for management of HTML snippets from HubSpot

 

This could be another solution as it does not store any HS data in WP, all HS post content is inserted into WP search on the fly.

 

In addition to searching & blogs, we've added forms, ctas, links, and files.

 

Have a look, maybe this will help future issues with WordPress/HubSpot management

 

https://wordpress.org/plugins/hub2word/

 

Would love to hear your feedback.

Reply
0 Upvotes