Using placeholder text within form fields is a great way to make sure your leads know exactly what information needs to be supplied in a certain field.
Lead Gen & CRM enables you to include placeholder text in fields on a Lead Gen & CRM form and within custom fields.
This article will detail how to add and use placeholder text to Lead Gen & CRM forms in the Landing Page Builder.
Article Contents
| Trial | ✓ | |
| Essential | ✓ | |
| Advanced | ✓ | |
| Ultimate | ✓ |
Forms| Administrators | ✓ | |
| Company Managers | ✓ | |
| Marketing Managers | ✓ | |
| Sales Managers | ||
| Salespersons | ||
| Jr. Salespersons |
Enabling Placeholder Text When 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 is a feature that gives the person filling out a form a short hint describing the expected value of a specific form field. |
Note: Constant Contact offers Professional Services to assist with custom coding.
|
|
|
Placeholder text is used to provide instructions on how to fill out a field on a form. 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:
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 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. |
Note: Placeholder text is available only for SharpSpring forms, and not for native forms.
|
|
Adding Placeholder Values to Landing Pages
|
You can add placeholder values to landing pages as necessary. To add placeholder values to a landing page, do the following:
|
Note: Constant Contact offers Professional Services to assist with custom coding.
|
Regarding Field Labels
|
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 |
Note: Constant Contact offers Professional Services to assist with custom coding.
|
|
|
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, do the following:
|
|
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:
|
|
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};
Preventing Duplicate Placeholder Values
|
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 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, do the following:
|
Note: Constant Contact offers Professional Services to assist with custom coding.
|
|
|
|
Example Placeholder Code
The following code is an example of form embed code with placeholder content enabled:
<!-- SharpSpring 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>