How do I add Sitecore Forms to another component

Question

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.

Here is an example of what it could end up looking like:

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?

Answer 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

Set the Form's placeholder and data source

Hope this helps.