Form Editor Improvements in AEM Forms

Hey guys, - in this video I would like to show you some - multi-authoring enhancements introduced in AEM 6.3. Forms that helps users to create, - structure and manage forms thereby creating a - better user experience. Make sure you are using - the AEM 6.3 version and have all the necessary - feature packs installed. Let’s get started.

I have an AEM 6.3 alter instance running on my local machine. From the homepage let’s - navigate to Forms. Notice that certain - capabilities of AEM forms will be visible only with the - installation of feature packs. So if you do not see a certain - capability, double check to make sure you have - the right feature pack. Let’s click on Forms and Documents.

To better understand the - features let’s create a new form. Click on the Create button - from the top right corner and then select Adaptive Form.

You could see a list of - templates that are in-built with the feature pack. Let’s select the Simple - Enrollment template and then click next. Provide a name and title to - your form and then click done. Click Open to view your form.

Make sure you open the - form in preview mode. You can notice a simple form - which has a logo, form title and three sections to - collect user information. We have successfully created a form using an existing - template at this point.

Under Section One you - can notice three fields named Label 1, 2 and 3. Click on Label 3 and try to - input some values into it.

I’m going to list - different AEM solutions in this text box - separated by a space.

Add in AEM Sites, AEM - Assets and AEM Forms. In previous version of AEM, user could enter data - into a text field but there was not an - option for an end user to style their text to - make it look more readable or not an option to - style their text.

With AEM 6.3 by default - text box components accept only plain text, - however content author can enable rich text editing - mode for an end user. And let’s see how we can do this. Let’s switch from preview - mode to edit mode. Edit mode lets content - authors to easily identify all components and - containers in a form and make necessary changes. Click on the toggle side panel - option and you can see a list of components that - constitute our form on the right side under - Content section.

Pad a note for a form - is its Form Container, you can also notice the - different sections for the form and its nested components - with the current hierarchy. Let’s click on Label - 3 text component and then select the - settings option. On the left side you can - notice a configuration and settings I will elaborate - for the text component. Under the basic - settings you can notice the Allow Rich Text checkbox. Select the checkbox - and save your changes and then go back to - form preview option.

Let’s try to enter the - different AEM solutions again on Label 3 text field. You can notice the rich text - editing option for the text field.

If a user want to create - a bulleted list of items simply select all items and - click on the list option. You can navigate to - full screen option to find several other - styling options. For example let’s pick a - different color for the text. User can also select different - forms, select headers. Exit drop.

Minimize your text - edit screen to exit.

Another enhancement - introduced in AEM 6.3 is the capability - to autofill forms. Let’s switch to preview mode - and double check on the text field.

We do not see an option - to autofill the field. With AEM 6.3 content authors - can enable autofill capability for text boxes, email, - telephone components and adaptive forms to - autofill values for name, address, credit cards, - telephones and email from information stored in - the browser autofill settings. Let’s see how this could be done. Switch from preview mode to - edit mode and toggle side panel. Click on the Label 1 field and - select the settings option.

Change the Element and - Title name to ‘name’ for the first text field. Also check the enable autofill - option and then save your changes.

Switch to preview mode - to see your changes.

Double click on the name field and you should be able to see - the autofill option generated. You also need to make sure - that the autofill capability is turned on for the - browser you are using.

Let’s explore the new HTML5 - input type form field.

The second label field - we have in the form is a numeric box field. Let’s add two more fields - to forms under Section One. Click on the Drag - components here parses and add new components. Search for form and then - add the telephone component.

Similarly add an email - component to the form.

Select the numeric box component - and select the settings option.

Change the label to ‘Number’ and select the Use HTML5 - Number Input Type option and then save your changes.

Select the phone field and then - select the settings option. Select the Enable Autofill - option and then under Patterns you can select the - phone number type from the default three options - or create a custom type. Let’s select the US - Phone Number type. On selecting a particular - phone number type you can also notice the - display pattern type below.

Telephone component also - provides an in-built option to perform validation for - the user entered value. To do this, let’s click on - the validation pattern type and select the US - Phone Number pattern. Validation pattern regex - changes based on your selection and you can notice it below.

In-built validation - and display patterns allow current display patterns. Save your changes.

Click on the Email component - and select the settings option. Select the autofill - option and under Patterns you can notice the validation - pattern for the email field and then save your changes. Click on the preview mode - and let’s check how it looks. Let’s open the form on a mobile - device to see how it looks.

Let’s start filling out the form. Enter a name and then - click on the Number field.

Number is a HTML5 input type - field and when these fields are in focus on mobile - devices and tablets the keyboard displays - specific alphabets, numbers and characters upfront - that are commonly used to input information in the fields. For example the keyboard - for a numeric box primarily shows number - on the top row.

Let’s also see how it - looks for an email field. You can notice that the - characters that commonly used in an email like the - at sign, underscore and period are shown upfront.

Another minor enhancement to - speed up content authoring is the capability to edit - component title in line without having to open - the component settings.

Double click on the Label 3 field and you can easily change the - title to any value in line.

Content authoring can - also be done faster and with fewer mouse - movements and clicks using the keyboard - shortcuts for adaptive forms introduced in AEM 6.3. You can find the keyboard - shortcuts along with this video. -