Tagged: Single Form

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.

• Similarly, I have created the following fields –

First Name – Text

Last Name – Text

Email – Text

Comment – Text Area

Submit Button

Note: The Email is Text field with the Email checkbox checked.

• Form is now ready to be placed in any landing page.

• Let’s create a Standard Page or any page with Content Area.

• Drag and Drop the Contact Us Form into the Content Area and publish the changes.

• Let’s test the Contact Us Form – we could see the new menu CONTACT US PAGE is automatically added when published the page.

• Submitted the Form – Verified that the required field validators are working as expected.

• 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.

Hope this helps.

Happy Optimizing!