Referral Page (Web Page Builder)

With Referral Rock’s new Referral Page builder, you can now create beautiful forms and landing pages to make a great first impression on your referrals. 

Still on our classic referral page? To preview the newest version, click on the Check it out! button at the top of the Referral Page in your Program Editor. We will not make your new page live until you publish your new page and hit the "Switch to 2.0" button.

When you navigate to the Referral Page in the Program Editor, you will have the option to choose between a Web Page or a Redirect Referral Page.

  • Web Page - Build a Form or Landing page for your referrals within Referral Rock using the Page Builder
  • Redirect - Redirect your referrals to the site of your choosing 

This article will walk you through how to use the new Page Builder to build out Form and Landing web pages. 

Page Builder 

Choose Template

To begin building your referral page, choose a template as a starting point. You can change your template by selecting the 'Change Template' button at the bottom of the screen.

Hovering over the template name and selecting the view icon that appears to the left displays that template in a new tab.
Form

Form templates allow you to create a Referral Rock hosted form to easily collect referrals' information.

Call-to-Action Landing Pages

These templates act as a landing page that will give referrals more information about your organization and offer, and then redirect to another page through call-to-action button(s).

Form Edit

Each Form Template includes a pre-built standard form. To edit the form, select the Form Edit button at the bottom of the page.

Fields (Basic)

Each form includes standard fields such as full name, company, email address, phone number, and best way to reach by default.

Custom Fields

To add up to 5 additional form fields, use the Custom Fields tab. You may have up to 2 additional drop-down menus and 3 additional custom text boxes.

Button

Customize your Form's submission button.

Form Completion

Customize the action taken once your form has been submitted:

  • Display Complete Message - When your form is submitted, the chosen text is shown, such as "Thank you!".
  • Redirect - The referral is redirected to the set URL upon form submission.

Button Edit

When using a Call-to-Action Template, you will select where your call-to-action button(s) will redirect to once a referrals clicks on one.

Action

Set the Redirect URL that you would like your referrals to be sent to after they click your button, and set the redirect to occur in a new or current window by adjusting the Redirect Behavior.

You may add parameters to your URL and use our merge tags to pass relevant information. We automatically include the Member's referral code parameter.
Style

Adjust the text, style, color, width, and position of your button(s).

You may have multiple Call-to-Action buttons on your Referral Page. To change the settings of all buttons while editing, select the check box labeled " Apply Changes to All CTA Buttons" above Save!

Sections 

Add a Section

Your template starts out with at least one (1) section. If you would like to add more to make your page bigger, select the + icon on the left hand side and choose from our selection of Simple Start (Basic and Slider layouts) and Quick Start (pre-designed layouts) sections.

Change Background Image

To embed a new background image, navigate to the bottom of the section and select the green camera icon to select your image file.

Change Style of Section

At the bottom of each section there is a blue wrench icon that allows you to change the content and image style for that section.

Move Sections & Change Height

On the right side of each section there is a blue wrench icon that allows you to move that section up and down, change the height, and add a scroll icon.

Delete Section

To delete a section, select the red "X" icon on the right side of that section. 

We recommend saving a Draft before making a drastic change to your page. There is no UNDO button! 

Content Blocks 

Add New

To add a new content block to a section, select the Notepad icon in the top left navigation bar and then drag and drop your selected content block onto your section. There are many types of content blocks available including columns, images, feature blocks, cards, and more.

Adjust Content Block

When you select your content block, 3 icons will appear to the left. These allow you to drag and drop the content block (green), clone/copy the content (gray), or delete the block (red).

Edit with WYSIWYG

In order to edit the content inside of a content block, click on that content block and a WYSIWYG editor will appear at the top of the screen. 

Here you can add CSS adjustments to the site by accessing the Code < >.

Typography 

To change the font style for your entire page, select the Typography ("a") icon on the left navigational bar and click to change between the different font styles. 

This will change the font style for the entire page. To change individual text properties in a specific content box, see the Content Blocks “Edit with WYSIWYG” section above

Publish/Save Draft

Publish

To make your Referral Page live in your program, select the Publish button. You may optionally add a Note associated with this Version's updates that will be visible from the Version History.

Save your Draft

Click on the arrow next to Publish to select the Save Draft button. It’s a great idea to also add a description to your saved draft for future reference! 

Version History 

Select Version History at the bottom of the Web Page editor to view all Published changes and Saved Drafts. Drafts appear as "Manually Saved" while live publications show as "Auto-Saved on Publish" along with the date, time, notes, and actions (view or publish a previous version).

View - Allows you to view your previous saved versions of your page draft.

Revert Back / Version Publish - Allows you to revert your page back to the selected previous version with a simple click.

Change Template

If you decide to change your template to a new template, be sure to save your work beforehand! You will start over with a new template, but you can always revert back by going to your Version History. Changing templates will start you out fresh with that new template. Sections and Content do not transfer over.

Exit to Program

To exit back to the main program editor, select the Exit to Program button.

Be sure to save your Draft before exiting to the program so that you don’t lose your work!


How did we do?