Sitecore jss Forms submit action not working in nextjs app

create sitecore jss form with nextjs in headless xm cloud

madhusudan dayal on 7/9/2023 7:55:26 AM

To Implement a Sitecore form in a JSS Next.js app i followed the sitecore offical link Sitecore jss form

I Created Component JssNextForm.tsx in jss App Component folder

Like below code:

import { Form } from '@sitecore-jss/sitecore-jss-react-forms';
import React from 'react';
import { NextRouter, withRouter } from 'next/router';
import {
  sitecoreApiHost,
  sitecoreApiKey
} from 'temp/config';

const JssNextForm = ({ fields, router }: { fields: any; router: NextRouter }) => {
  return (
    <>
       router.push(url)}

      />
    
  );
};
export default withRouter(JssNextForm);

I registered this component into Sitecore rendering as a json rendering item and selected Rendering Contents Resolvers as Sitecore Forms Resolver in layout service field and also data source location as Sitecore form.

I created simple form as Sitecore form, Name input field and a submit button.

I added Sitecore form rendering into page presentation details added form data source and publish.

i started the jss app in connected mode. by runing command jss start:connected

when i submit the form i am geting issue

Unexpected token '<', "<!DOCTYPE "... is not valid JSON

i followed the follwing articls to resolved this issue

1. Sitecore jss form submit action with nextjs

2. Sitecore Forms cannot be submitted if

we set the value of the serverSideRenderingEngineEditOnly app attribute to false

and also serverSideRenderingEngineEditOnly = false into Sitecore.JavaScriptServices.Apps.config in App_Config\Sitecore\JavaScriptServices.

we patch the HeadlessSiteAccess processor after TransferRoutedRequest. name nextjssform.config

i also tried other ways to resolve it,

my console error after form submit

Kindly advice if you have faced and resolved the issues in headless xm cloud jss form with nextjs component, thanks in advance.

Check More Sitecore JSS or Sitecore Headless related articles:

Our Sitecore JSS Articles Click Here!

0 Comments on this post

Comments(0)||Login to Comments

see more..

MYPIBLOGs

create sitecore jss form with nextjs in headless xm cloud

Comments(0)||Login to Comments

Categories