Lead Capture Tools

papersoft-dms
Member

Contact Forms in Wordpress

SOLVE

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? 

0 Upvotes
2 Accepted solutions
trevordjones
Solution
Key Advisor | Diamond Partner
Key Advisor | Diamond Partner

Contact Forms in Wordpress

SOLVE

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.

- Trevor
If my post solves your problem, please accept it as a solution.

View solution in original post

0 Upvotes
trevordjones
Solution
Key Advisor | Diamond Partner
Key Advisor | Diamond Partner

Contact Forms in Wordpress

SOLVE

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

- Trevor
If my post solves your problem, please accept it as a solution.

View solution in original post

0 Upvotes
18 Replies 18
frankgeraci
Member | Gold Partner
Member | Gold Partner

Contact Forms in Wordpress

SOLVE

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/

RuiS
Participant

Contact Forms in Wordpress

SOLVE

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

0 Upvotes
frankgeraci
Member | Gold Partner
Member | Gold Partner

Contact Forms in Wordpress

SOLVE

@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.

FMedina8008
Member

Contact Forms in Wordpress

SOLVE

Hi @RuiS !

 

I installed you plugin howevere it does not connect to my hubspot account even though I have authorized the access, it reloads the same page again, asking to connect.

 

Any light you could shed on how to fix this?

 

Thank You

0 Upvotes
RuiS
Participant

Contact Forms in Wordpress

SOLVE

Hi @FMedina8008 !

I'm not sure but I'll give it a try.

Let's go through a few steps:

1. On your plugin configuration screen (inside wp) you should see this:

'Connected to: hubspot ID'

hub2word.JPG

 

2. On Hubspot » Settings » Integrations » Apps, you should see the following:

hub2word-hs-integration.JPG

 

Can you confirm the above?

 

Thanks

0 Upvotes
FMedina8008
Member

Contact Forms in Wordpress

SOLVE

Thank you for your fast response!

 

This is what I am seeing.

 

Screen Shot 2019-03-21 at 11.59.39 AM.png

 

Once I click on it and accept the integration, the page  loads again exactly the same without the integration.

0 Upvotes
RuiS
Participant

Contact Forms in Wordpress

SOLVE

Hi @FMedina8008 

 

Regarding the screenprint you just sent - are you seeing this in WP or Hubspot?

 

Have you given permission or connected in Hubspot?

0 Upvotes
FMedina8008
Member

Contact Forms in Wordpress

SOLVE

Yes I am using the plugin in WP, after I accepted the conection through HS, the page reloads but it does not connect, I get this same page again.

0 Upvotes
frankgeraci
Member | Gold Partner
Member | Gold Partner

Contact Forms in Wordpress

SOLVE

@FMedina8008 Just for clarification - when you click connect, you are sent to HubSpot, then you click to authorize and are returned to WordPress and the account is not connected?

 

Are there any error messages?

trevordjones
Key Advisor | Diamond Partner
Key Advisor | Diamond Partner

Contact Forms in Wordpress

SOLVE

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.

- Trevor
If my post solves your problem, please accept it as a solution.

0 Upvotes
papersoft-dms
Member

Contact Forms in Wordpress

SOLVE

Hi @trevordjones, 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.

 

code-block.jpghubspot.jpgwordpress-render.jpg

 

Thanks

0 Upvotes
trevordjones
Key Advisor | Diamond Partner
Key Advisor | Diamond Partner

Contact Forms in Wordpress

SOLVE

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

- Trevor
If my post solves your problem, please accept it as a solution.

0 Upvotes
papersoft-dms
Member

Contact Forms in Wordpress

SOLVE

@trevordjones, 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).

 

0 Upvotes
trevordjones
Solution
Key Advisor | Diamond Partner
Key Advisor | Diamond Partner

Contact Forms in Wordpress

SOLVE

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.

- Trevor
If my post solves your problem, please accept it as a solution.

0 Upvotes
trevordjones
Solution
Key Advisor | Diamond Partner
Key Advisor | Diamond Partner

Contact Forms in Wordpress

SOLVE

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

- Trevor
If my post solves your problem, please accept it as a solution.

0 Upvotes
papersoft-dms
Member

Contact Forms in Wordpress

SOLVE

Hi, @trevordjones 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...

0 Upvotes
trevordjones
Key Advisor | Diamond Partner
Key Advisor | Diamond Partner

Contact Forms in Wordpress

SOLVE

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

- Trevor
If my post solves your problem, please accept it as a solution.

0 Upvotes
papersoft-dms
Member

Contact Forms in Wordpress

SOLVE

alteredCode.PNG

0 Upvotes