Creating Your First Visualforce Page in Salesforce

Ready to build your first custom page in Salesforce? Let’s walk through how to create a Visualforce page from scratch and understand the process step by step.

Step 1: Go to the Developer Console

1. Log in to your Salesforce org.
2. Click on your profile icon (top right) → Developer Console.

Step 2: Create a New Visualforce Page

1. In Developer Console:
   Click File → New → Visualforce Page
2. Name your page:
   Example: HelloVisualforce
3. You’ll see this basic structure:

xmlCopyEdit<apex:page>
    Hello Visualforce!
</apex:page>

4. Save the page (Ctrl+S or File → Save).

Step 3: Preview the Page

To see your page:

• Go to your browser and type:
  https://yourDomain.salesforce.com/apex/HelloVisualforce

Replace yourDomain with your actual Salesforce domain.

Step 4: Add Some Form Elements

Now let’s add a basic form with input and a button:

xmlCopyEdit<apex:page controller="HelloController">
    <apex:form>
        <apex:outputLabel value="Enter your name:" for="name"/>
        <apex:inputText id="name" value="{!userName}"/>
        <apex:commandButton value="Say Hello" action="{!sayHello}"/>
        <apex:outputText value="{!greeting}"/>
    </apex:form>
</apex:page>

Step 5: Create Apex Controller

Go to: Setup → Apex Classes → New

apexCopyEditpublic class HelloController {
    public String userName { get; set; }
    public String greeting { get; set; }

    public void sayHello() {
        greeting = 'Hello, ' + userName + '!';
    }
}

Save the class and refresh the Visualforce page to test it.

What You Just Learned

✅ Creating and saving a Visualforce page
✅ Linking a Visualforce page with an Apex Controller
✅ Taking user input and displaying output dynamically