0

I have a React component that I want to embed a Sitecore form into:

const ContactForm = ({ title, text, route, fields, history }) => {
  return (
    <StyledContactForm id="contact-form" className="global-padding-all">
      <div className="content">
        <div className="content-text">
          {title && <Text tag="h2" className="h1" field={title} />}
          {text && <RichText field={text} />}
        </div>

        {* EMBED FORM HERE *}
        
      </div>
    </StyledContactForm>
  );
};

My idea is to embed something like this in the commented area above and to specify the ID of the form item as one of the params:


<Form
    sitecoreApiHost={sitecoreApiHost}
    sitecoreApiKey={sitecoreApiKey}
    onRedirect={(url) => history.push(url)}
    className="content-form" 
    id="sc-contact-form"
    form="{74F7BF60-6524-4458-91F2-64D9C48E5934}"
/>

However, this doesn't work, presumably because JSS is expecting every instance of a form to be a separate rendering with that rendering's Rendering Contents Resolver set as Sitecore Forms Resolver and the datasource of that rendering pointed to a Sitecore Form item.

Is there a way this could be done?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.