Skip to main content
Jenn_DiMaria2
Jenn_DiMaria2
Level 10
November 27, 2013
Question

Sticky Forms on Landing Pages

  • November 27, 2013
  • 2 replies
  • 1622 views
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
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

2 replies

A
Anonymous
November 27, 2013
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();
};

 
A
AlokRa4
Level 10
November 28, 2013
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
Terms & ConditionsAccessibility statement

Loading footer...