embed form styling in wordpress site

[JennPFM]

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

[stefen · Accepted solution]

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.

[frankgeraci]

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.

[tjoyce]

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

[stefen · Accepted solution]

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.

[ndwilliams3 · Accepted solution]

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.