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.
If you prefer watching a video, my quick recording –
Happy Optimizing!
