Forms Formatting: field labels in the input field | Community
Skip to main content
Karin_Edmondson
Karin_Edmondson
Level 3
June 20, 2013
Solved

Forms Formatting: field labels in the input field

  • June 20, 2013
  • 4 replies
  • 3005 views
I have a requirement that our design team has come up with.  We have a small form in an iframe on our site and they would like the field label to appear in the field area.  I have included a print screen of the form as it was designed.  I search the community and have not been able to find any instructions if this is possible.

Please let me know if you have done this.
Thanks,
Karin

Best answer by
Hi Karin,

Here is one Community article that has some info you may be looking for: http://community.marketo.com/MarketoArticle?id=kA050000000L4JZCA0.  

You also have to be careful because there are a lot of quirks, e.g., browser support, when moving the field labels inside of the form field.  Here are a couple articles that have more information:
  1. viget.com/inspire/making-infield-form-labels-suck-less
  2. viget.com/inspire/making-infield-form-labels-suck-less-2

4 replies

A
Anonymous
Accepted solution
June 20, 2013
Hi Karin,

Here is one Community article that has some info you may be looking for: http://community.marketo.com/MarketoArticle?id=kA050000000L4JZCA0.  

You also have to be careful because there are a lot of quirks, e.g., browser support, when moving the field labels inside of the form field.  Here are a couple articles that have more information:
  1. viget.com/inspire/making-infield-form-labels-suck-less
  2. viget.com/inspire/making-infield-form-labels-suck-less-2
Karin_Edmondson
Karin_EdmondsonAuthor
Level 3
June 21, 2013
Thank you so much for this.  It works perfectly!!
Karin_Edmondson
Karin_EdmondsonAuthor
Level 3
June 21, 2013
Kenny - just one more question.
The name or id of the field do not have a space, such as: FirstName
I would like it to appear as First Name (with a space)
How is that done since these are Marketo default fields.
Thanks again,
Karin
A
Anonymous
June 21, 2013
The below script should allow you to insert a title attribute to the input field and then you can use that as infield label.  I am sure there are other ways to write the below script, but I have tested the below and know that it does work.  Now remember, this is very basic, and the form will submit with these values in those fields if the lead just submits the form.  There are work arounds for this, you'll have to do some Google'ing, as there are many resources.

Replace the current script with this:

<script language="Javascript" src="/js/public/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
// use no conflict mode for jQuery
var $jQ = jQuery.noConflict();
 
// when the page is ready, add title attribute to field
// use field ID, you'll need a line for each field, as seen below.
$jQ(document).ready(function () {
    $jQ('#FirstName').attr('title', 'First Name');
$jQ('#LastName').attr('title', 'Last Name');
$jQ('#Email').attr('title', 'Email');
$jQ('#Title').attr('title', 'Title');
});
 
// use no conflict mode for jQuery
var $ = jQuery.noConflict();
 
// transform title of field into infield label
$(document).ready(function () {
    $('input[title]').each(function () {
        if ($(this).val() === '') {
            $(this).val($(this).attr('title'));
        }
 
        $(this).focus(function () {
            if ($(this).val() == $(this).attr('title')) {
                $(this).val('').addClass('focused');
            }
        });
        $(this).blur(function () {
            if ($(this).val() === '') {
                $(this).val($(this).attr('title')).removeClass('focused');
            }
        });
    });
});
</script>
Terms & ConditionsAccessibility statement

Loading footer...