Sticky Forms on Landing Pages

[Jenn_DiMaria2]

Hello!  I'm working on adding an infographic to one of our landing pages.  Of course, the image is quite large and I want to make sure our form stays visible.

I've looked at the Javascript and CSS involved to make the form sticky, but nothing achieves the desired result.  Has anyone been able to do this before?  If so, can you share how it's been done?

Thanks!
Jenn

[Anonymous]

One possible solution is to override the onclick event of the link, so that you can submit the form to the server with additional hidden information that specifies which link was clicked.

Another solution is to use Ajax to retrieve additional information from the server so that you can update parts of the page without needing to reload the entire page.

It will b something like: (not fully tested!)

Form

====

<form id="aform" method="post">

    <p><label>A label: <input name="aname" value="a value"></label></p>

    <p>

        <input type="hidden" name="link">

        <input type="submit" name="submit" value="Submit">

    </p>

</form>

Link

====

<a id="alink" href="#ImALink">A link</a>

JavaScript

==========

document.getElementById('alink').onclick = function () {

    // the this keyword is a reference to the clicked-on link

    var form;

    form = document.getElementById('aform');

    form.elements.link = this.href;

    form.submit();

};

[Alok_Ramsisaria]

Hi

There are two approaches by which you can achieve this.

1. When you drag and drop the form in Marketo, it sets the position of the form as Absolute. You can change this to a fixed position in the code, as important to override absolute position.

2. You can use a double-div method bring the form our of Marketo's div and then you can position the form anywhere on the landing page.


Regards
Alok