Softr tip: How to access and integrate forms through popup (modal)

Step 1: Create your form

Go to Softr Studio and create a new page called "Form"

Inside this page, add a Dynamic form block and set up all the fields you need for your use case.

Then, remove all paddings (top and bottom) in the Styles Options of the form block.

In the Page Settings > Default Header & Footer, disable both of them.

You should only have a form and no padding in this page.

Step 2: Create a confirmation page

Create a New Page called "Confirmation" (or Duplicate the form page to keep the same layout and delete the form).

Inside this page, you will want to display a short message to the user confirming the form has been submitted. You only need one block.

Select a Static Hero block then put the Image Position at Bottom.

Add a Title, a Subtitle and an image.

Here's an example below:

Title: Great!

Subtitle: Your actions have been saved successfully!

Image: The illustration, GIF or Video of your choice.

Same as the step before, remove all paddings (top and bottom) in the Styles Options of the block.

In the Page Settings > Default Header & Footer, disable both of them.

You should only have a hero and no padding in this page.

Step 3: Link both previous pages together

This step is quite straightforward.

Go back to your "Form" page and below the Submit Button panel:

Select Open Page > "Confirmation"

Go to the page and the section of this page where you want the user to call the form.

Add a static Custom Code block. This block will do the trick, now that we set up our 2-steps user workflow.

Now clear the code within this block and paste the code below:

<div class="w-100 text-center">
  <!-- Button trigger modal -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#ModalCentered">Button Text</button>
  <!-- Modal Integrated Form -->
  <div class="modal fade" id="ModalCenterered" tabindex="-1" role="dialog" aria-labelledby="ModalCenteredTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="ModalLongTitle">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <!-- Iframe New Task to Add -->
        <div class="modal-body"> INSERT IFRAME HERE </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal" onclick="window.location.href='/insert_url' ">Close Modal</button>
        </div>
      </div>
    </div>
  </div>
</div>

(See Bootstrap Documentation for more info)

Step 5: Define a page to load after submitting the form.

At the end of the custom code, in the "modal-footer" section, replace the destination url by the url of your choice.

onclick="window.location.href='/insert_url' " --> replace /insert_url by /home for example.

💡

It is important to set up one even if it's the same page because you will need to reload the page for the user to see the information implemented.

Step 6: Insert form iframe into Custom Code

Now, go back to your page "Form" and on the block settings at the right corner, click on "Embed block".

Copy the code generated then go back to the page at Step 5.

Inside the Custom Code block, insert your iframe between the header and the footer of the modal.

Replace INSERT IFRAME HERE by your iframe in this section:

<div class="modal-body">
		INSERT IFRAME HERE
</div>

Options: All styles would be displayed following Bootstrap conventions.

💡

You can add some CSS to change the look of your modal by implementing some <style> elements inside the Page Custom Code header or Application Custom Code header. Try to avoid doing it directly inside the html.

Step 7: Test it on Preview or Live version

Your users should be able to use forms as Modal now.

Give it a try and enjoy!