How to place a Sitecore Form in a pop up.

I saw that question a couple of times on Sitecorechat Slack, and I already have done that in a recent project, so I thought to write about it here in my blog.

Bootstrap Modal

The Front End developer has chosen the famous bootstrap modal for the website to use it for all popups.

Below is an example of how a regular form in a bootstrap modal could look like.

I will not walk you through how to create a Sitecore form. The official Sitecore documentation covers that. For this tutorial, I made a Register form following this Walkthrough document.

Add bootstrap files.

To use Bootstrap Modal, I’ll need to reference both the Script and CSS files in the Layout file.

Creating the Modal

You can learn all about bootstrap Modal here, I used the below markup to build the Modal.

I need to have the Sitecore form content to be hosted inside the modal body section, but this way it will include the submit buttons as well. Instead I want to show them in the modal footer section. So I decided to remove both sections and add them in Sitecore form, will replace them with a placeholder so I can show the form in the right place.

We need to add a link or button to trigger the modal. I updated the Register link from the Sitecore tutorial, to have data-toggle and data-target attributes so, clicking on it will show the popup.

<a class="nav-link" href="#" data-toggle="modal" data-target="#exampleModal">Register</a>

All that is left now is to add the form to a page and use the placeholder we have in the modal view file.

Now let’s run the site.

And that’s it, looks good to go.

You can find the complete code for this example and other Forms examples in this repository.