Create User Registration Form Using Salesforce Visualforce

In Salesforce, we use the Visualforce pages to add custom features to the org’s user interface. We can also create custom forms using Visualforce pages, allowing us to capture user data in the input field and save it directly to Salesforce objects.

In this Salesforce tutorial, I will explain how to create a user registration form using Salesforce Visualforce and store data in the organization through it.

Table of Contents

Create User Registration Form Using Salesforce Visualforce

Below, I will create a User Registration Form using the Visualforce page with fields such as radio buttons, checkboxes, drop-downs, and other fields.

First, we will create a Visualforce page in the developer console. To do this, navigate to File > New > Visualforce Page and enter a name for the Visualforce page.
- Now, we will add the necessary fields to the Visualforce page for the registration form.

Create Form Using Visualforce in Salesforce

<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>.
- The new controller class RegistrationFormController will manage the data and the logic of the Visualforce page “UserRegistrationForm“.

Apex Class to Create Visualforce Form in Salesforce

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.
- Now, click on the Preview button from the Visualforce page setup.

Create a registration form in Salesforce Visualforce

Registration form preview:

Create User Registration Form Using Salesforce Visualforce

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 Using Visualforce in Salesforce

Now, we will create a Login form using the Salesforce visualforce page. In my organization, I created a custom home page using a Visualforce page to display the redirection after entering login credentials.

First, we will create a Visualforce page that defines the UI, displaying input fields for 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>

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.
- Save the Controller and the Visualforce page and click the Preview button.

Create a login page using Visualforce in Salesforce

After clicking the login button, the system redirects to the visualforce page “Page.CustomerHome” upon a successful login. An error message, “ApexPages.addMessage,” is displayed upon an invalid login attempt.

Add Password field in Salesforce Visualforce page

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. We have also learned to create a registration form and log in using Visualforce pages.