Lead Capture Tools

papersoft-dms
Miembro

Contact Forms in Wordpress

resolver

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 Me gusta
2 Soluciones aceptadas
trevordjones
Solución
Asesor destacado | Partner nivel Diamond
Asesor destacado | Partner nivel Diamond

Contact Forms in Wordpress

resolver

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.

Ver la solución en mensaje original publicado

0 Me gusta
trevordjones
Solución
Asesor destacado | Partner nivel Diamond
Asesor destacado | Partner nivel Diamond

Contact Forms in Wordpress

resolver

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.

Ver la solución en mensaje original publicado

0 Me gusta
18 Respuestas 18
frankgeraci
Miembro | Partner nivel Gold
Miembro | Partner nivel Gold

Contact Forms in Wordpress

resolver

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
Participante

Contact Forms in Wordpress

resolver

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 Me gusta
frankgeraci
Miembro | Partner nivel Gold
Miembro | Partner nivel Gold

Contact Forms in Wordpress

resolver

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

Contact Forms in Wordpress

resolver

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 Me gusta
RuiS
Participante

Contact Forms in Wordpress

resolver

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 Me gusta
FMedina8008
Miembro

Contact Forms in Wordpress

resolver

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 Me gusta
RuiS
Participante

Contact Forms in Wordpress

resolver

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 Me gusta
FMedina8008
Miembro

Contact Forms in Wordpress

resolver

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 Me gusta
frankgeraci
Miembro | Partner nivel Gold
Miembro | Partner nivel Gold

Contact Forms in Wordpress

resolver

@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
Asesor destacado | Partner nivel Diamond
Asesor destacado | Partner nivel Diamond

Contact Forms in Wordpress

resolver

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 Me gusta
papersoft-dms
Miembro

Contact Forms in Wordpress

resolver

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 Me gusta
trevordjones
Asesor destacado | Partner nivel Diamond
Asesor destacado | Partner nivel Diamond

Contact Forms in Wordpress

resolver

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

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

0 Me gusta
papersoft-dms
Miembro

Contact Forms in Wordpress

resolver

@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 Me gusta
trevordjones
Solución
Asesor destacado | Partner nivel Diamond
Asesor destacado | Partner nivel Diamond

Contact Forms in Wordpress

resolver

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 Me gusta
trevordjones
Solución
Asesor destacado | Partner nivel Diamond
Asesor destacado | Partner nivel Diamond

Contact Forms in Wordpress

resolver

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 Me gusta
papersoft-dms
Miembro

Contact Forms in Wordpress

resolver

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 Me gusta
trevordjones
Asesor destacado | Partner nivel Diamond
Asesor destacado | Partner nivel Diamond

Contact Forms in Wordpress

resolver

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 Me gusta
papersoft-dms
Miembro

Contact Forms in Wordpress

resolver

alteredCode.PNG

0 Me gusta