Skip to main content
Act-On Software

Moving Form Input Labels Inside Form Inputs

 

Act-On forms do not provide a default option to place the form input labels inside the form inputs. However, this is possible through the custom script support offered in Act-On forms.

You will want to paste the following script within any valid section of the Act-On form editor that is able to accept JavaScript. This script will use the same Act-On form field labels you see in the form editor, but they will be moved inside the form inputs and removed from their default position. You do not need to make any modifications to this script for it to function.

Sections of the Act-On form editor capable of accepting JavaScript:

  • External Analytics Text Area: Accessible in the Settings section of the form editor. This text area will accept any custom code, and is not limited to analytics scripts.
  • Any Rich Text block or Custom Stationery, if your account is using a custom subdomain and you have enhanced JavaScript enabled on your account. Please see the article Using JavaScript in Email Messages, Forms and Landing Pages for more information.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'>
</script>
<script>
// avoid conflicts with prototype library, releasing $ outside of the .ready()
jQuery.noConflict();
jQuery(document).ready(function( $ ) {
// find each .formFieldLabel's text content and copy into placeholder element inside input
$('tr').each(function(){ 
var tr = $(this);
tr.find('.formFieldLabel').each(function(index){
tr.find('.formFieldText, .formTextArea').eq(index).attr('placeholder',($(this).text()));
});
});
// hide form labels unless they are a drop list, radio, or checkbox
$('td.formFieldLabel').hide(); // hide standard text inputs inside table cells
$('.formFieldLabel').siblings('.formFieldText, .formTextArea').siblings('.formFieldLabel').hide(); // hide one-line-text input labels and textarea labels
// Below: placeholder function - jQuery functionality for browsers not supporting "placeholder" input attribute
// @author Brian Reavis <brian@thirdroute.com> / https://github.com/diy/jquery-placeholder
(function($) {
var NATIVE_SUPPORT = ('placeholder' in document.createElement('input'));
var CSS_PROPERTIES = [
'-moz-box-sizing', '-webkit-box-sizing', 'box-sizing',
'padding-top', 'padding-right', 'padding-bottom', 'padding-left',
'margin-top', 'margin-right', 'margin-bottom', 'margin-left',
'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width',
'line-height', 'font-size', 'font-family', 'width', 'height',
'top', 'left', 'right', 'bottom'
];
var setupPlaceholder = function(input, options) {
var i, evt, text, styles, zIndex, marginTop, dy, attrNode;
var $input = $(input), $placeholder;
try {
attrNode = $input[0].getAttributeNode('placeholder');
if (!attrNode) return;
text = $input[0].getAttribute('placeholder');
if (!text || !text.length) return;
$input[0].setAttribute('placeholder', '');
$input.data('placeholder', text);
} catch (e) {
return;
}
// enumerate textbox styles for mimicking
styles = {};
for (i = 0; i < CSS_PROPERTIES.length; i++) {
styles[CSS_PROPERTIES[i]] = $input.css(CSS_PROPERTIES[i]);
}
zIndex = parseInt($input.css('z-index'), 10);
if (isNaN(zIndex) || !zIndex) zIndex = 1;
// create the placeholder
$placeholder = $('<span>').addClass('placeholder').html(text);
$placeholder.css(styles);
$placeholder.css({
'cursor': $input.css('cursor') || 'text',
'display': 'block',
'position': 'absolute',
'overflow': 'hidden',
'z-index': zIndex + 1,
'background': 'none',
'border-top-style': 'solid',
'border-right-style': 'solid',
'border-bottom-style': 'solid',
'border-left-style': 'solid',
'border-top-color': 'transparent',
'border-right-color': 'transparent',
'border-bottom-color': 'transparent',
'border-left-color': 'transparent'
});
$placeholder.insertBefore($input);
// compensate for y difference caused by absolute / relative difference (line-height factor)
dy = $input.offset().top - $placeholder.offset().top;
marginTop = parseInt($placeholder.css('margin-top'));
if (isNaN(marginTop)) marginTop = 0;
$placeholder.css('margin-top', marginTop + dy);
// event handlers + add to document
$placeholder.on('mousedown', function() {
if (!$input.is(':enabled')) return;
window.setTimeout(function(){
$input.trigger('focus');
}, 0);
});
function togglePlaceholderForInput() {
$placeholder.toggle(!$.trim($input.val()).length);
}
$input.on('focus.placeholder', function() {
$placeholder.hide();
});
$input.on('blur.placeholder', function() {
togglePlaceholderForInput();
});
$input[0].onpropertychange = function() {
if (event.propertyName === 'value') {
togglePlaceholderForInput();
}
};
$input.trigger('blur.placeholder');
};
$.fn.placeholder = function(options) {
var $this = this;
options = options || {};
if (NATIVE_SUPPORT && !options.force) {
return this;
}
window.setTimeout(function() {
$this.each(function() {
var tagName = this.tagName.toLowerCase();
if (tagName === 'input' || tagName === 'textarea') {
setupPlaceholder(this, options);
}
});
}, 0);
return this;
};
})(jQuery);
$('input,textarea').placeholder();
// end of function to create "placeholder" on older browsers
});
</script>

Important Notes

  • The form appearance above is without any other custom styling applied. If you want to change the general appearance of the form inputs and labels (such as to increase their size, use custom fonts, add hover-effects, add backgrounds, and so on) see the  article Customizing Form Appearance and Functionality.
  • The field labels will disappear when text is typed into the input, and the labels will re-appear if the typed values are deleted. This works best in modern browsers, and older browser (such as IE 9) should still work but the appearance may be slightly different.
  • If you apply the padding command in the CSS section of the form under the <FORM FIELD STYLES> Text Input field Style block: Example: Padding: 15px; This will render the field names blank ONLY in Firefox. Removing that CSS from that block will take care of that issue for Firefox.
  • This has been tested to work with all standard inputs generated by the Act-On forms feature but may cause trouble with some very specific form layouts. In these cases, please consult your web developer and have them review the reference articles at the bottom of this page.
  • // hide form labels unless they are a drop list, radio, or checkbox
    $('td.formFieldLabel').hide(); // hide standard text inputs inside table cells
    $('.formFieldLabel').siblings('.formFieldText, .formTextArea').siblings('.formFieldLabel').hide(); // hide one-line-text input labels and textarea labels
  • Remove or disable the above line in the script if you would like the labels to not be hidden.