Embedded Marketo forms appearing twice

Anonymous
Not applicable
I've embedded a form on a page of the company website, one one page the form is appearing twice even though the code is only on the page once.

Has anyone come across this?
Tags (1)
15 REPLIES 15
Anonymous
Not applicable
Hi Craig
I had met similar issue last year.
My page had one embed <Form>, but two same forms were rendared.
I checked all tag pairs.  eg. <div> </div>
it was fixed.
Anonymous
Not applicable

Can you explain what you mean by "checked all tag pairs"? I'm having the same two-forms problem in a Joomla site and can't figure it out.

Anonymous
Not applicable

Additional info

I created one LP including two forms.

http://pages-demo.ogis-ri.co.jp/formsTwice2.html

Twice x2 = 4 forms are rendered

I don't know why....

SanfordWhiteman
Level 10 - Community Moderator

You have 2 <form> tags in the HTML.

Each time you run loadForm, ​Marketo appends the form inside all matching <form>s. It doesn't check whether the form's HTML fragment already exists.

So the second time you run ​loadForm with the same formid, ​it appends the form again, once to each <form>.  Thus 2 x 2 = 4 forms.

marcom
Level 1

We have an embedded form in two separate containers on our WordPress (Avada) website. One container is the setup/layout for large screens and the second is for medium/small screens. Even though the containers are set to hide and display based on those settings, the Marketo form appears twice... Here's the test website page: https://patientping.com/welcome/

 

Any thoughts?

 

 

Tags (2)
Dave_Roberts
Level 10

Sounds like you're running into one of the issues with this approach to web development - simply creating add'l sections (mobile, tablet, desktop) that have different content or styles isn't really a good way to go about making mobile-friendly websites, even though it looks easy on TV. 

Even when you "hide" content sections they are still there at the code-level which means your mobile-users are usually getting WAY more than they'd need (from a code perspective) for a good mobile-experience. A more "best-practice" approach is to use a mobile-first code base - which means you code everything for mobile and then use media queries for screen sizes to change things up for tablet and desktop which are generally more "capable" of loading larger files quickly. I think this is just the cost of using a tool like Wordpress or a themed plugin to do the development work for you.

 

In this case, it looks like you're running into the same issue Sanford mentioned a little earlier in this thread with the 2 + 2 = 4 forms showing. Because the form is on the page twice, it's loading twice in each container. 

 

One idea to kinda work around this in Wordpress might be to only use 1 form on the entire page (including "hidden" sections) and find a way to put the form in it's own section so it would be independent of the content sections switching on/off based on your screen size.

 

Im not sure if you're able to turn the individual elements inside the row on/off like you can the entire row (section) but if you could, maybe you could build it all into one row and then show/hide different parts of that row around the form "element" (which wouldn't have any on/off stuff)?

marcom
Level 1

Thanks! What's odd is that everything else in the section that's hidden for large screens (or vice versa) EXCEPT the form works...it's just the Marketo form that has the issue...

 

I did try to find a workaround with the form in its own section but based on the layout it wasn't exactly working.

 

If anyone else has any other ideas, please let me know!

 

 

 

 

Dave_Roberts
Level 10

What's odd is that everything else in the section that's hidden for large screens (or vice versa) EXCEPT the form works...it's just the Marketo form that has the issue...

Technically, it's NOT working - hidden elements are still loaded in the DOM so for example a mobile user who loads your page loads all of the hidden sections as well (consuming more data and delaying the load time of your page all the same), they just do not display once they're loaded on the page b/c of the CSS. Here's a stackOverflow question that has some more info about this: https://stackoverflow.com/questions/15565586/css-displaynone-does-it-still-load-all-content-inside-t...

 

This is what's making the form load twice, b/c you do actually have it twice in the DOM even tho "hiding" a section appears to remove it, the way WP and these theme plugins works, it's not actually removing that content, you'd need something more sophisticated like AJAX to handle those types of situations.

It looks like you've got one form on the page now and Im not seeing the double-form issue, but there is some issue with the form overlapping the element on the right side of the page there. You can adjust your form columns, fieldwraps and inputs to a fluid width (100%) rather than a fixed width with some CSS like this:

.mktoForm .mktoFieldWrap, .mktoForm .mktoFormCol, .mktoForm input[type=text], .mktoForm input[type=url], .mktoForm input[type=email], .mktoForm input[type=tel], .mktoForm input[type=number], .mktoForm input[type=date], .mktoForm textarea.mktoField, .mktoForm select.mktoField {
width: 100% !important;
}

This'll adjust the columns, fieldwraps and inputs (except checkbox and radio) to be the same width as the column with the form. You could add this to the form's Custom CSS or somewhere in your CMS that you can add/modify your theme CSS.


Otherwise, I think you're on the right track here  - it looks like you're hiding the image in the right column for mobile and showing a different one above the form instead - that might be the better way to work around the forms here by showing/hiding the content elements rather than the form.

 

SanfordWhiteman
Level 10 - Community Moderator

Pls post a link to the site.  That's how we get things done.

Anonymous
Not applicable

Hi Tim Leverett

"checked all tag pairs"

Check HTML validation error and fix it.

P.S

I tried to cause this issue again for you, but it's difficult today....( ̄◇ ̄;)

Anonymous
Not applicable
@craig Can you send us a link to the page? I would be interested in inspecting your page code and maybe I can help identify the issue that way

 
SanfordWhiteman
Level 10 - Community Moderator
@Craig N if a page has two form containers with the form ID, i.e. <form id="mktoForm_96"></form> then the form will be rendered into both containers.  

(This is true despite the fact that duplicate elements with the same ID are explicitly broken in HTML -- browsers are lenient and may return an array of dupes, depending on how you use the Selectors API.)

So you may want to check the HTML as more than, or as much as, the JS embed code.
Anonymous
Not applicable
Craig,
2 things. First delete the code > Update > Check the page that the form is gone.

Next, Paste the code back (Fresh code from the embed link) > Update > Refresh. Is there 2 or 1 form? Wordpress has a habit of dupping JS. I have seen it happen.

If 2 still exist try swapping between Normal and Lightbox so begin trouble shooting which part of the jQuery may have something to do with it.

Let us know how this works out,

 
Anonymous
Not applicable
It's definitly a Wordpress issue, it's in all browsers. There must be a conflict somewhere.
Josh_Hill13
Level 10 - Champion Alumni
do you have conflicting code on that page?
what browser?