Try our conversational search powered by Generative AI!

AI OnAI Off

Render EpiForms through Content Delivery API

Harinarayanan
Harinarayanan
Vote:
 

Hi,

I'm trying to Render a EpiForm in React using Content Delivery API, the HTML from formModel.template is displaying the Form elements without any issues.

But the problem is I'm not clear about the form related CSS and JS files injection into the page,

I know without related CSS and JS files the form submit will not succeed, but not sure how to inject, can you suggest me a proper way to make the form working through ContentDelivery API.?

The related CSS and JS files:
form.formModel.assets.originalJquery 
formModel.assets.prerequisite
formModel.assets.viewModeJs
formModel.assets.jquery
formModel.assets.css
formModel.assets.formInitScript

Thanks in Advance,

Hari

#297406
Edited, Feb 28, 2023 10:23
Eric Herlitz
Eric Herlitz
Vote:
 

Hi Harinarayanan, Optimizely Forms doesn't work using the Content Delivery API unless if you are using it within the context of the CMS site, e.g. running a vue app using content delivery in the same app as where you run the CMS-site; I've been down that road and finally read the documentation, where it clearly states

"Optimizely Forms is only supported by MVC-based websites and HTML5-compliant browsers."

https://docs.developers.optimizely.com/content-cloud/v1.2.0-forms/docs

You may get the output of forms working, but there is no way to post the data back unless your site is running within the above prerequisities. We ended up writing a custom forms engine similar to the one Optimizely has. We've spent 200-300 hours on that project. It is working fine in Blazor WASM over Content Delivery with integrated fields and all.

#297407
Edited, Feb 28, 2023 11:23
Minesh Shah (Netcel)
Minesh Shah (Netcel)
Vote:
 

Does this documentation help on how you may be able to use Optimizely Forms outside of MVC 

Content Delivery API and Optimizely Forms 

#297413
Feb 28, 2023 14:07
Harinarayanan
Harinarayanan
Vote:
 

@Eric, Thanks for sharing your experience, I'm surprised to note how optimizely didn't consider to support Form post after rendering. I'm checking with Optimizely support just to double confirm. and update back the answer/findings if any.

@Minesh, Yes That documentation helped to render the form, but not making form post on submit. so basically its not sending the data to Epi. 

Thank you,

Hari

#297414
Feb 28, 2023 14:22
Eric Herlitz - Feb 28, 2023 19:55
Let us know what they said, thanks!
Harinarayanan
Harinarayanan
Vote:
 

Hi,

Just an update, I see the post request is initating and but failed in Anti-forgery token validation, below are the Exception I see in the log. 

2023-03-01 15:55:12,987 [91] ERROR EPiServer.Forms.Internal.Security.DefaultAntiForgeryValidator: Failed to validate the anti-forgery token
System.Web.Mvc.HttpAntiForgeryException (0x80004005): The provided anti-forgery token was meant for a different claims-based user than the current user.
   at System.Web.Helpers.AntiXsrf.TokenValidator.ValidateTokens(HttpContextBase httpContext, IIdentity identity, AntiForgeryToken sessionToken, AntiForgeryToken fieldToken)
   at System.Web.Helpers.AntiXsrf.AntiForgeryWorker.Validate(HttpContextBase httpContext, String cookieToken, String formToken)
   at System.Web.Helpers.AntiForgery.Validate(String cookieToken, String formToken)
   at EPiServer.Forms.Internal.Security.DefaultAntiForgeryValidator.Validate(HttpContextBase httpContext)
System.Web.Mvc.HttpAntiForgeryException (0x80004005): The provided anti-forgery token was meant for a different claims-based user than the current user.
   at System.Web.Helpers.AntiXsrf.TokenValidator.ValidateTokens(HttpContextBase httpContext, IIdentity identity, AntiForgeryToken sessionToken, AntiForgeryToken fieldToken)
   at System.Web.Helpers.AntiXsrf.AntiForgeryWorker.Validate(HttpContextBase httpContext, String cookieToken, String formToken)
   at System.Web.Helpers.AntiForgery.Validate(String cookieToken, String formToken)
   at EPiServer.Forms.Internal.Security.DefaultAntiForgeryValidator.Validate(HttpContextBase httpContext)
2023-03-01 15:55:12,988 [91] ERROR EPiServer.Global: Unhandled exception in ASP.NET
System.Web.Mvc.HttpAntiForgeryException (0x80004005): Your anti-forgery token is not correct!
   at EPiServer.Forms.Internal.Security.AntiForgeryService.Validate(HttpContextBase httpContext)
   at EPiServer.Forms.Controllers.DataSubmitController.Submit()
   at lambda_method(Closure , ControllerBase , Object[] )
   at System.Web.Mvc.ActionMethodDispatcher.Execute(ControllerBase controller, Object[] parameters)
   at System.Web.Mvc.ReflectedActionDescriptor.Execute(ControllerContext controllerContext, IDictionary`2 parameters)
   at System.Web.Mvc.ControllerActionInvoker.InvokeActionMethod(ControllerContext controllerContext, ActionDescriptor actionDescriptor, IDictionary`2 parameters)
   at System.Web.Mvc.ControllerActionInvoker.<>c__DisplayClass24_0.<InvokeActionMethodWithFilters>b__0()
   at System.Web.Mvc.ControllerActionInvoker.InvokeActionMethodFilter(IActionFilter filter, ActionExecutingContext preContext, Func`1 continuation)
   at System.Web.Mvc.ControllerActionInvoker.<>c__DisplayClass24_1.<InvokeActionMethodWithFilters>b__2()
   at System.Web.Mvc.ControllerActionInvoker.InvokeActionMethodFilter(IActionFilter filter, ActionExecutingContext preContext, Func`1 continuation)
   at System.Web.Mvc.ControllerActionInvoker.<>c__DisplayClass24_1.<InvokeActionMethodWithFilters>b__2()
   at System.Web.Mvc.ControllerActionInvoker.InvokeActionMethodFilter(IActionFilter filter, ActionExecutingContext preContext, Func`1 continuation)
   at System.Web.Mvc.ControllerActionInvoker.<>c__DisplayClass24_1.<InvokeActionMethodWithFilters>b__2()
   at System.Web.Mvc.ControllerActionInvoker.InvokeActionMethodFilter(IActionFilter filter, ActionExecutingContext preContext, Func`1 continuation)
   at System.Web.Mvc.ControllerActionInvoker.<>c__DisplayClass24_1.<InvokeActionMethodWithFilters>b__2()
   at System.Web.Mvc.ControllerActionInvoker.InvokeActionMethodFilter(IActionFilter filter, ActionExecutingContext preContext, Func`1 continuation)
   at System.Web.Mvc.ControllerActionInvoker.<>c__DisplayClass24_1.<InvokeActionMethodWithFilters>b__2()
   at System.Web.Mvc.ControllerActionInvoker.InvokeActionMethodFilter(IActionFilter filter, ActionExecutingContext preContext, Func`1 continuation)
   at System.Web.Mvc.ControllerActionInvoker.<>c__DisplayClass24_1.<InvokeActionMethodWithFilters>b__2()
   at System.Web.Mvc.ControllerActionInvoker.InvokeActionMethodFilter(IActionFilter filter, ActionExecutingContext preContext, Func`1 continuation)
   at System.Web.Mvc.ControllerActionInvoker.<>c__DisplayClass24_1.<InvokeActionMethodWithFilters>b__2()
   at System.Web.Mvc.ControllerActionInvoker.InvokeActionMethodFilter(IActionFilter filter, ActionExecutingContext preContext, Func`1 continuation)
   at System.Web.Mvc.ControllerActionInvoker.<>c__DisplayClass24_1.<InvokeActionMethodWithFilters>b__2()
   at System.Web.Mvc.ControllerActionInvoker.InvokeActionMethodWithFilters(ControllerContext controllerContext, IList`1 filters, ActionDescriptor actionDescriptor, IDictionary`2 parameters)
   at System.Web.Mvc.ControllerActionInvoker.InvokeAction(ControllerContext controllerContext, String actionName)
   at System.Web.Mvc.Controller.ExecuteCore()
   at System.Web.Mvc.ControllerBase.Execute(RequestContext requestContext)
   at System.Web.Mvc.ControllerBase.System.Web.Mvc.IController.Execute(RequestContext requestContext)
   at EPiServer.Forms.Controllers.FormsMvcHandler.ProcessController(IController controller)
   at EPiServer.Forms.Controllers.FormsMvcHandler.BeginProcessRequest(HttpContextBase httpContext, AsyncCallback callback, Object state)
   at System.Web.Mvc.MvcHandler.BeginProcessRequest(HttpContext httpContext, AsyncCallback callback, Object state)
   at System.Web.Mvc.MvcHandler.System.Web.IHttpAsyncHandler.BeginProcessRequest(HttpContext context, AsyncCallback cb, Object extraData)
   at System.Web.HttpApplication.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute()
   at System.Web.HttpApplication.<>c__DisplayClass285_0.<ExecuteStepImpl>b__0()
   at System.Web.HttpApplication.StepInvoker.Invoke(Action executionStep)
   at System.Web.HttpApplication.StepInvoker.<>c__DisplayClass4_0.<Invoke>b__0()
   at Microsoft.AspNet.TelemetryCorrelation.TelemetryCorrelationHttpModule.OnExecuteRequestStep(HttpContextBase context, Action step)
   at System.Web.HttpApplication.<>c__DisplayClass284_0.<OnExecuteRequestStep>b__0(Action nextStepAction)
   at System.Web.HttpApplication.StepInvoker.Invoke(Action executionStep)
   at System.Web.HttpApplication.StepInvoker.<>c__DisplayClass4_0.<Invoke>b__0()
   at Microsoft.ApplicationInsights.Web.ApplicationInsightsHttpModule.OnExecuteRequestStep(HttpContextBase context, Action step) in /_/WEB/Src/Web/Web/ApplicationInsightsHttpModule.cs:line 164
   at System.Web.HttpApplication.<>c__DisplayClass284_0.<OnExecuteRequestStep>b__0(Action nextStepAction)
   at System.Web.HttpApplication.StepInvoker.Invoke(Action executionStep)
   at System.Web.HttpApplication.ExecuteStepImpl(IExecutionStep step)
   at System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously)
System.Web.Mvc.HttpAntiForgeryException (0x80004005): Your anti-forgery token is not correct!
   at EPiServer.Forms.Internal.Security.AntiForgeryService.Validate(HttpContextBase httpContext)
   at EPiServer.Forms.Controllers.DataSubmitController.Submit()
   at lambda_method(Closure , ControllerBase , Object[] )
   at System.Web.Mvc.ActionMethodDispatcher.Execute(ControllerBase controller, Object[] parameters)
   at System.Web.Mvc.ReflectedActionDescriptor.Execute(ControllerContext controllerContext, IDictionary`2 parameters)
   at System.Web.Mvc.ControllerActionInvoker.InvokeActionMethod(ControllerContext controllerContext, ActionDescriptor actionDescriptor, IDictionary`2 parameters)
   at System.Web.Mvc.ControllerActionInvoker.<>c__DisplayClass24_0.<InvokeActionMethodWithFilters>b__0()
   at System.Web.Mvc.ControllerActionInvoker.InvokeActionMethodFilter(IActionFilter filter, ActionExecutingContext preContext, Func`1 continuation)
   at System.Web.Mvc.ControllerActionInvoker.<>c__DisplayClass24_1.<InvokeActionMethodWithFilters>b__2()
   at System.Web.Mvc.ControllerActionInvoker.InvokeActionMethodFilter(IActionFilter filter, ActionExecutingContext preContext, Func`1 continuation)
   at System.Web.Mvc.ControllerActionInvoker.<>c__DisplayClass24_1.<InvokeActionMethodWithFilters>b__2()
   at System.Web.Mvc.ControllerActionInvoker.InvokeActionMethodFilter(IActionFilter filter, ActionExecutingContext preContext, Func`1 continuation)
   at System.Web.Mvc.ControllerActionInvoker.<>c__DisplayClass24_1.<InvokeActionMethodWithFilters>b__2()
   at System.Web.Mvc.ControllerActionInvoker.InvokeActionMethodFilter(IActionFilter filter, ActionExecutingContext preContext, Func`1 continuation)
   at System.Web.Mvc.ControllerActionInvoker.<>c__DisplayClass24_1.<InvokeActionMethodWithFilters>b__2()
   at System.Web.Mvc.ControllerActionInvoker.InvokeActionMethodFilter(IActionFilter filter, ActionExecutingContext preContext, Func`1 continuation)
   at System.Web.Mvc.ControllerActionInvoker.<>c__DisplayClass24_1.<InvokeActionMethodWithFilters>b__2()
   at System.Web.Mvc.ControllerActionInvoker.InvokeActionMethodFilter(IActionFilter filter, ActionExecutingContext preContext, Func`1 continuation)
   at System.Web.Mvc.ControllerActionInvoker.<>c__DisplayClass24_1.<InvokeActionMethodWithFilters>b__2()
   at System.Web.Mvc.ControllerActionInvoker.InvokeActionMethodFilter(IActionFilter filter, ActionExecutingContext preContext, Func`1 continuation)
   at System.Web.Mvc.ControllerActionInvoker.<>c__DisplayClass24_1.<InvokeActionMethodWithFilters>b__2()
   at System.Web.Mvc.ControllerActionInvoker.InvokeActionMethodFilter(IActionFilter filter, ActionExecutingContext preContext, Func`1 continuation)
   at System.Web.Mvc.ControllerActionInvoker.<>c__DisplayClass24_1.<InvokeActionMethodWithFilters>b__2()
   at System.Web.Mvc.ControllerActionInvoker.InvokeActionMethodWithFilters(ControllerContext controllerContext, IList`1 filters, ActionDescriptor actionDescriptor, IDictionary`2 parameters)
   at System.Web.Mvc.ControllerActionInvoker.InvokeAction(ControllerContext controllerContext, String actionName)
   at System.Web.Mvc.Controller.ExecuteCore()
   at System.Web.Mvc.ControllerBase.Execute(RequestContext requestContext)
   at System.Web.Mvc.ControllerBase.System.Web.Mvc.IController.Execute(RequestContext requestContext)
   at EPiServer.Forms.Controllers.FormsMvcHandler.ProcessController(IController controller)
   at EPiServer.Forms.Controllers.FormsMvcHandler.BeginProcessRequest(HttpContextBase httpContext, AsyncCallback callback, Object state)
   at System.Web.Mvc.MvcHandler.BeginProcessRequest(HttpContext httpContext, AsyncCallback callback, Object state)
   at System.Web.Mvc.MvcHandler.System.Web.IHttpAsyncHandler.BeginProcessRequest(HttpContext context, AsyncCallback cb, Object extraData)
   at System.Web.HttpApplication.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute()
   at System.Web.HttpApplication.<>c__DisplayClass285_0.<ExecuteStepImpl>b__0()
   at System.Web.HttpApplication.StepInvoker.Invoke(Action executionStep)
   at System.Web.HttpApplication.StepInvoker.<>c__DisplayClass4_0.<Invoke>b__0()
   at Microsoft.AspNet.TelemetryCorrelation.TelemetryCorrelationHttpModule.OnExecuteRequestStep(HttpContextBase context, Action step)
   at System.Web.HttpApplication.<>c__DisplayClass284_0.<OnExecuteRequestStep>b__0(Action nextStepAction)
   at System.Web.HttpApplication.StepInvoker.Invoke(Action executionStep)
   at System.Web.HttpApplication.StepInvoker.<>c__DisplayClass4_0.<Invoke>b__0()
   at Microsoft.ApplicationInsights.Web.ApplicationInsightsHttpModule.OnExecuteRequestStep(HttpContextBase context, Action step) in /_/WEB/Src/Web/Web/ApplicationInsightsHttpModule.cs:line 164
   at System.Web.HttpApplication.<>c__DisplayClass284_0.<OnExecuteRequestStep>b__0(Action nextStepAction)
   at System.Web.HttpApplication.StepInvoker.Invoke(Action executionStep)
   at System.Web.HttpApplication.ExecuteStepImpl(IExecutionStep step)
   at System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously)

#297466
Mar 01, 2023 10:53
Harinarayanan
Harinarayanan
Vote:
 

Hi,

To overcome the above issue, we have generated AntiForgeryToken @Html.AntiForgeryToken() on server side rendering and replaced with CD.Forms after rendering in the __RequestVerificationToken hidden input, and the form submission is successful now. 

So the expectation is token should be generated during server side rendering.

Regards,

Hari

#297798
Mar 06, 2023 13:40
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.