CMS Development

egomezPCV
Participante

How to Get Embed Code to Display Correctly in Body of WordPress Page

Hi, 

 

I'm using WordPress and I'm trying to embed our lead generating content form inside of a table to control how much space the embed code is taking up, and to display it where site visitors can easily see it and fill it out.  I am using the free version of the Marketing tools. 

 

webinar-hubspot-capture.PNG

I know to add "target: post-####" to get the embed code to appear within the body of the WordPress post. However, it's getting it to work inside of a table and ajusting the size and placement that has been challenging. So far entering in the target code just makes it sit at the bottom of the post, despite the script being located between paragraphs of copy.

 

webinar-hubspot-capture2.PNG

Pasting the Hubspot embed code for the form within a table to get the design right only results in the script just appearing inside of a box on the actual post page. Like in the example below.

 

webinar-hubspot-capture3.PNG

 

Is there a way to organize the embed code within a table or be contained within it's own div so that the size and placement is correct? Any help would be appreciated, I'm trying to have this ready for presenting to Executives tomorrow morning! >_<

 

11 Respostas 11
tjoyce
Especialista reconhecido(a) | Parceiro Elite
Especialista reconhecido(a) | Parceiro Elite

How to Get Embed Code to Display Correctly in Body of WordPress Page

@egomezPCV - try https://forms.belch.io to style this HubSpot form. If you're still having trouble after pasting the embed code from belch into your wordpress site, shoot us a link to the page so we can give you some more precise code.

 

egomezPCV
Participante

How to Get Embed Code to Display Correctly in Body of WordPress Page

Thank you, that did help. @tjoyce

Now the only two things I would like to edit is getting the "First name" and "Last name" columns to be sitting next to each other on the same line. 

 

Also, is there a way to get the form to not be centered directly on the page? I would like for it to be aligned on the left. 

 

Link is here

https://www.pcvmurcor.com/getthedealdone

 

 

webinar-hubspot-capture4.PNG

0 Avaliação positiva
tjoyce
Especialista reconhecido(a) | Parceiro Elite
Especialista reconhecido(a) | Parceiro Elite

How to Get Embed Code to Display Correctly in Body of WordPress Page

@egomezPCV - A few things here:

1. To get your first name and last name fields next to each other, just go to your hubspot portal and edit the form... you can drag the form fields to be next to each other instead of stacked on top

2. To left align your form, add the following CSS to your page

<style>.embed-form-super-wrapper{margin:0!important;margin-top:30px;margin-bottom:30px;}</style>

3. Did you know that if you go back to the belch form styler and login with HubSpot, you will be able to style the colors and fonts of that form? You can only do this if you connect your HubSpot portal within Belch.

egomezPCV
Participante

How to Get Embed Code to Display Correctly in Body of WordPress Page

@tjoyce

 

Thanks for your help!

 

yes, I know that i can link my Hubspot with the Belch form site. I currently do not have permissions to integrate my account with Belch.

 

My employer now wants an image and text within a Table, when I enter in the "padding-top" code, it does not accept it. I don't know why it is when I drop an image into the table that it all of a sudden pushes the text on the left of the box down. 

 

webinar-hubspot-capture5.PNG

 

When I look at the inspect option in chrome it says that there padding-top of 13px. It's driving me crazy trying to figure out how to get the text and image to align together. >_<

 

 

tjoyce
Especialista reconhecido(a) | Parceiro Elite
Especialista reconhecido(a) | Parceiro Elite

How to Get Embed Code to Display Correctly in Body of WordPress Page

@egomezPCV - That's because the closest <tbody> element has a vertical-align of baseline set. You will have to override that.

baseline.png

egomezPCV
Participante

How to Get Embed Code to Display Correctly in Body of WordPress Page

@tjoyce

 

Thanks a lot for helping me through this! I really appreciate your patience and guidance

 

I am trying to use it on this page. I'm not sure where to enter the code for the t body or if I am typing it incorrectly. It doesn't seem to accept it. 

 

 

webinar-hubspot-capture7.PNG

 

Also, do you know how to get the hubspot script code for the form to stretch across the page in a more rectangular shape? The Belch form online does not seem to work in making the form more rectangular. 

 

webinar-hubspot-capture6.PNG

 

Thank you again!

 

0 Avaliação positiva
tjoyce
Especialista reconhecido(a) | Parceiro Elite
Especialista reconhecido(a) | Parceiro Elite

How to Get Embed Code to Display Correctly in Body of WordPress Page

@egomezPCV - I see the page is broken. The embed code was added through the html section of the wysiwyg in wordpress instead of the TEXT section. If you can let me know when you fix that so I can look at the page again.

0 Avaliação positiva
egomezPCV
Participante

How to Get Embed Code to Display Correctly in Body of WordPress Page

I actually ended up installing Elementor to be able to edit the Webinar pages better. I wasn't sure if it would work with this template since it's from 2012. 

 

I like the layout for this page with the video embedded. 

 

It is when I try to paste the script code for the Hubspot form in the Get the Deal Done landing page that it will not work.  So frustrated that Elementor will not accept the script code!

0 Avaliação positiva
tjoyce
Especialista reconhecido(a) | Parceiro Elite
Especialista reconhecido(a) | Parceiro Elite

How to Get Embed Code to Display Correctly in Body of WordPress Page

@egomezPCV - Elementor has an HTML Widget found here under Advanced. Also, WPBakery is the best page builder for wordpress on the market. Slightly bigger learning curve but it does a really good job.

0 Avaliação positiva
egomezPCV
Participante

How to Get Embed Code to Display Correctly in Body of WordPress Page

Thank you. I will look into WPBakery, I have never used it. 

 

Also, do you happen to know how to get the form and text to stretch out to a more rectangular shape on this page

 

webinar-hubspot-capture6.PNG

0 Avaliação positiva
KMcD
Membro

How to Get Embed Code to Display Correctly in Body of WordPress Page

I cannot get this to display correctly at all on our Wordpress website...????

0 Avaliação positiva