Referral Page (Web Page Builder)
- Page Builder
- Choose Template
- Form Edit
- Button Edit
- Content Blocks
- Publish/Save Draft
- Version History
- Change Template
- Exit to Program
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.
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.
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.
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).
Each Form Template includes a pre-built standard form. To edit the form, select the Form Edit button at the bottom of the page.
Each form includes standard fields such as full name, company, email address, phone number, and best way to reach by default.
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.
Customize your Form's submission button.
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.
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.
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.
Adjust the text, style, color, width, and position of your button(s).
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.
To delete a section, select the red "X" icon on the right side of that section.
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.
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.
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!
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.
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.