Pre-filled forms | Community
Skip to main content
January 8, 2013
Question

Pre-filled forms

  • January 8, 2013
  • 4 replies
  • 1243 views
Hi All

How do you create pre-filled forms with sample data, which disappear once you click inside the box.(without having to manually delete it).

Hope I made sense :)

Thx
B
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

4 replies

Cecile_Maindron
Level 10
January 8, 2013
do you mean data that gives lead an idea of what do you expect them to write?

January 8, 2013
jQuery.  Any manipulation of the form after it has been rendered on the clients's browser must involve javascript and possibly AJAX for serverside stuff.

Here is a simliar idea
http://stackoverflow.com/questions/558445/dynamically-fill-in-form-values-with-jquery

and then use the the javascript onblur event (the action of clicking into the field) , to erase the value before the lead starts typing into it.

For details
http://www.mkyong.com/jquery/jquery-form-events-examples/

Look at the second example
http://javascript.info/tutorial/focus-blur


Hope this helps
Eric

January 9, 2013
@Cecile - Yes thats what I am trying to do...

Thx
Belmond
January 11, 2013
Just add the following code as custom HTML on the landing page that contains your form and edit the form field IDs to reflect the text you want to display:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
var $ = jQuery.noConflict();

$(document).ready(function() {
                $('input[id]').each(function() {
                                if($(this).val() === '') {
                                                $(this).val($(this).attr('id'));         
                                }
                                
                                $(this).focus(function() {
                                                if($(this).val() == $(this).attr('id')) {
                                                                $(this).val('').addClass('focused');             
                                                }
                                });
                                $(this).blur(function() {
                                                if($(this).val() === '') {
                                                                $(this).val($(this).attr('id')).removeClass('focused');        
                                                }
                                });
                });
});
</script>




Additional information can be found here: https://community.marketo.com/MarketoArticle?id=kA050000000L4JZ&src=comm