If Known Visitor, Hide Form

[Anonymous]

Most pages on my site I won't want forms. There are some more valuable pieces of content I want to put behind forms, but I don't want to make people submit 20 forms to read my 20 best articles.

I don't really like the if known show custom HTML functionality in forms 2.0 either. Is there a way to hide the form and custom HTML if I get a known visitor? Munchkin already tracks page visits for known visitors, so I'd like to hide the form.

Anybody else feel this pain and solve it?

[Anonymous · Accepted solution]

Hi Eric

If you change HTML to <div></div> at custom HTML editor,show nothing.

[Grant_Booth]

Hi Eric,

Takehiro's answer is definitely the simplest. Alternatively, you could use example #1 at our developer documentation:

Forms 2.0 » Marketo Developers

and add this in an HTML block on the page:

<script>

MktoForms2.whenReady(function (form) {

   // Add an onSuccess handler

  form.onSuccess(function(values, followUpUrl) {

   // Get the form's jQuery element and hide it

  form.getFormElem().hide();

   // Return false to prevent the submission handler from taking the lead to the follow up url

   return false;

   });

});

</script>

[Kenny_Elkington]

This example only applies upon successful submission.  There's a few ways to do it with the API, but Takehiro's is the most elegant one.

[Anonymous]

If the form is embedded on a webpage, divs might have default styles such as padding which might push everything else down, or even background colours which would show a visible, empty "block" on your page where the form would have been. Therefore the following snippet might be preferable:

<div style="display: none;"></div>

[SanfordWhiteman]

Well, if you're going to be precise, that won't suffice, either.  There is still a wrapping FORM and DIV.mktoTemplateBox that could have styles applied as well.  The most complete solution is to set the FORM to { display:none; } by default and then only display it if has the real form elements.  Or have the Known Lead HTML remove the form (and thus itself) from the DOM using JavaScript.

[Anonymous]

Takehiro,

Thank you for the response. The <div></div> approach would totally work if I wasn't using lightbox forms. So would Richard's <div style="display: none;"></div>. Both options return alight variations of this:

It appears I left out some critical information. I have the form set to lightbox and the form loads with the page. The lightbox also loads without the close button on the lightbox because I want to squeeze information for the valuable pieces of content.

Here is the script I am using on my wordpress site powered by Aveda.

<p><script src="//app-sjh.marketo.com/js/forms2/js/forms2.min.js"></script>

<form id="mktoForm_1260"></form>    

<script>MktoForms2.loadForm("http://app-sjh.marketo.com", "***-***-***", 1260, function (form){

var lightbox = MktoForms2.lightbox(form,{onSuccess:null,closeBtn:false}).show();

form.onSuccess(function(){

lightbox.hide();

return false;

});

});

</script></p>

Thanks you.

Eric

[SanfordWhiteman]

What's the actual URL of the page hosting the form?

[Anonymous]

The site is under development and has not been pushed live yet. I did, however just make this page available - Offshore Hull Case Study 

[SanfordWhiteman]

Put this in your Known Lead HTML:

<style type="text/css">

.mktoModal { display: none !important; }

</style>

EDIT: Use this instead in your Known Lead HTML:

<script>

  document.body.className += ' knownLead';

</script>

Then add Custom CSS to the form:

.knownLead .mktoModal {

  display: none;

}