Contact Forms in Wordpress

[#1]

I'm having an issue embeding my contact form into a Wordpress text block/code block. It works fine but it will not show my Rich Text Areas elements. I've got one on top and another one at the bottom of the form, neither of them shows up in wordpress. I've looked everywhere for this but can't figure it out. Can someone help? 

[#2]

Hey @papersoft-dms, can you show me what your code looks like in your WordPress text module? A screenshot, maybe?  I can take two shots in the dark before I see it:

If the rich text elements are in WordPress embedded in the same text module you might try adding <div> and </div> tags before and after your form code.

Another thing I could recommend without seeing your code is make sure you un-check the "include default styling" box when copying your form code out of HubSpot.  You want your WordPress stylesheet to dictate the form's appearance, and it will eliminate conflicts between the stylesheets.

-Trevor

If any of this helps, please accept this as a solution.

[#3]

Hi @trevorjones71, thank you for your reply!

The solution you kindly mentioned are the ones I've found online so far, have tried them and still the Text Area (hubspot element) will not render in wordpress. I have also tried embedding the form code through snippets plugins but it crashed the website accusing syntax errors..

Please see the screenhots below with copied code in wordpress, hubspot preview and what renders in the end.

Thanks

[#4]

Interesting... Is this page live somewhere?  URL?

[#5]

[#6]

@trevorjones71, Yes I do, but it has a different contact form, not a hubspot one.

Please see the last screenshot I posted, after inspecting the code I noticed that wordpress alters it. (sorry I took so long to reply, but I kept gettting errors when trying to submit the post).

[#7 · Accepted solution]

Well there are two very important things missing from your HubSpot form code.

The formID and portalID are both missing from your form.  Is WordPress stripping them out for some reason?  Are they there when you copy the code snippet in HubSpot?  Perhaps you should go back and re-copy the code snippet and paste it in.  Your Portal ID is most likely a six or seven digit number, while the formID will be a long, alpha-numeric string.  Without these items, you're not pulling the correct form from HubSpot.

Also, have you tried using the "Custom HTML" widget instead of the Text Widget?  Honestly either should work, but the custom HTML version is more appropriate to the application.

[#8 · Accepted solution]

Here's an actual example copied from my HubSpot Portal into a text editor: 

[#9]

Hi, @trevorjones71 thanks for your input so far.

I blanked out the form ID, that's why you couldn't see it in the screenshot.

I've tried embedding the form through the widget but I need it to show in one page only and it isn't showing anywhere...

[#10]

Hi @papersoft-dms,

Sorry - I was out on vacation from last Tuesday until today.  It seems like the problem has got to be with your stylesheet in WordPress.  You need to make sure that the style tags used to define your "intro text" and "disclaimer" (my words, not the style sheet tags, which I can't see) are defined in the stylesheet you are using.

If that still doesn't help, I highly recommend using Gravity Forms and the "Hub Spot for Gravity Forms" plugin developed by Big Sea Creative for forms.  I use that combination to solve certain problems with forms on my website, and it works well as an alternative.  

Trevor

[#11]

We've created a plugin for wordpress that helps embed forms with shortcode. It also extends WP search to HubSpot content, adds CTAs, and a few other things.

Have a look and see if this helps you with the embed issue: https://wordpress.org/plugins/hub2word/

[#12]

Hi @frankgeraci! Thanks a bunch for this, it does solve the issues we were facing when embedding our Hubspot forms into WordPress. 

Now, how can I go about formatting the forms in WordPress?

Hope you're able to shed some light on this!

Thanks,
Rui

[#13]

@RuiS, 

Great question, we've added a Custom CSS field to help override styles for now. 

From the WP admin panel, navigate to the plugin settings page, at the bottom of the page you will be able to enter your custom css. 

/wp-admin/admin.php?page=hub2word

Would love to hear other feedback you have on the plugin, we are open to adding/enhancing features.