Understand Portal Pages

This help page is for users in Creator 6. If you are in the older version (Creator 5), click here. Know your Creator version.

What Does This Page Cover?

Learn about the Sign Up, Sign In, and Reset Password pages of your portal. They act as the input user interface that allow your portal users to access your application.

Availability

Portals can be accessed only in the paid plans of Creator. They are provided as add-ons in some plans while are included by default in others.
Only the super admin and admins can access the portals.

Overview

Portal pages are organized page structures that house a portal through which you can sign up for a service, login, reset credentials, etc. They also display necessary information about the portal and provide input fields for the end-users to enter data such as their credentials. Mostly, these pages try to resonate with the template of their online service's purpose in both in displaying information and in design.

Portal Pages in Creator

In Creator, a portal has three assets that are essential to your portal user 's lifecycle — the sign in, sign up, and reset password pages. Each portal page comprises of different rows and columns that include a portal form, relevant headings, description texts, background images, etc.

Zoho Creator offers a default and robust design for each of these pages, which you can further customize using the portal page designer. Check out the comprehensive steps for portal page customization to know more about the tailor-made properties it offers to design the pages.

See How it Works

Use Case

Say you've built a Zylker Automobile Resale application that resells pre-loved luxury cars. You've added a portal for the verified sellers who are willing to quote and put their cars on sale in the platform. You'll have separate portal pages for them to sign up to your service, for consecutive logins, and a page if they want to reset their password. Design these pages in a way that resonates with your business's goal. Using the portal page designer, set a background color that resonates with your existing application's design and add an image that pictographically explains the purpose of the page. You can also customize the login portal page to match the brand's theme by choosing color and text styles of the portal form, the input fields, and the buttons.

Navigation Guide

You can find Portals under the DEPLOY section on the left-side pane once you sign in to your Creator account. After choosing the necessary portal previously created by you, the Page Customization tab can be chosen. From here, you can customize your portal pages.

Types of Portal Pages

Every portal created within the Zoho Creator application has three portal pages. They have been discussed in detail below:

Portal Page Type	Description
Sign Up	The page where portal users sign up for your Creator application's portal. In case your portal is private or restricted, your approval is required to complete the signup process.
Sign In	The page where the portal users will have to enter their credentials to access your Creator application's portal.
Reset Password	The page where the portal users can reset their password for accessing your Creator application's portal.

Portal Page Customization

Zoho Creator offers an intuitive designer for customizing the design of your portal's sign in, sign up, and reset password pages. This sophisticated designer is common for all three portal pages and allows you to customize all their components.

Playing around with the designer helps you achieve maximum resemblance between your portal page and your application. Each portal page has a set of general properties, and properties specific to the components that the page holds. The three components (portal backdrop, Portal Column, and Portal Form) which are discussed in detail below.

Components of a Portal Page

A portal page has three components that contribute to the user interface design in different ways. They have properties of their own which can be utilized to design a very distinct user interface layout. The components are:

Portal Backdrop - You can customize the portal backdrop by editing the page width, padding, background color, background image, and by adding more elements (headings, tables, spacers, etc)
Portal Column - The portal column holds the portal form within it and has excess area that can be customized to suit your needs. You can choose to edit the alignment, spacing, background color, and background image.
Portal Form - The portal form contains the input fields for the credentials. Every element inside the portal form can be customized such as the background color, the font of the buttons and field names, the color of the buttons, the color of the links when hovered over, etc.

Portal Backdrop

The properties specific to the portal backdrop helps you design the prefixed and custom elements of the portal page. These properties appear by default when a portal page is edited.

Property	Icon	Description
Page Width		Default - The prefixed page width that has been affixed to portal pages uniformly. Note : Default value will be set to 100% capacity. Custom - The portal page's width can be customized according to your needs in pixels. Note : The pixel range within which you can adjust the page width is 790-1500.
Padding		The space between the content and the border of the portal page can be customized in pixels. Note : The pixel range within which you can adjust the padding is 0-100.
Background Color		The background color of the portal page. The available options to choose from are: No Fill - Leaves the background blank. Preset Colors - The predefined color scheme from which the background color can be chosen. More Colors - The color palette from which a customized color can be chosen according to your needs. HEX and RGB codes can also be used to find a specific color.
Background Image		An image that fills and makes the background of your portal page. This can be uploaded using File manager or a Web URL. Once uploaded, it can be changed or deleted. It has to be uploaded in the .jpg or .png format and with a file size less than 5MB. Image Size - Determines the fit of the image in the portal page's background. Available options are: Auto Contain Cover
Elements		The elements column situated on the left side of the designer features predesigned elements. You can add them to your portal page's backdrop: Heading Paragraph Image Table Spacer The builder offers element-specific toolbars that allow you to customize their display value, appearance, insert system variables, and much more.
Undo & Redo		Undo - Go back one step in the edition of the portal page. Redo - Repeat a step that was undone in the edition of the portal page. Note : You can also use the standard keyboard shortcuts to perform these operations. Upto 10 changes can be undone or redone.

Portal Column

The properties specific to the portal column that helps you customize the panel that encapsulates the portal form. They can be accessed by clicking on the portal column.

Property	Icon	Description
Alignment		The alignment of the portal form in the portal column. the available options are: Left Center Right
Spacing		The spacing between the margins of a portal column and the portal form that is situated inside it. The available options are: Left Top Right Bottom Note : The pixel range between which you can set the spacing is 0-1400.
Background Color		It is the color of the portal column. The available options to choose from are: No Fill - Leaves the background blank. Preset Colors - The predefined color scheme from which the background color can be chosen. More Colors - The color palette from which a customized color can be chosen according to your needs. HEX and RGB codes can also be used to find a specific color.
Background Image		An image that fills and makes the background of your portal page. This can be uploaded using File manager or a Web URL. Once uploaded, it can be changed or deleted. It has to be uploaded in the .jpg or .png with a file size less than 5MB. Image Size - Determines the fit of the image in the portal page's background. Available options are: Auto Contain Cover

Portal Form

The Form Customization properties specific to the portal form helps you design and customize the portal form fully. They can be accessed by clicking Form Customization or by directly selecting the portal form.

Property	Description
Background	The background color of the portal form.
Border	Color - The color of the portal form's border. Style - The borderline design can be chosen from: continuous line dashed line dotted line Width - The thickness of the border that runs around the portal form. Note: The pixel range within which you can customize the border width is 0-20.
Shadow	Shadow Color - The color of the portal form's shadow. X - The thickness of the shadow on the X-axis. Y - The thickness of the shadow on the Y-axis. Blur - The extent to shadow needs to be blurred. Spread - The extent to which the shadow needs to be spread.
Typography	Font Family - The font that will be applied throughout the portal form. A list of 23 font families are available in the dropdown. Title Text Color - The color in which the title text needs to be displayed. Body Text Color - The color in which the body text needs to be displayed.
Field Input	Text Color - The color of the text that the end-user enters in the field. Placeholder Color - The color of the default placeholder of the input field. Background Color - The color of the input field box. Border Color - The color of the borderline of the input field box. Note : These properties can be defined for both, their default display, and their appearance when hovered upon. This can be done by switching between the Default and Hover tabs.
Button	Text Color - The color of the text that is displayed on the button. Background Color - The filled color of the buttons placed within the portal form. Border Color - The color of the borderline of the buttons placed within the portal form. Note : The properties can be defined for both, their default display, and their appearance when hovered upon. This can be done by switching between the Default and Hover tabs.
Link	Default Text Color - The color of the text that is displayed on links placed within the portal form. Underline - The link text can be displayed as underlined or plain. Note : The properties can be defined for both, their default display, and their appearance when hovered upon. This can be done by switching between the Default and Hover tabs.

Points to Note

You can make row and column-wise customizations to every element present in the portal page. The available properties are:

Row - Spacing, Fill Color, Edit HTML, Border
Column - Fill Color, Border

The changes you make in the designer are automatically saved.
You can set the width of all the columns in the portal page by dragging its borders.

Start tracking your website metrics today

Use PageSense to understand what your visitors are looking for, how they are behaving, and where they are facing problems on your website.

Ready to improve your website's performance?

Install the PageSense code snippet on your site in a matter of minutes and start collecting in-depth data about the website visitors to grow your business.

Track and measure every business goal

Set up goals in PageSense to measure every single action performed by visitors on your website like button or link clicks, form submissions, and page engagements.

Understand the customer journey on your website

Create funnels in PageSense to quickly see which pages visitors use to enter your website, where they navigate to next, and which pages they decide to leave without converting.

Visualize your visitor's behavior with color codes

Set up heatmaps in PageSense to see where users have clicked more, how far they've scrolled, and on which parts of a page they've spent the most time using color-coded patterns in reports.

Measure customer engagement with your web forms

Use form analytics in PageSense to see how people interact with different fields in your form, whether they complete the form successfully or not, and where exactly they drop out on your form.

Record real visitor interactions on your website

Use session recordings in PageSense to watch a video of all the visitor actions performed on your website including the pages they navigate, the buttons they click, the UX issues they face, and more.

Test and optimize webpages for better conversions

Run A/B or Split URL tests in PageSense to figure out which version of your web page works best for your business and results in the best conversion rate.

Give each customer a unique website experience

Use personalization in PageSense to deliver customized versions of your website for every individual customer based on their demographics, local weather, browsing history, and more.

Grow your business through customer feedback

Run polls on your website using PageSense to understand what your customers think about your products/services and what needs improvement on your site.

Send timely updates that customers love

Use web push notifications in PageSense to schedule and notify your customers about an upcoming flash sale, product releases, promotional coupons, and a lot more that can spark conversions on your website.

Advertise your business to website visitors

Use pop-ups in PageSense to instantly grab the attention of visitors by showing attractive signup offers, coupon code discounts, or email newsletters that can eventually convert them into subscribers.

Access more advanced settings in PageSense

Use PageSense's advanced features like creating mutually exclusive groups, enabling cross-domain tracking, configuring customized project JS, and more to get deeper insights about your website.

Try easy-to-use extensions

Download the PageSense extension app available for your web browser with a few clicks and start collecting all of your required website metrics in real time.

Discover your favorite integrations with PageSense

Get a deeper look at your website's data by seamlessly integrating PageSense with a host of popular third-party apps like Google Analytics, Mixpanel, Intercom, and more.

Quick Links	Workflow Automation	Data Collection
Web Forms	Enterprise	Begin Data Collection
Interactive Forms	Workplace	Data Collection App
Offline Forms	Customer Service	Accessible Forms
Digital Forms	Marketing	Forms for Small Business
HTML Forms	Education	Zoho Forms for Enterprise
Contact Forms	E-commerce
Lead Generation Forms	Healthcare
Wordpress Forms	Customer onboarding
No Code Forms	Construction
Free Forms	Travel
Prefill Forms	Non-Profit
Intake Forms
Form Designer
Card Forms
Assign Forms
Translate Forms
Electronic Forms
Notification Emails for Forms
Holiday Forms
Form to PDF
Email Forms CRM Forms Embeddable Forms Drag and Drop form builder

Zoho Pagesense Resources

You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.

New to Zoho Survey?

Access Zoho Survey

Latest Feature Updates

Explore our Pricing & Plans

Zoho Survey Resources

Android Mobile Surveys

Insurvey Blogs

Insight Blogs

Tips & Tricks

New to Zoho Social?

Manage your brands on social media

Access Zoho Social

Zoho Desk Resources

Desk Community Learning Series
Digest
Functions
Meetups
Kbase
Resources
Glossary
Desk Marketplace
MVP Corner
Word of the Day

Zoho Sheet Resources

New to Zoho Forms?

Latest Feature Updates

Explore our Pricing & Plans

Zoho Forms Resources

Secure your business

communication with Zoho Mail

Get started

Mail on the move with

Zoho Mail mobile application

Go Mobile

Stay on top of your schedule

at all times

Get started

Carry your calendar with you

Anytime, anywhere

Get started

Latest Announcements

New to Zoho Sign?

Zoho Sign Resources

Sign, Paperless!

Sign and send business documents on the go!

Get Started Now

Zoho SalesIQ Resources

New to Zoho TeamInbox?

Zoho TeamInbox Resources

Connect with us

New to Zoho ZeptoMail?

LEARN MORE

Latest Feature Updates

Zoho DataPrep Resources

New to Zoho DataPrep?

Access Zoho DataPrep

Zoho DataPrep Demo

Get a personalized demo or POC

Design. Discuss. Deliver.

Create visually engaging stories with Zoho Show.

Get Started Now

New to Zoho Workerly?

Access Zoho Workerly

New to Zoho Recruit?

Access Zoho Recruit

New to Zoho CRM?

Signup Now

Access Zoho CRM

Latest Feature Updates

New to Zoho Projects?

Access Zoho Projects

New to Zoho Sprints?

Access Zoho Sprints

You are currently viewing the help articles of Sprints 1.0. If you are a user of 2.0, please refer here.

You are currently viewing the help articles of Sprints 2.0. If you are a user of 1.0, please refer here.

New to Zoho Assist?

Access Zoho Assist

New to Bigin?

Signup Now

Access Bigin

Latest Feature Updates

Related Articles
Understand portal
This help page is for users in Creator 6. If you are in the older version (Creator 5), click here. Know your Creator version. A Portal is a great way for an organization to allow its external users to log in to their dedicated internal system and ...
Customize Portal Pages
This help page is for users in Creator 6. If you are in the older version (Creator 5), click here. Know your Creator version. What Does This Page Cover? Learn to customize portal pages using a sophisticated designer that allows you to tailor every ...
Understand portal user permissions
A permission set is a group of rules that govern the accessibility of the portal by the user. Permissions can be configured in different ways by the admin based on the scope of work for user within the portal. This enables the admin to assign ...
Understand permissions in portal
This help page is for users in Creator 6. If you are in the older version (Creator 5), click here. Know your Creator version. A permission set is a group of rules that govern the accessibility of the portal by the portal user. Permissions can be ...
Understand customer permission in portal
The customer permission is the predefined permission available in Zoho Creator. This permission is helpful when choosing a permission for the customer of the organization. Customer implies an individual who is not a part of the admin's organization ...