Pre-filled forms

[Anonymous]

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

[Cecile_Maindron]

do you mean data that gives lead an idea of what do you expect them to write?

[Anonymous]

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

[Anonymous]

@Cecile - Yes thats what I am trying to do...

Thx
Belmond

[Anonymous]

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