Tagged: Optimizely Forms

Optimizely Forms Returning 301 on Submission? The Real Cause Was an AntiForgery Token Conflict

Sometimes a form submission issue looks like a routing problem, a redirect issue, or even a load-balancer misconfiguration. In our case, the browser showed a 301 response during Optimizely Forms submission, but the actual root cause was much deeper.
 
Recently, while working on an Optimizely CMS 12 implementation, we encountered a strange issue where Optimizely Forms stopped submitting successfully after introducing AntiForgery token support for custom forms. At first glance, it appeared to be a standard redirect problem. However, after investigating the application logs and working with Optimizely Support, the underlying issue turned out to be an AntiForgery token validation conflict.
 
 

The Problem

As part of a security enhancement initiative, we introduced AntiForgery token support for custom forms within the solution.

The implementation included: AntiForgeryController.cs to generate and manage AntiForgery tokens for custom APIs and forms.


[Route("api/antiforgery")]

public class AntiForgeryController : ControllerBase

{

private readonly IAntiforgery _antiforgery;
private readonly string _antiForgeryToken;


public AntiForgeryController(IAntiforgery antiforgery, IConfiguration configuration)

{

_antiforgery = antiforgery;
_antiForgeryToken = configuration["AntiForgeryToken"];

}


[HttpGet("token")]

public IActionResult GetToken()

{

var tokens = _antiforgery.GetAndStoreTokens(HttpContext);


Response.Cookies.Append(

_antiForgeryToken,

tokens.RequestToken!,

new CookieOptions

{

HttpOnly = false,

Secure = true,

SameSite = SameSiteMode.Strict

});


return Ok(new

{

token = tokens.RequestToken

});

}
}

Shortly after deployment, users reported that Optimizely Forms were no longer submitting successfully.

The behaviour was unusual:

  • Form submissions failed intermittently.
  • Browser Developer Tools showed a 301 response during form submission.
  • Optimizely Forms that previously worked without issues could no longer be submitted.
  • Removing the AntiForgery implementation immediately restored functionality.

This clearly indicated that the issue was related to the newly introduced security implementation.

 

Initial Investigation

Our first assumption was that the problem was related to:

  • URL rewriting
  • Redirect rules
  • Front Door configuration
  • Reverse proxy settings
  • Form endpoint routing

However, none of these areas revealed any issues.

The turning point came when reviewing the application exception logs.

The logs contained the following error:

One or more errors occurred.
 
The required antiforgery request token
was not provided in either form field
“__RequestVerificationToken”
 
or header value
 
“AntiForgeryToken”
 

Further examination showed the exception being raised from Optimizely Forms security validation.
 
System.AggregateException
 
EPiServer.Forms.Internal.Security
.DefaultAntiForgeryValidator.Validate()
 
Microsoft.AspNetCore.Antiforgery
.AntiforgeryValidationException

At this point, it became clear that the 301 response was merely a symptom. The actual failure was occurring during AntiForgery validation.

 

Understanding the Root Cause

Optimizely Forms already includes built-in AntiForgery protection.

When we introduced a custom AntiForgery implementation, we unintentionally created a conflict between:

Custom AntiForgery Token
and
 
Optimizely Forms AntiForgery Validation
 

The Optimizely Forms submission pipeline expected to receive a valid request verification token using its own validation mechanism.

Instead, the request validation process encountered a mismatch and failed with:

AntiforgeryValidationException
 
because the required token was not available in one of the expected locations:
 
__RequestVerificationToken
 
or
 
AntiForgeryToken header
 
As a result, the form submission was rejected before reaching the normal processing pipeline.

The Resolution

The fix was surprisingly simple.

We aligned the AntiForgery configuration so that Optimizely Forms could correctly locate and validate the expected request token.

Configuration update: appsettings.json

{
“AntiForgeryToken”: “RequestVerificationToken”
}

After correcting the AntiForgery configuration and validating the token flow:

  • Optimizely Forms submissions started working again.
  • No further 301 submission issues occurred.
  • Standard Optimizely Forms security validation executed successfully.
  • Custom forms continued to function as expected.

Happy Optimizing!

 
0

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.

Optimizely-Multi-Step-Forms-Step-Form-NuGet-Install-Submission.png

 

Step 1: Contact Details

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

Optimizely-Multi-Step-Forms-Step-Form-NuGet-Install-Submission-1.png

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

Optimizely-Multi-Step-Forms-Step-Form-NuGet-Install-Submission-2.png

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

Optimizely-Multi-Step-Forms-Step-Form-NuGet-Install-Submission-3.png

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.

Optimizely-Multi-Step-Forms-Step-Form-NuGet-Install-Submission-4.png

  • Purchase Date – Text field with Date Format validation.

Optimizely-Multi-Step-Forms-Step-Form-NuGet-Install-Submission-5.png

  • The Step 2 form is ready now.

Optimizely-Multi-Step-Forms-Step-Form-NuGet-Install-Submission-6.png

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.

Optimizely-Multi-Step-Forms-Step-Form-NuGet-Install-Submission-7.png

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

Optimizely-Multi-Step-Forms-Step-Form-NuGet-Install-Submission-7.png

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

Optimizely-Multi-Step-Forms-Step-Form-NuGet-Install-Submission-9.png

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.

Optimizely-Multi-Step-Forms-Step-Form-NuGet-Install-Submission-10.png

Testing the Form:

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

Optimizely-Multi-Step-Forms-Step-Form-NuGet-Install-Submission-11.png

Optimizely-Multi-Step-Forms-Step-Form-NuGet-Install-Submission-11.png

  • The File Upload – multiple file selection worked great!

Optimizely-Multi-Step-Forms-Step-Form-NuGet-Install-Submission-13.png

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

Optimizely-Multi-Step-Forms-Step-Form-NuGet-Install-Submission-14.png

Form Submissions:

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

Optimizely-Multi-Step-Forms-Step-Form-NuGet-Install-Submission-15.png

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

Optimizely-Multi-Step-Forms-Step-Form-NuGet-Install-Submission-17.png

If you prefer watching a video, my quick recording –

Hope this helps.

Happy Optimizing!

0

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

Optimizely-Forms-NuGet-Setup-Install-Submission-1.png

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

Optimizely-Forms-NuGet-Setup-Install-Submission-2.png

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

Optimizely-Forms-NuGet-Setup-Install-Submission-3.png

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

Optimizely-Forms-NuGet-Setup-Install-Submission-4.png

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

Optimizely-Forms-NuGet-Setup-Install-Submission-6.png

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

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

Optimizely-Forms-NuGet-Setup-Install-Submission-8.png

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

Optimizely-Forms-NuGet-Setup-Install-Submission-12.png

Optimizely-Forms-NuGet-Setup-Install-Submission-11.png

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

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

Optimizely-Forms-NuGet-Setup-Install-Submission-12.png

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

Optimizely-Forms-NuGet-Setup-Install-Submission-15.png

If you prefer watching a video, my quick recording –

Happy Optimizing!

1