4 Replies Latest reply on Jan 11, 2013 10:04 AM by 27128

    Pre-filled forms

      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
        • Re: Pre-filled forms
          Cecile Maindron
          do you mean data that gives lead an idea of what do you expect them to write?

          • Re: Pre-filled forms
            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

            • Re: Pre-filled forms
              @Cecile - Yes thats what I am trying to do...

              Thx
              Belmond
              • Re: Pre-filled forms
                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