---
schema_version: "1"
id: 0e16d4d98a307f17707320842f8f7ef8fd87ec47073eeaf732a19634dcaf9096
title: Creating a Form
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/aura-platform/guides/aura/slds/lightning-base-form.md
canonical_url: https://developer.salesforce.com/docs/platform/aura-platform/guide/lightning-base-form.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 614934b680460d95efbd4fe19f4bb33920df2389cc7e1b69ecf54b6c1e28c789
products:
  - Lightning Aura Components Developer Guide
  - Platform Developer Content
---

# Creating a Form

Work with user input for server-side use, such as creating or updating a record. Or get user input to update the user interface, such as displaying or hiding components.

If you’re creating a form to work with Salesforce data, use the `lightning:recordForm`, `lightning:recordEditForm`, `lightning:recordViewForm`, or `force:recordData` base components as they are built on [Lightning Data Service](https://developer.salesforce.com/docs/platform/aura-platform/data-service/data-service.md). Otherwise, you must wire up the fields to the Salesforce object yourself and use Apex to process the user input as shown in the next section.


## Example

The [Aura Components Basics Trailhead module](https://trailhead.salesforce.com/content/learn/modules/lex_dev_lc_basics) walks you through building a form for creating an expense record.

## Implement a Basic Form

Before proceeding, we recommend that you have working knowledge of [web forms](https://developer.mozilla.org/en-US/docs/Learn/Forms), as the rest of the topic builds on that concept.

You can collect data in fields that accept different types of user input, such as a checkbox, date, email, file, password, number, phone, radio, or text. Most user input can be collected by using [lightning:input](https://developer.salesforce.com/docs/component-library/bundle/lightning:input).

Here’s a list of form controls for option selection and their corresponding base components.

-   Button: [`lightning:button` (and `lightning:buttonIcon` and so on)](https://developer.salesforce.com/docs/component-library/bundle/lightning:button)
-   Checkbox: [`lightning:checkboxGroup`](https://developer.salesforce.com/docs/component-library/bundle/lightning:checkboxGroup)
-   Dropdown menu for single selection: [`lightning:combobox`](https://developer.salesforce.com/docs/component-library/bundle/lightning:combobox)
-   Dropdown menu for single selection using the HTML `<select>`: [`lightning:select`](https://developer.salesforce.com/docs/component-library/bundle/lightning:select)
-   Dual listbox for multiple selection: [`lightning:dualListbox`](https://developer.salesforce.com/docs/component-library/bundle/lightning:dualListbox)
-   Radio button: [`lightning:radioGroup`](https://developer.salesforce.com/docs/component-library/bundle/lightning:radioGroup)

Here’s a list of form controls for entering an input value and their corresponding base components.

-   Input field: [`lightning:input`](https://developer.salesforce.com/docs/component-library/bundle/lightning:input)
-   Address compound field: [`lightning:inputAddress`](https://developer.salesforce.com/docs/component-library/bundle/lightning:inputAddress)
-   Geolocation compound field: [`lightning:inputLocation`](https://developer.salesforce.com/docs/component-library/bundle/lightning:inputLocation)
-   Name compound field: [`lightning:inputName`](https://developer.salesforce.com/docs/component-library/bundle/lightning:inputName)
-   Rich text field: [`lightning:inputRichText`](https://developer.salesforce.com/docs/component-library/bundle/lightning:inputRichText)
-   Input range for number selection: [`lightning:slider`](https://developer.salesforce.com/docs/component-library/bundle/lightning:slider)
-   Text input (multi-line): [`lightning:textarea`](https://developer.salesforce.com/docs/component-library/bundle/lightning:textarea)

When you use the base components, the `<label>` and `<input>` elements are automatically configured for you. For form styling, you get the Salesforce Lightning Design System (SLDS) styling. You can also use SLDS utility classes to customize the layout of your form.

Let’s say we want a form that collects a contact’s name, email address, and comments.

In this example, we are using `lightning:inputName`, `lightning:input`, and `lightning:textarea` in a standalone app. To create a grid layout for the fields, use `lightning:layout`.

```nolang
<aura:application access="GLOBAL" extends="force:slds" controller="ContactController"> 
    <aura:attribute name="salutationOptions" type="List" default="[
        {'label': 'Mr.', 'value': 'Mr.'},
        {'label': 'Ms.', 'value': 'Ms.'},
        {'label': 'Mrs.', 'value': 'Mrs.'},
        {'label': 'Dr.', 'value': 'Dr.'},
        {'label': 'Prof.', 'value': 'Prof.'},
    ]"/>
    <aura:attribute name="newContact" type="Contact"
        default="{ 'sobjectType': 'Contact',
                   'Title': '',
                   'FirstName': '',
                   'LastName': '',
                   'Email': '',
                   'Description': '' }" />
    <aura:attribute name="message" type="String" default=""/>
    
    <lightning:card iconName="standard:contact" title="Add a Contact">
        <div class="slds-p-around_medium">
            <lightning:layout>
                <lightning:layoutItem size="4" padding="around-small">
                    <lightning:inputName aura:id="contact"
                                         label="Contact Name"
                                         firstName="{!v.newContact.FirstName}"
                                         lastName="{!v.newContact.LastName}"
                                         salutation="{!v.newContact.Title}"
                                         options="{!v.salutationOptions}"
                                         required="true"/>
                </lightning:layoutItem> 
                <lightning:layoutItem size="8" padding="around-small">
                    <lightning:input aura:id="contact" label="Email" type="email" value="{!v.newContact.Email}"/>
                    <lightning:textarea aura:id="contact" label="Comments" value="{!v.newContact.Description}"/>
                    <lightning:button label="Create Contact" onclick="{!c.handleCreateContact}" variant="brand" class="slds-m-top_medium"/>
                </lightning:layoutItem>
            </lightning:layout>
            <p>{!v.message}</p>
        </div>
    </lightning:card>
</aura:application>
```

The client-side controller submits the user data to the Apex controller and updates the `v.message` attribute when the contact is created successfully.

```javascript
({
    handleCreateContact: function(component, event) {
        var saveContactAction = component.get("c.createContact");
            saveContactAction.setParams({
                "contact": component.get("v.newContact")
            });
        
        // Configure the response handler for the action
        saveContactAction.setCallback(this, function(response) {
            var state = response.getState();
            if(state === "SUCCESS") {
                component.set("v.message", "Contact created successfully");
            }
            else if (state === "ERROR") {
                console.log('Problem saving contact, response state: ' + state);
            }
            else {
                console.log('Unknown problem, response state: ' + state);
            }
        });

        // Send the request to create the new contact
        $A.enqueueAction(saveContactAction);
    },
})
```

The Apex controller uses the `upsert` DML operation to create a contact record.

```apex
public with sharing class ContactController {
    
    @AuraEnabled
    public static Contact createContact(Contact contact){
        upsert contact;
        return contact;
    }
}
```

Notice that the form allows you to submit empty fields without any user interaction. The field-level errors for required fields that you leave empty are displayed only after you interact with the fields. Also, if you enter an invalid email format, the email field displays an error.

Customize the submission behavior to prevent invalid fields from getting submitted. For more information, see [Validating Fields](https://developer.salesforce.com/docs/platform/aura-platform/js/js-validate-fields.md).