Ontraport Form Embed

Support
#1

Peace~

I am attempting to embed an ontraport form for my newsletter opt-in within the top bar of the navigation. The form is not displaying correctly and ontraport tech support said it is due to my theme altering the code.

Here is the embed code: (the code is there but is not displaying. I tried using comments too.)

<script type='text/javascript' async='true' src='https://app.ontraport.com/js/ontraport/opt_assets/drivers/opf.js' data-opf-uid='p2c156609f1' data-opf-params='borderColor=&borderSize=0px&embed=true&formHeight=142&formWidth=100%&popPosition=mc&instance=380470653'></script>

My website: orangemoonmedia.com

Please let me know if any additional information is needed. Thanks for your help!

#2

Hi There,

Upon checking your website I could see that the form is displaying fine.

Did you want to center it or add some padding?

Thanks.

#3

Thanks for your reply Thai. The form is not displaying correctly. The text, form fields, and submit button should all be on one line going across the top bar. I have attached an image of the form template and how it should appear. Can you please advise on how to achieve this? Thanks for your assistance!

#4

Hello There,

It seems that you have a problem with the third party script you got there. The form is displayed because of the script. The script displays the form using an iframe. Please keep in mind that the source of the script and the contents of this scripts is beyond our control. You might need to contact the creators of the script and ask some assistance from them. They should be able to easily pin point what should be done to accomplish what you have in mind.

Thank you for your understanding.

#5

I did speak to them prior to coming to the themeco support forum. Their tech support team said that the theme is adjusting the way the form is displayed. I know that you are not responsible for third party code. My question was specifically about the theme displaying content placed in the top bar area. There are not controls for that content area so I wanted to make sure that content placed there did not need any special formatting. I was able to play around with it and come up with something I can live with but wanted to find out how that top bar section receives code. Thanks.

#6

Hello There,

Thank you for getting back to us. The topbar content width is set to have a auto width. It will expand whenever the width of its content is wider. Because the with from the script is set with 100%, it does not give the exact correct width. If you want to have something like this:

then please do the following:
1.) please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-topbar .p-info {
    width: 100%;
    float: none;
}

2.) please make use of this content instead:

<script type='text/javascript' async='true' src='https://app.ontraport.com/js/ontraport/opt_assets/drivers/opf.js' data-opf-uid='p2c156609f1' data-opf-params='borderColor=&borderSize=0px&embed=true&formHeight=58&formWidth=100%&popPosition=mc&instance=380470653'></script>

I have set the height of the form at 58 pixels and the width with 100% to make sure that the form will utilize the whole topbar area.

We would loved to know if this has work for you. Thank you.