Table of Contents

Referral Page (Classic Form)

Amber Liggett Updated by Amber Liggett

With the Form Referral capture option, you can capture Referral information in an easy to use, customizable form. The form option is ideal for businesses in need of a quote or contact form to follow up with Referrals. Review all of our Referral Page options here.

In this article you will learn:

  • How to customize your page text, layout and images.
  • Add custom options to your form page.
  • Add custom form fields and form validation options.
Using our new Referral Page 2.0? Click here to learn more about creating and styling using our new Web Page Builder!

How to Customize your Form page

> Navigation: Main Admin Page > Programs > Select Program > Edit Referral Page (or click here) > Page

Page Options allow you to customize all aspects of your Form page. Page Options are divided into five sections: Page Text, Page Layout, Images, More Info/About Us and Advanced.

Page Text

  • Title: Displays in large text on all pages for this campaign. This is typically where the member recommendation is displayed. You can choose to have the title displayed as a quote by checking the 'Display like a quote' checkbox.
  • Text (optional): Optional text displayed below the title. You can choose to have the text aligned to the center or aligned to the left.
  • Offer Text to Referral: This is the description of the offer/program.
  • Directions (optional): If there are any additional directions, place them here. 

Page Layout

  • Wide Double Column: Wide double column displays information horizontally and places the image and offer text side by side. By default, programs will utilize wide double column.
  • Narrow Single Column: Narrow single column places the offer text above the image, and is displayed vertically. 
  • Hide Center Content: No content displayed in the middle, but the rest of the form will be unaffected.
  • Display print coupon button:  Choose the ‘yes’ or ‘no’ button. If ‘yes’ is selected then the print coupon button will display on the page.
  • Text displayed next to member code: This text will display to the left of the Referral Code.
  • Display a code to referral: You choose whether or not to display a code on the Referral Page. If using a code, you can choose between displaying the Member’s code or a static coupon code (shown). If a static code is selected then a text box will appear to enter your code of choice.
  • Terms and Conditions: Choose whether or not to display the terms and conditions on the Referral Page.


Header Image: This is an optional image that will display above the page text (including title) but below the site header, if applicable. (Recommended size: 600x300 px)

Center Image: This is the image that displays to the left or below your offer text, depending on the page layout you choose. This image is optional and can be removed. (Recommended size: 600x300 px)

More Info/About Us Section

The More Information/About Us section can display either below or to the right of the form. This section displays more information about your business. By default, this section will not be displayed.

  • Display "More Info" section?: Determine whether or not you want to display the More Information/About Us section on your form page.
  • Location: Where will the section display? It can be placed below or to the right (displayed) of the form page.
  • Title & Text: Edit the title and text of the section. This is what will display on the form page.


The Referral Page Inject feature lets you add HTML and JavaScript directly into the bottom of your page, inside a body tag. This can be used to insert tracking and other external scripts. For more information, read our article on Using External Tracking and Scripts.

Referral Rock is updated on a regular basis, and classes and IDs are subject to change with Style updates. Please be sure to maintain your scripts to ensure functionality.

Create your Form

> Navigation: Main Admin Page > Programs > Select Program > Edit Referral Page (or click here) > Form

Every form automatically requests the referral's name and email address, but you can select some other commonly used fields such as phone number and "Best Way to Reach".  Additionally, you can edit prompt text and form directions, along with a few other various items. In addition to this, you also have the ability to customize the Page Options to further personalize your form. Edit your form by selecting the Form button. 

  • Prompt: The prompt is the title of the form.
  • Form Directions: This area is great when used as an explainer.
  • Full Name Label: This area is used to track user by name. 
  • Company Field: This can be hidden, optional, or required. If displayed will prompt user to add their company name.
  • Email Address Label: This will prompt user to add their email address. This field can stay optional or be marked as required. 
  • Display Phone Number Input: This is an optional field. You can either hide this text box altogether, make it optional, or required. Only if required is marked the Referral will be forced to input a phone number.  
  • Best Way To Reach: If enabled, the Referral will be able to choose a preferred method of contact from the drop-down list.

Custom Fields

You can add up to 5 custom fields to any form.  These fields will be stored with the Referral and also be sent to you in the Referral notification email.  Two of the fields can be custom drop downs and the other fields can be a single or multi-line text field.

  • Use Custom Fields: Option to select yes or no. 
  • Display Custom Dropdowns: If you select “yes” for these options you will be able to create a custom dropdown box - with a title and drop down choices. You can add up to 2 dropdown menus.
  • Display Custom Textboxes: Similar to the dropdowns, these text boxes are optional. There is the choice to turn any or all of these custom textboxes on. If “yes” is selected for one of the text boxes, there is the option to choose between a single line textbox or a multiline textbox. You can add up to 3 dropdown menus.

Form Completion Options

After a Referral completes a form, you have two options for how you can handle a completed form. You can have them go to a default thank you page, or you can have them redirect to a page of your choice. This is also where you can edit the form complete button. 

  • Form Button Text: This text will display in the button the Referral will click upon completion of the form.
  • Complete Form Action: If enabled, this allows you to immediately redirect a Referral once the form has been completed.
  • Thank You Page (Display Complete Page): This page is the default thank you page. You can customize the form complete page with images and text.
  • Redirect: You can redirect the user to a specific URL. You can add URL parameters to the URL to keep them intact. 
  • Form Complete Message: This test will display as a form submittance confirmation to a Referral if the Form Redirect is not enabled.

Form Validation Options

Custom form fields have additional validation options that can be applied:

  • Required: This validation option is available for all custom field options. If a field is required, the Referral will not be able to advance without satisfying the requirements for that field. In addition to this, you can also specify a minimum and maximum amount of characters for each required field. If you don't want character limits on form fields, set the minimum and maximum fields to 0.
  • Digits Only: Only digits can be entered into the field. This can be combined with the required validation option. A minimum and maximum character value can also be set.
  • Minimum Characters: Set the minimum character amount. The text field will be flagged if the user goes below this amount.
  • Maximum Characters: Set the maximum character amount. The text field will be flagged if the user goes above this amount.
  • Date Only: A date must be entered into the field. Dates must follow the mm/dd/yyyy format. This can be combined with the required validation option.  A minimum and maximum character value can also be set.
Be sure to test your form validation options for conflicts. For example, requiring a date field and setting the maximum amount of characters to 3 cannot be satisfied without violating a validation rule. The Referral will NOT be able to move forward and submit the form.

How did we do?

Referral Page (Overview)

Referral Page (Classic Landing)