How to create Visualforce Page in Salesforce

How to create Visualforce page in Salesforce?

Visualforce page in Salesforce is a custom user interface page written with Visualforce markup and hosted on the Salesforce platform. You can create a Visualforce page from Developer Console, from Setup, or directly from a Visualforce URL when development mode is enabled. The first page usually starts with an <apex:page> tag and then grows into a form, report-style view, custom tab, override page, PDF page, or controller-backed page.

Before creating Visualforce pages in Salesforce, Development mode in Salesforce can be enabled so that we can create and edit Visualforce pages in the user interface directly. Development mode is useful for quick learning because it can show the page editor and preview together. In current Salesforce Setup, you can also create pages by searching for Visualforce Pages in the Quick Find box.

To enable development mode navigate to Name | My Settings | Personal | Advanced user details | Edit. In Lightning Experience, open your profile or personal settings, search for Advanced User Details, edit the user record, and enable Development Mode if the option is available in your org.

What a Salesforce Visualforce page contains

A Salesforce Visualforce page is saved with a label, API name, markup, security settings, and optional controller configuration. The markup is XML-like and uses tags such as <apex:page>, <apex:form>, <apex:pageBlock>, and <apex:outputText>. A page can use a standard controller, a custom Apex controller, or no controller for a simple static page.

Visualforce page part	What it means in Salesforce
Label	The readable page name shown in Setup.
Name	The API name used in the URL, for example `/apex/HelloWorld`.
Markup	The Visualforce tags, HTML, text, and expressions that render the page.
Controller	The logic source for data and actions. It may be a standard controller, custom controller, or extension.
Page access	Profile or permission settings that decide which users can open the page.

Creating first Visualforce page in Salesforce

In Salesforce, Visualforce pages can be created in different ways. Some of them are

Visualforce pages from Setup.
Developer Console and
URL.

Use Developer Console when you want to write and preview markup quickly. Use Setup when you want to create or edit the page details, security, API version, and availability settings. Use the URL method for a quick learning shortcut when development mode is enabled.

Creating Salesforce Visualforce pages in Developer Console

To create new vf page in developer console follow the steps given below.

Open Developer console under your name or quick access menu.
Now developer Console will be opened in New window.
To create VF page click File | New | Visualforce page.
Enter a page name such as HelloWorld. Avoid spaces in the API name.
Replace the default markup with a simple Visualforce page and save it.

How to create Visualforce Page in Salesforce from developer console

</>

Copy

<apex:page> 
    <h1>Hello World</h1> 
</apex:page>

Now to File | Click on save button.
Now click on preview button to see you new Vf page.

The preview URL will normally use the page API name after /apex/. For example, if the page name is HelloWorld, the path is usually /apex/HelloWorld. If the preview opens but the page is blank, check that the markup is saved and that the first tag is a valid <apex:page> tag.

Creating Visualforce pages from Salesforce Setup

Setup is the clearest method when you want to control the page label, API name, description, API version, availability for Lightning Experience, and security-related options.

To create vf pages in Salesforce navigate to Setup | Build | Develop | Visualforce pages.
In Lightning Experience, use Setup | Quick Find | Visualforce Pages.

Click on New button to create vf page.
Enter label and Name.
Enter the Visualforce markup in the page editor.
Select the required availability options for Lightning Experience, Experience Builder sites, and the mobile app when the page must be used there.
Finally click on save button.

For a page that reads a standard Salesforce record, you can add a standard controller. The following example displays the current Account record name when the page is opened with an Account record id.

</>

Copy

<apex:page standardController="Account">
    <apex:pageBlock title="Account Details">
        <apex:pageBlockSection>
            <apex:outputField value="{!Account.Name}"/>
            <apex:outputField value="{!Account.Industry}"/>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>

After saving this page, open it with a record id in the URL, such as /apex/AccountDetails?id=001XXXXXXXXXXXXXXX. Replace the sample id with a real Account record id from your org.

Creating Visualforce pages using URL

When development mode is enabled in salesforce, we can create Visualforce page simply by URL. To create Visualforce page in SFDC, we need not go Setup | Build | Develop | pages or Developer console every time. Here is another way to create Visualforce page directly from URL. This is the shortcut to create visualforce page in Salesforce. https://c.ap4.visual.force.com/apex/PageName (Visualforce page name).

How to create Visualforce Page in Salesforce from URL

Click on createpage Vftestpage to create new Vf page in Salesforce.

To check the created visualforce page navigate to Build | Develop | Visualforce. Here list of all Vf pages in Salesforce will be displayed.

Visualforce page URL format and naming tips

The Visualforce URL uses the page API name, not the page label. The exact domain can differ by org, My Domain, sandbox, and Salesforce instance, so use the preview button or your org’s current domain instead of copying an old instance URL from another org.

</>

Copy

https://your-domain.my.salesforce.com/apex/PageName

Use a clear API name such as InvoicePreview, AccountSummary, or CaseEscalationForm.
Avoid spaces and special characters in the page name.
Keep the label readable for admins who will find the page later in Setup.
Use the page description field to explain where the page is used, such as a button, tab, override, or Experience site.

Adding a Visualforce page to buttons, tabs, and Salesforce layouts

Visualforce pages can be used in different ways in Salesforce organization. Some of them are

VF pages can be used by overriding the standard button.
VF page can be called using the custom help links for the custom object.
Creating JavaScript button to open VF page.
Creating custom buttons to open VF page.
Vf pages can be added to custom tabs, dashboards and page layouts.

For a modern Salesforce org, the common admin paths are custom buttons, links, Visualforce tabs, page layout sections, or standard button overrides. For example, a detail page button can open a Visualforce page and pass the current record id to the page.

</>

Copy

/apex/AccountDetails?id={!Account.Id}

If the page uses standardController="Account", Salesforce can use the id parameter to load the Account record. For custom objects, replace Account with the custom object API name in the controller and use the correct merge field in the button URL.

Visualforce page access and security after creation

Creating the Visualforce page is only the first step. Users must also have access to the page and to the objects and fields shown by the page. If one user can preview the page but another user receives an authorization or insufficient privileges error, check these areas:

Visualforce page access: make sure the user’s profile or permission set can access the page.
Object permissions: confirm that the user can read or edit the object used by the page controller.
Field-level security: confirm that displayed fields are visible to the user.
Sharing rules: confirm that the user can access the specific record passed in the URL.
Site or Experience Cloud access: if the page is public or site-facing, configure site page access separately and avoid exposing private data.

Visualforce page versus Lightning page in Salesforce

A Visualforce page and a Lightning page are not the same thing. A Visualforce page is markup-based and can use Apex controllers. A Lightning page is assembled in Lightning App Builder and usually contains standard components, custom Lightning web components, related lists, actions, and page regions. For new custom UI development, Salesforce generally points developers toward Lightning Experience tools and Lightning web components, while Visualforce remains useful for existing pages, PDF rendering, legacy overrides, email-style layouts, and use cases where a Visualforce feature is already the right fit.

Requirement	Better starting point
Simple record page arrangement	Lightning App Builder
New reusable custom UI component	Lightning Web Component
Existing Visualforce override or tab	Maintain or refactor Visualforce carefully
PDF-style output from Salesforce data	Visualforce is commonly used
Quick admin-created page layout changes	Lightning page, compact layout, or page layout

Troubleshooting a newly created Visualforce page in Salesforce

Page not found: check the page API name in the /apex/PageName URL.
Invalid markup error: confirm that all Visualforce tags are closed correctly and nested in a valid order.
Field does not display: check field-level security and whether the page uses the correct standard controller object.
Button opens without record data: confirm that the button passes id={!ObjectName.Id} in the URL.
Works for admin only: check Visualforce page access, object permissions, field access, and record sharing for the affected user.

Official Salesforce references for creating Visualforce pages

For current platform details, compare your org with the Salesforce documentation. Useful references include Salesforce Help: Visualforce Pages, Trailhead: Creating and Editing Visualforce Pages, and Visualforce Developer Guide: Creating Your First Page.

FAQs on creating Visualforce page in Salesforce

What is a Salesforce Visualforce page?

A Salesforce Visualforce page is a custom page built with Visualforce markup and hosted on the Lightning Platform. It can show Salesforce data, use Apex logic, work with standard controllers, and be opened from tabs, buttons, links, overrides, or direct /apex/PageName URLs.

How do I create a Visualforce page in Salesforce Lightning Experience?

Open Setup, search for Visualforce Pages in Quick Find, click New, enter the label and name, add the Visualforce markup, select the needed availability options, and click Save. You can also use Developer Console | File | New | Visualforce Page.

What is the difference between a Visualforce page and a Lightning page?

A Visualforce page is code-based markup that can use Apex controllers. A Lightning page is configured in Lightning App Builder and is usually made from Salesforce components and Lightning web components. Use Lightning pages for most new page composition work, and use Visualforce when an existing page, controller-based page, PDF output, or Visualforce-specific feature is required.

Is Visualforce still used in Salesforce?

Yes. Many Salesforce orgs still use Visualforce for existing custom pages, button overrides, PDF-style rendering, custom tabs, and pages that are expensive to rebuild immediately. For new custom interface work, evaluate Lightning App Builder and Lightning web components before choosing Visualforce.

How do I create a Visualforce page button in Salesforce?

Create and save the Visualforce page first. Then create a custom button or link for the object, set the behavior and content source as needed, and use a URL such as /apex/PageName?id={!ObjectName.Id} to pass the current record id to the page. Add the button to the page layout if users need it on the record page.

Editorial QA checklist for this Visualforce page tutorial

The tutorial explains all three creation methods: Developer Console, Setup, and URL shortcut.
The Visualforce examples use valid <apex:page> markup and clearly identify when a standard controller is required.
The Setup path mentions the current Quick Find method while retaining the older Classic navigation for learners using older screenshots.
The tutorial warns readers to check page access, object permissions, field-level security, and record sharing after page creation.
The Visualforce versus Lightning section avoids treating Visualforce as the default choice for every new UI requirement.

TutorialKart.com

How to create Visualforce Page in Salesforce