How to Automatically Close the RSForm!Pro Modal After Form Submission
The RSForm!Pro Modal plugin in Joomla! allows you to display a form within a modal (popup) window that can be triggered by a button, with various placement options and visually appealing effects. After a user submits the form, you might want to automatically close the modal to improve the user experience. This guide explains how to close the modal immediately or with a delay, using a simple JavaScript approach.
Steps to take:
1. Open Form Properties in RSForm!Pro
- Navigate to your form in RSForm!Pro and go to Form Properties.
- In the Form Properties settings, locate the Show Thank You Message option.
- Set this option to Yes.
2. Add JavaScript Code to Close the Modal
Option A: Close the Modal Immediately
To close the modal immediately after form submission:
- Click on the Edit the Thank You Message button.
- Insert the following JavaScript snippet into the Thank You Message editor:
<script>
window.parent.RSFormProModal.closeModal();
</script>
This code will close the modal window as soon as the form is successfully submitted. Save your changes to the form.
Option B: Close the Modal After a Delay
If you'd prefer to display the Thank You Message briefly before closing the modal (for example, to show a confirmation message to users), use this snippet instead:
<script>
window.top.setTimeout('window.parent.RSFormProModal.closeModal()', 3500);
</script>
In this example, the modal will close after 3.5 seconds (3500 milliseconds). You can adjust the delay time by changing the number in the setTimeout
function.
Script Disappearing from the Editor
In some cases, your JavaScript code may be automatically removed after saving. This is often related to the Joomla! editor configuration. To prevent this:
- Go to Global Configuration in Joomla! Admin.
- Under Default Editor, set the editor to None.
- Return to RSForm!Pro, re-add the JavaScript snippet to the Thank You Message, and save your form again.
This configuration should prevent the editor from stripping out your JavaScript code.
With these simple JavaScript snippets, you can automatically close the RSForm!Pro modal after form submission, either immediately or with a short delay. Adjust the settings to match your website’s user experience goals, and don’t forget to check your editor settings if any issues arise.