Create Forms using Visualforce Page in Salesforce

In Salesforce, we use the Visualforce pages to add custom features to the org’s user interface. We can also create custom forms using the Visualforce pages, and using the forms, we can get user data in the input field, which can then be saved directly to Salesforce objects.

In this Salesforce tutorial, I will explain how to create a custom form using Visualforce Pages in Salesforce and store data in the organization through them.

Create a Visualforce Form in Salesforce

To create a visualforce form, ensure that you have permission access for the objects you will have on the visualforce page form.

In this example, we are going to create a Contact form that will take the input and store the data in the Contact object.

1. To create a Visualforce page, navigate to Setup > Visualforce Pages and click the New button.

We can also create the visualforce page from the developer console, and for that, navigate to File> New> Visualforce page.

2. Enter the Name and Label for the new visualforce page and save it.

3. Before defining the code of the visualforce page, we first need to create a controller class that will manage the data and the logic of the Visualforce page.

To create the controller, navigate to the developer console and select File > New > Apex Class. Enter the relevant name for the controller class and click OK.

After that, enter the code below to define the logic of the controller class and save it.

public class FormController {
    public Contact newContact { get; set; }

    public FormController() {
        newContact = new Contact();
    }

    public PageReference saveContact() {
        try {
            insert newContact;
            ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.CONFIRM, 'Contact created successfully!'));
            newContact = new Contact(); 
        } catch (Exception e) {
            ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.ERROR, 'Error: ' + e.getMessage()));
        }
        return null;
    }
}

4. Now to the visualforce page and enter the code below.

In the controller class, we have included <apex:form >, which creates a section where users can input data and submit it through a form. The component <apex:pageBlock> defines a section of a page that resembles a standard Salesforce detail page.

This contact form will include the First Name, Last Name, Email, and Phone fields. We have a Save button to save the record in the object using commandButton action=”{!saveContact}”.

<apex:page controller="FormController">
    <h1>Create a New Contact</h1>
    <apex:form >
        <apex:pageMessages />
        <apex:pageBlock title="Contact Information">
            <apex:pageBlockSection columns="2">
                <apex:inputField value="{!newContact.FirstName}" label="First Name"/>
                <apex:inputField value="{!newContact.LastName}" label="Last Name" required="true"/>
                <apex:inputField value="{!newContact.Email}" label="Email"/>
                <apex:inputField value="{!newContact.Phone}" label="Phone"/>
            </apex:pageBlockSection>
        </apex:pageBlock>
        <apex:commandButton action="{!saveContact}" value="Save"/>
    </apex:form>
</apex:page>

After this, save the changes on the visualforce page and click on the Preview button to view the UI of the form.

This way, we can create a basic Contact form in Salesforce using the Visualforce Pages.

Add fields to Visualforce Forms in Salesforce

In the contact form, we have added the fields that take input, such as text, email, and phone. If you want to add more fields to the existing form, you have to make changes in the <apex:pageBlockSection> component of the Visualforce page.

For example, I want to add the fields Lead Source, Birthdate, and Accountid, which are picklist, date, and lookup fields, respectively.

To add the fields, add the below code in the component <apex:pageBlockSection> and save it.

 <apex:pageBlockSection columns="2">
                <apex:inputField value="{!newContact.FirstName}" label="First Name"/>
                <apex:inputField value="{!newContact.LastName}" label="Last Name" required="true"/>
                <apex:inputField value="{!newContact.Email}" label="Email"/>
                <apex:inputField value="{!newContact.Phone}" label="Phone"/>
                <apex:inputField value="{!newContact.Leadsource}" label="Leadsource"/>
                <apex:inputField value="{!newContact.Birthdate}" label="Birthdate"/>
                <apex:inputField value="{!newContact.Accountid}" label="Accountid"/>
            </apex:pageBlockSection>

Form preview:

Add a Button to Visualforce Form in Salesforce

For example, if you want to add a cancel button, then unlike adding fields, you have to define the functionality in the controller class because all buttons have different functionality.

To add the Cancel button to reset the form, update the controller class using the code below.

 public PageReference cancel() {
        newContact = new Contact(); 
        return null;

Now, add the cancel button to the Visualforce form.

<apex:commandButton action="{!cancel}" value="Cancel" immediate="true"/>

After making the changes, save it and preview the Visualforce page.

This way, we can add buttons and fields to the existing visualforce page forms in Salesforce.

Create a User Registration form using the Visualforce Page in Salesforce

In the previous example, we created a basic Contact from the Visualforce page. Now, we will create a User Registration form using the Visualforce page with fields such as radio button, checkbox, dropdown, and other fields.

1. First, we will create a Visualforce page in the developer console, and for that, navigate to File > New > Visualforce page and enter the name for the visualforce page.

2. Now, we will add the fields to the visualforce page that we need in the registration form.

<apex:page controller="RegistrationFormController">
    <apex:form>
        <h1>Registration Form</h1>
     
        <apex:outputLabel value="First Name:" for="firstName"/>
        <apex:inputText id="firstName" value="{!firstName}" required="true"/><br/><br/>
        
        <apex:outputLabel value="Last Name:" for="lastName"/>
        <apex:inputText id="lastName" value="{!lastName}" required="true"/><br/><br/>
        
        <apex:outputLabel value="Email:" for="email"/>
        <apex:inputText id="email" value="{!email}" required="true"/><br/><br/>
        
        <apex:outputLabel value="Gender:"/>
        <apex:selectRadio value="{!gender}">
            <apex:selectOption itemValue="Male" itemLabel="Male"/>
            <apex:selectOption itemValue="Female" itemLabel="Female"/>
            <apex:selectOption itemValue="Other" itemLabel="Other"/>
        </apex:selectRadio><br/><br/>
        
        <apex:outputLabel value="Certifications:"/>
        <apex:selectCheckboxes value="{!selectedCertifications}">
            <apex:selectOption itemValue="Salesforce admin" itemLabel="Salesforce admin"/>
            <apex:selectOption itemValue="Platform developer 1" itemLabel="Platform developer 1"/>
            <apex:selectOption itemValue="Platform developer 2" itemLabel="Platform developer 2"/>
            <apex:selectOption itemValue="Salesforce Associate" itemLabel="Salesforce Associate"/>
        </apex:selectCheckboxes><br/><br/>

        <apex:outputLabel value="Country:" for="selectedCountry"/>
        <apex:selectList id="selectedCountry" value="{!selectedCountry}" size="1" required="true">
            <apex:selectOptions value="{!countryOptions}"/>
        </apex:selectList><br/><br/>
        
        <apex:outputLabel value="State:" for="selectedState"/>
        <apex:selectList id="selectedState" value="{!selectedState}" size="1" required="true">
            <apex:selectOptions value="{!stateOptions}"/>
        </apex:selectList><br/><br/>
        
        <apex:commandButton value="Submit" action="{!submitForm}"/>
    </apex:form>
</apex:page>

On this visualforce page, along with fields like first name, last name, and email, I have also added the checkbox field Certifications using block <apex:selectCheckboxes>, radio button field Gender using block <apex:selectRadio>, and dropdown fields like Country and States using block <apex:selectList>.

3. The new controller class RegistrationFormController will manage the data and the logic of the Visualforce page “Registrationform“.

public class RegistrationFormController {
    public String firstName { get; set; }
    public String lastName { get; set; }
    public String email { get; set; }
    public String gender { get; set; }
    public List<String> selectedCertifications { get; set; }
    public String selectedCountry { get; set; }
    public String selectedState { get; set; }
    public List<SelectOption> countryOptions { get; set; }
    public List<SelectOption> stateOptions { get; set; }

    public RegistrationFormController() {
        countryOptions = new List<SelectOption>{
            new SelectOption('India', 'India'),
            new SelectOption('USA', 'USA'),
            new SelectOption('Canada', 'Canada')
        };
        stateOptions = new List<SelectOption>{
            new SelectOption('Karnataka', 'Karnataka'),
            new SelectOption('Uttar Pradesh', 'Uttar Pradesh'),
            new SelectOption('California', 'California'),
            new SelectOption('New York', 'New York'),
            new SelectOption('Ontario', 'Ontario'),
            new SelectOption('Toranto', 'Toranto')
        };
        selectedCertifications = new List<String>();
    }

    public PageReference submitForm() {
        System.debug('Form Data:');
        System.debug('First Name: ' + firstName);
        System.debug('Last Name: ' + lastName);
        System.debug('Email: ' + email);
        System.debug('Gender: ' + gender);
        System.debug('Certifications: ' + selectedCertifications);
        System.debug('Country: ' + selectedCountry);
        System.debug('State: ' + selectedState);
        return null;
    }
}

After creating the visualforce page and the controller class “RegistrationFormController,” save the changes and check for errors.

4. Now, click on the Preview button from the Visualforce page setup.

Registration form preview:

This way, we can create a registration form in Salesforce by using the visualforce pages.

After creating the forms, you can deploy the visualforce pages in tabs in your Salesforce org.

Create a User Login form by Visualforce in Salesforce

Now, we will create a Login form using the Salesforce visualforce page. In my org, I have also created a custom home page using the visualforce page just to show the redirection after entering the login credentials.

1. First, we will create a visualforce page that defines the UI of the visualforce page displaying input fields Username and Password.

For input and password, we have used apex:inputText for the username and apex:inputSecret for the password to ensure it’s masked as “*****.”

The CustomLoginController is the custom controller that we will create in the next step.

<apex:page controller="CustomLoginController">
    <h1>Login</h1>
    <apex:form>
        <apex:pageMessages />
        
        <div>
            <apex:outputLabel value="Username" for="username" />
            <apex:inputText value="{!username}" id="username" required="true"/>
        </div>
        <br/>
        
        <div>
            <apex:outputLabel value="Password" for="password" />
            <apex:inputSecret value="{!password}" id="password" required="true"/>
        </div>
        <br/>

        <apex:commandButton value="Login" action="{!login}" id="loginButton"/>
        <br/><br/>
        
        <a href="/forgot-password">Forgot your password?</a>
    </apex:form>
</apex:page>

2. Create a custom controller to handle the logic of the login page.

public class CustomLoginController {
    
    public String username { get; set; }
    public String password { get; set; }

    public PageReference login() {
        if (username == 'admin' && password == 'password123') {
            
            return Page.CustomerHome; 
        } else {
            ApexPages.addMessage(new ApexPages.Message(ApexPages.Severity.ERROR, 'Invalid username or password'));
            return null;  
        }
    }
}

The login method is invoked when the Login button is clicked, and it checks the provided username and password for predefined or database-stored credentials.

3. Save the Controller and the Visualforce page and click the Preview button.

After clicking the login button, it redirects to the visualforce page “Page.CustomerHome” on successful login and the error message “ApexPages.addMessage” on an invalid login attempt.

This way, we can create a login form for Salesforce using the Visualforce Page.

Conclusion

In this Salesforce tutorial, we have learned to create custom forms using the visualforce pages to get user data and save it directly into Salesforce objects. Along with the visualforce pages, we also created the controllers to handle the logic for the forms.

In the above examples, we have created a Contact form, and you can follow the same method to create a data entry form for any other object, such as an Account. Also, we have learned to create a registration form and log in using the visualforce pages.

You may also like to read.

• How to Use Apex Controllers with Visualforce Pages?
• How to Create Visualforce Tabs in Salesforce?
• How to create Visualforce Email Template in Salesforce?
• Generate PDFs in Salesforce with Visualforce Pages
• How to Implement Pagination in Salesforce Visualforce Pages?
• How to Add a Visualforce page in Salesforce Lightning Pages?

Bijay Kumar

I am Bijay Kumar, the founder of SalesforceFAQs.com. Having over 10 years of experience working in salesforce technologies for clients across the world (Canada, Australia, United States, United Kingdom, New Zealand, etc.). I am a certified salesforce administrator and expert with experience in developing salesforce applications and projects. My goal is to make it easy for people to learn and use salesforce technologies by providing simple and easy-to-understand solutions. Check out the complete profile on About us.