Embedded Marketo forms appearing twice

[Anonymous]

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]

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]

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?

[Dave_Roberts]

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]

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]

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.