2

I would like to use Sitecore Forms within another component and add that main component to a page. I want my structure to essentially be as follows:

<!-- OTHER COMPONENTS ABOVE HERE -->
<div class="my-form-component">
    <section class="left">
        <h2>Here is a form</h2>
        <img src="some-image.jpg" />
        <p>Some text would be here</p>
    </section>
    <section class="right">
        <!-- MY SITECORE FORM GOES HERE -->
    </section>
</div>
<!-- MORE COMPONENTS BELOW HERE -->

My template would potentially have the following fields:

  • Heading (single line text)
  • Body (rich text)
  • Sitecore Form (data source)

The content editor should be able to add the component using the add to here button in the experience editor.

enter image description here

Here is an example of what it could end up looking like: enter image description here

I know how to add a basic form to a page but that makes the form full width and does not allow for other non-form data in the component - like a title or image. How would I accomplish this?

  • So you could potentially have page content rendering set to 6 col, and then add your form wrapper as 6 col (or make use of the col splitter). That way they can sit side by side. Or are you finding that the form wrapper / rendering is inserting a div with class row on it ? – Jen Mar 28 '19 at 0:32
1

Here is how you can achieve this - Created a structure view rendering and added a placeholder to insert a form.

Structure.cshtml looks like this

<div class="container-fluid">
    <div class="row">
        <div class="form-container">
            <div class="col-lg-6 col-sm-12 p-0">
                <div class="marketing-nav">
                    @Sc.Placeholder("secondary-navigation")
                </div>
                <div class="marketing-content">
                    @Model.PageContent.Render()
                </div>
            </div>
            <div class="col-lg-6 col-sm-12 p-0">
                @Sc.Placeholder("experience-form")
            </div>
        </div>
    </div>
</div>

Added structure rendering to presentation details Added structure to presentation details

Set the Form's placeholder and data source Form's placeholder and data source setting

Hope this helps.

  • Thanks, but that isn't really what I am looking for. I want the user to be able to add a component to a web page that includes a sitecore form and other fields. – Lee Harrington Mar 25 '19 at 20:39
  • @LeeHarrington - Got it. I edited the answer to fit it your requirements. Please let me know if it helps. – Madhu Anbalagan Mar 25 '19 at 22:05
  • @MadhuAnbalagn Thanks, but this is still not quite what I'm looking for. To use your answer above though for clarification, I want the user to be able to add a component into the existing mainbody placeholder using the "add to here" buttons in the experience editor. This component would include the form and other stuff like in my question above. In your answer, they are adding a separate form placeholder after the mainbody. – Lee Harrington Mar 26 '19 at 14:02

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.