Add a Standard Controller to the Page

Bring on the Lightning Design System

Now that you have your new Visualforce page, let’s add some HTML markup to the page and create an input form for creating new contacts. Open the ContactForm in Developer Console.

  1. In your playground, click Setup Setup. and select Developer Console.
  2. In Developer Console, select File > Open > Pages and open Contact Form.

Code on web pages are broken up into two main sections. A header and a body. These sections are represented by <head></head> tags for the header, and <body></body> tags for the body.

  • The <head> section contains information and related documents (such as CSS style sheets). This section tells the browser how to execute and display the web page.

  • The <body> section says what goes on the page (such as images and lists), and where specific CSS style tags should be applied.

Let’s add these two sections to the page. Add the <head></head>and <body></body> tags to your Visualforce page. Copy the following code and place the code in between the <apex:page></apex:page> tags.

       <head>
         </head>
         <body>
         </body>

Your code should now look like this.
Apex code with header and body HTML tags.

The Header

To give your page the look of Lightning, add the <apex:slds/> into the header section. Just that quickly, your Visualforce page will adopt the CSS styles already be defined in the Lightning Design System.

Let’s add the metadata to your page in between the <head> tags.

  1. Add the metadata in between the two <head> tags by copying the following code, and replacing the code in your Visualforce page.
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <title>Quick Start: Visualforce</title>
      <!-- Import the Design System style sheet -->
      <apex:slds />

Your updated Visualforce page should now look like this: Visualforce with updated metadata tags.

  1. Click Save. You have now defined the metadata for your Visualforce page and added the Lightning Design System to your page. When you build the rest of your contact form, the page will have the look and feel of the Salesforce Lightning style.

Right now the Visualforce page isn’t doing much but loading a white screen. Since this page will interact with the Contact object, let’s create a new contact form by adding a standard controller and some input fields.

Add a Standard Controller to the Page

In Visualforce, you use a standard controller so you can bind data to the page without writing additional code. As we noted previously in this project, it’s best to use the standard controller if you’re performing basic record functions such as create, read, update and delete (CRUD) operations. For more custom functionality, it’s best to use a custom controller. In this project, since you’re working with the Contact object, you need to add the Contact standard controller.

Let’s add the Contact standard controller to the page to give the page functionality.

  1. In your Developer Console, add the Contact standard controller inside the first <apex:page> tag on line 1. Copy the following code and replace the existing code in line 1 on your Visualforce page.
    <apex:page standardController="Contact">
  2. Click Save. Your Visualforce markup should now look like this:
    Adding standard controller for Contact in Visualforce page.

Add a Form to the Page

Now create a form to add a new contact.

  1. Add the form component to your Visualforce page to give your page some functionality. Copy the following code, and paste in between the <body></body> tags.
      <apex:form>
      <apex:pageBlock title="New Contact">
        <!--Buttons -->
         <apex:pageBlockButtons>
            <apex:commandButton action="{!save}" value="Save"/>
         </apex:pageBlockButtons>
         <!--Input form -->
         <apex:pageBlockSection columns="1">
         <apex:inputField value="{!Contact.Firstname}"/>
         <apex:inputField value="{!Contact.Lastname}"/>
         <apex:inputField value="{!Contact.Email}"/>
        </apex:pageBlockSection>
      </apex:pageBlock>  
      </apex:form>

The form you created includes three input fields (Firstname, Lastname, and Email), and a Save button to add a contact.

  1. Save the page. Your Visualforce markup should now look like this.
    New contact form added to the Visualforce page.

Check Out the New Page

To view your new Visualforce page, click the Preview button in Developer Console. A new browser tab will open to your new page. Your page should look like the following one. New contact Visualforce form displayed.
Congratulations! You now have a custom Visualforce form to add new contacts.

Adding new records to objects with Visualforce is a cool way to customize how you want to view and interact with data. Visualforce is also a useful way to streamline record creation. In some cases, you can use Visualforce instead of standard record pages, giving you more functionality and flexibility.

Next, let’s replace the standard Contact “New” page with your Visualforce page.

Keep learning for
free!
Sign up for an account to continue.
What’s in it for you?
  • Get personalized recommendations for your career goals
  • Practice your skills with hands-on challenges and quizzes
  • Track and share your progress with employers
  • Connect to mentorship and career opportunities