Using Placeholder Text in Form Fields

Tip: Are you looking for information about Constant Contact’s Email and Digital Marketing product? This article is for Constant Contact’s Lead Gen & CRM product. Head on over to the Email and Digital Marketing articles by clicking here. Not sure what the difference is? Read this article.

Enabling Placeholder Text Using Form Embed Codes

When using a form on your website, you may find yourself needing to include placeholder text for your fields. Placeholder text gives the person filling out the form a short hint or instructions describing the expected value of a specific form field. For example, a field may have a statement similar to the following: Click here to enter your name.

In order to enable placeholder text for a Lead Gen & CRM form, you must add the following line of code to your Lead Gen & CRM form embed code:

ss_form.hidden = {'_usePlaceholders': true};

Note: Constant Contact offers Professional Services to assist with custom coding.

After enabling placeholders in your embed code, placeholder text is displayed within the input box. By default, the field label is used for the placeholder text. 

You can update the field label and placeholder simultaneously by clicking into and modifying the text box for each field included in your form. Both the label and placeholder will display the updated text with whatever is entered into this input box.

Adding Placeholder Values to Landing Pages

You can add placeholder values to landing pages as necessary.

To add placeholder values to a landing page, create or edit a form and add placeholder text to each of your form fields, as described in the section above.

Then, create or edit a landing page and add the form with placeholder text to your landing page. Click the Use Placeholders checkbox in the Form Settings panel.  

Displaying Placeholders Instead of Field Labels

Note: Constant Contact offers Professional Services to assist with custom coding. 

If you would like to use placeholders rather than labels, you can either change a setting in the Visual Form Styler or edit your CSS.

If you are editing your CSS, then after adding the embed code to your form, set the labels in your CSS page to display: none; for text input fields. If you do not, the labels will show up twice.

However, if you are using the Visual Form Styler, then CSS is not needed to hide the original labels.

To hide labels in the Visual Form Styler, create or edit a form:

1. Click the Styles tab.
2. Click the Visual Styler tab.
3. Click the Label menu.
4. Select Hide from the Display drop-down menu.
5. Click Save Changes.
   
   
    

Placeholder Text and Custom Fields

For custom fields, you may want the field label to remain the same and have the placeholder text display an example of what the lead should input into the form field. Lead Gen & CRM provides the functionality to accomplish this within the custom field manager. While creating or editing a custom field, you will see an input labeled Placeholder. By inserting text into this field, the input value will override the field label text that would normally be displayed in the placeholder for that field on the form.

Once placeholders are enabled and the field labels and custom field placeholder text are set, the form will display a field label that differs from the placeholder text, giving you the opportunity to give an example input for a custom form field.

Placeholder text can be used internally within the Contact Manager. All placeholder text input in the Custom Field Manager will also display when you view the field in Contact Manager. This allows Lead Gen & CRM users to understand the expected purpose of a custom field if the label is not self-explanatory.

The placeholder field is available for the following custom field types:
 

• Text input
• Text area
• Drop-down select
• Country
• States

Passing Hidden Custom Fields

If you are passing a hidden value through with your form, you can add a key-value pair in your embed code. The example below maps the hidden Company field with the Acme Co. value:

ss_form.hidden = {'Company': 'Acme Co.', '_usePlaceholders': true};
 

Example Placeholder Code

The following code is an example of form embed code with placeholder content enabled:

<!-- Constant Contact Form for (your form's name here) -->
<script type="text/javascript">
 var ss_form = {'account': 'yyyyyyyyyyyyyyy', 'formID': 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'};
 ss_form.width = '100%';
 ss_form.domain = 'app-zzzzzzzzzz.marketingautomation.services';
 ss_form.hidden = {'_usePlaceholders': true};
 // ss_form.target_id = 'target'; // Optional parameter: forms will be placed inside the element with the specified id
 // ss_form.polling = true; // Optional parameter: set to true ONLY if your page loads dynamically and the id needs to be polled continually.
</script>
<script type="text/javascript" src="https://koi-zzzzzzzzzz.marketingautomation.services/client/form.js?ver=2.0.1"></script>

Did this article answer your question?