Optimizely Forms Archives - Madhu Anbalagan's Blog

Optimizely: Multi-Step Form Creation Through Submission

I have been exploring Optimizely Forms recently and created a multi-step Customer Support Request Form with File Upload Functionality.

Let’s get started.

Note: Assuming that you have installed the Forms module. If not, please check out my blog post –

https://madhuanbalagan.com/optimizely-forms-setup-configuration-and-submission

Creation of Multi-Step Form

Create a new Form Container in the Forms Tab – named it Customer Support Form.

Step 1: Contact Details

Let’s create the first step by dragging and dropping the Form Step in the Content Area.

Quick Edit to fill the Title, Description, and publish the changes.

Inside the Form Step 1 – Drag and drop the Text elements for the following fields.
- Name
- Email
- Phone

Note: Publish each field to reflect on the Content Area.

Step 2: Product Details

Let’s drag and drop the Form Step element like before, and the following fields.
- Product ID
- Purchase Date
- Warranty Status
Product ID – Created as a Number and checked all validators.

Purchase Date – Text field with Date Format validation.

The Step 2 form is ready now.

Step 3: Issue Description

Let’s drag and drop the Form Step element like before, and the following fields.
- Issue Type
- Issue Description
- File Upload
- Submit button
Issue Type – Selection element options entered manually – could be a datasource as well.

File Upload – Set the Max Limit and Allowed extensions separated by a comma.

The Step 3 part is completed and ready to be placed in a landing page.

Form in Landing Page:

Create a new Standard Page – Customer Support Page.
Drag and drop the newly created Form into the Content Area.
Publish the changes.

Testing the Form:

The new landing page shows in the menu – let’s check it out.

The File Upload – multiple file selection worked great!

Let’s submit the form – you could redirect to a specific page if needed.

Form Submissions:

The submitted records are easy to check by pressing the Form Submissions.

The records can be exported in any of the following formats.

The records are stored forever by default – feel free to change the retention policy as needed for partial and full submissions.

If you prefer watching a video, my quick recording –

Hope this helps.

Happy Optimizing!

October 25, 2025

Optimizely

Optimizely Forms : Setup, Configuration and Submission

I have exploring Optimizely Forms recently – Installed NuGet package to enable Optimizely Forms, created a Contact Us Form and placed in a landing page. Sharing my learning from installation to submission.

Let’s get started.

To enable Optimizely Forms, we need to install NuGet package for Forms – It can be installed via NuGet Console or Manager. I prefer GUI since it’s more visual.

EpiServer.Forms

EpiServer.Forms.Core

EpiServer.Forms.UI

Let’s run the project – localhost:5000 now will have a new tab Forms besides Blocks and Media.

Create a New Form by right clicking on EpiServer Forms – named it as Contact Us Form.

Let’s add the fields by drag and dropping into the Content Area.

Quick Edit to change the Label, Tooltip, Required field and RegEx if needed. Save and Publish the changes.
Note: Each field needs to be published.