Version 2.0.0

- Added `modal` URL parameter and shortcode attribute. - Added `max-width` shortcode attribute. - Added `button-text` shortcode attribute. - Added functions to sanitize and validate shortcode attributes. - Updated documentation.
snokamedia · Dec 30, 2022 · 94aa037 · 94aa037
1 parent e3d9e28
commit 94aa037
Show file tree

Hide file tree

Showing 4 changed files with 308 additions and 33 deletions.
diff --git a/README.md b/README.md
@@ -5,9 +5,12 @@ A plugin that adds a shortcode to embed CanadaHelps donation forms on your WordP
 [![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/W7W1FDHVR)
 
 ## Key Features
-- Embed CanadaHelps donation forms on your site with a shortcode
-- Use URL parameters to customize the donation form
-- Automatic language selection based on user's locale
+- Embed a form on your WordPress site using the [chform] shortcode.
+- Set the language of the form to either English ('en') or French ('fr').
+- Customize the form's height and maximum width.
+- Display the form in a modal window or as a regular embedded form.
+- Pre-fill the form with a donation amount and frequency using URL parameters.
+- Customize the look of the form using CSS variables.
 
 ## Installation
 1. Download and unzip the plugin
@@ -17,30 +20,79 @@ A plugin that adds a shortcode to embed CanadaHelps donation forms on your WordP
 ## Shortcode Attributes
 - **id** (required): The page id from the embed code provided by CanadaHelps.
 - **language** (optional): Specify the language of the donation form. Options: "en" for English or "fr" for French. If not specified, the plugin will use the user's locale to determine the language.
-- **height** (optional): This attribute allows you to set the height of the CanadaHelps donation form iframe. The default value is "1884px". You can specify a numeric value with a "px", "em", "rem", or "%" suffix. Example: `[chform height="775px"]`
+- **height**: The height of the form. Default is '1760px'.
+- **modal**: Whether to display the form in a modal window or not. Can be either 'true' or 'false'. Default is 'false'.
+- **max-width**: The maximum width of the form. Default is '940px'.
+- **button-text**: The text to be displayed on the button. Default is 'Donate Now'.
 
-## Example
+## Examples
 To specify the French form with an iframe height of 775px, you would use the following attributes:
+```
+[chform id=12345 language=fr height=775px]
+```
+To specify the modal form with an iframe height of 735px, max-width of 500px, with the button text 'Donate' you would use the following attributes:
 
-`[chform id=12345 language=fr height=775px]`
-
+```
+[chform id=12345 height=735px max-width=500px modal=true button-text='Donate']
+```
 ## URL Parameters
-You can use the following URL parameters to customize the donation form:
-- **amount**: The amount that the user will donate. Must be at least 3 (CanadaHelps' minimum).
-- **frequency**: The frequency of the donation. Currently, the only option is "monthly".
+In addition to the shortcode parameters, the form can also be customized using the following URL parameters:
+
+- **amount**: The donation amount to be pre-filled in the form.
+- **frequency**: The donation frequency to be pre-selected in the form. Can be either 'one-time' or 'monthly'.
+- **modal**: If set to true will open the modal on page load if the shortcode attribute **modal** is also set to true.
+
+Example
+To display a form with the ID 123 in French in a modal window with a pre-filled donation amount of $50 and a pre-selected frequency of monthly:
+
+```
+http://example.com/page-with-form/?amount=50&frequency=monthly&modal=true
+```
+
+## Modal URL Parameter
 
-## Example
-To specify a donation amount of $1000 with a monthly frequency, you would use the following URL parameters:
+The `modal` URL parameter allows you to open the form in a modal window on page load. To use this parameter, set its value to `true` in the URL.
 
-`?amount=1000&frequency=monthly`
+For example:
+
+```
+http://example.com/page-with-form/?modal=true
+```
+Note that this parameter will only have an effect if the `modal` attribute in the shortcode is also set to `true`. If the `modal` attribute is not set or is set to `false`, the form will not be displayed in a modal window regardless of the value of the `modal` URL parameter.
+
+If the `modal` attribute is set to `true` but the `modal` URL parameter is set to `false`, the form will still be displayed in a modal window when the button is clicked.
 
 ## Troubleshooting
-If you encounter any issues with the plugin, try the following:
-1. Make sure you have entered the correct page id in the shortcode
-2. Check the CanadaHelps website to ensure that their service is functioning properly
-3. If the issue persists, try deactivating and reactivating the plugin, or contact us for further assistance
+
+If you are experiencing issues with the form not displaying or displaying incorrectly, try the following steps:
+
+- Make sure that the ID parameter is correct and that a form with that ID exists.
+- Check that the shortcode is properly formatted and that all required parameters are provided.
+- Check the URL parameters to ensure that they are properly formatted and that they correspond to the options available in the form.
+- Check your theme's CSS to see if it is conflicting with the form's styles.
+- If you have made any customizations to the form's HTML or CSS, make sure that they are properly implemented and do not cause any errors.
+
+If you are still experiencing issues, you can try clearing your browser's cache and cookies or trying a different browser. If the problem persists, you can contact support for further assistance.
+
+## Submitting a GitHub Issue
+
+If you encounter any bugs or have suggestions for improvements, you can submit a GitHub issue by following these steps:
+
+1. Go to the [GitHub repository](https://github.com/your-username/repository-name) for this shortcode.
+2. Click on the "Issues" tab.
+3. Click the "New Issue" button.
+4. Fill out the issue form with a descriptive title, a detailed description of the problem or suggestion, and any relevant information such as error messages or screenshots.
+5. Click the "Submit new issue" button.
+
+Please note that there may be limited support for this shortcode, as it is provided as-is without any guarantees or warranties. If you require more extensive support, you may want to consider hiring a developer to assist you.
 
 ## Disclaimer
+This shortcode is provided "as is" without any guarantees or warranties of any kind. We are not responsible for any damages that may occur as a result of using this shortcode. You use this shortcode at your own risk.
+
+By using this shortcode, you agree to indemnify and hold us harmless from any claims, damages, or expenses that may arise from your use of this shortcode.
+
+We reserve the right to modify, update, or discontinue this shortcode at any time without notice.
+
 Our plugin relies on a third-party service, CanadaHelps (https://www.canadahelps.org/), for displaying your CanadaHelps forms with our shortcode. By using our plugin, you acknowledge and agree to be bound by the CanadaHelps Terms of Use (https://www.canadahelps.org/en/terms-of-use/) and Privacy Policy (https://www.canadahelps.org/en/privacy-policy/). Please make sure to review these documents before using our plugin.
 We are not affiliated with CanadaHelps and are not responsible for their services or any issues that may arise from the use of their services. For any questions or issues related to CanadaHelps, please refer to their website (https://www.canadahelps.org/) or contact them directly.
 If you have any questions or concerns about the use of CanadaHelps in our plugin, please do not hesitate to contact us.
diff --git a/chform-shortcode/README.txt b/chform-shortcode/README.txt
@@ -3,8 +3,8 @@ Contributors: snokamedia
 Donate link: https://www.buymeacoffee.com/snoka
 Tags: shortcode, canadahelps
 Requires at least: 4.7
-Tested up to: 6.0.2
-Stable tag: 1.0.1
+Tested up to: 6.1.1
+Stable tag: 2.0.0
 Requires PHP: 5.3
 License: GPLv3
 License URI: https://www.gnu.org/licenses/gpl-3.0.html
@@ -15,6 +15,8 @@ A plugin that adds a shortcode to embed CanadaHelps donation forms on your WordP
 - Embed CanadaHelps donation forms on your site with a shortcode
 - Use URL parameters to customize the donation form
 - Automatic language selection based on user's locale
+- Modal popop for showing the donation form
+
 
 == Installation ==
 1. Download and unzip the plugin
@@ -24,25 +26,33 @@ A plugin that adds a shortcode to embed CanadaHelps donation forms on your WordP
 == Shortcode Attributes ==
 - **id** (required): The page id from the embed code provided by CanadaHelps.
 - **language** (optional): Specify the language of the donation form. Options: "en" for English or "fr" for French. If not specified, the plugin will use the user's locale to determine the language.
-- **height** (optional): This attribute allows you to set the height of the CanadaHelps donation form iframe. The default value is "1884px". You can specify a numeric value with a "px", "em", "rem", or "%" suffix. Example: [chform height="775px"]
+- **height** (optional): This attribute allows you to set the height of the CanadaHelps donation form iframe. The default value is "1884px". You can specify a numeric value with a "px", "em", "rem", or "%" suffix. Default: '1760px'
+- **modal** (optional): This bool attribute turns the form into and inline modal that opens with button. Options: True or False Default: False 
+- **max-width** (optional): Applicable only if the modal attribute is enabled, set the max-width of the modal iframe container div. You can specify a numeric value with a "px", "em", "rem", or "%" suffix. Default: 940px
+- **button-text** (optional): Applicable only if the modal attribute is enabled, set the button. Default: 'Donate Now'
 
-### Example
+### Examples
 
 To specify the French form with an iframe height of 775px, you would use the following attributes:
 
 [chform id=12345 language=fr height=775px]
 
+To specify the modal form with an iframe height of 735px, max-width of 500px, with the button text 'Donate' you would use the following attributes:
+
+[chform id=12345 height=735px max-width=500px modal=true button-text='Donate']
+
 == URL Parameters ==
 You can use the following URL parameters to customize the donation form:
 
 - **amount**: The amount that the user will donate. Must be at least 3 (CanadaHelps' minimum).
 - **frequency**: The frequency of the donation. Currently, the only option is "monthly".
+- **modal**: If set to true will open the modal on page load if the shortcode attribute **modal** is also set to true.
 
 ### Example
 
-To specify a donation amount of $1000 with a monthly frequency, you would use the following URL parameters:
+To automatically open the modal, specify a donation amount of $1000 with a monthly frequency, you would use the following URL parameters:
 
-?amount=1000&frequency=monthly
+?amount=1000&frequency=monthly&modal=true
 
 == Troubleshooting ==
 If you encounter any issues with the plugin, try the following:

diff --git a/chform-shortcode/js/chform-modal.js b/chform-shortcode/js/chform-modal.js
@@ -0,0 +1,26 @@
+document.addEventListener('DOMContentLoaded', function () {
+    function openModalFromUrl() {
+        // Check for presence of modal URL parameter
+        const urlParams = new URLSearchParams(window.location.search);
+        if (urlParams.has('modal')) {
+            // If present, trigger modal to open
+            document.getElementById('chform-modal').style.display = 'block';
+        }
+    }
+    var modalButton = document.getElementById('chform-modal-button');
+    var modal = document.getElementById('chform-modal');
+    var closeButton = document.getElementsByClassName('chform-modal-close')[0];
+    // Call function to open modal from URL parameter
+    openModalFromUrl();
+    modalButton.addEventListener('click', function () {
+        modal.style.display = 'block';
+    });
+    closeButton.addEventListener('click', function () {
+        modal.style.display = 'none';
+    });
+    window.addEventListener('click', function (event) {
+        if (event.target === modal) {
+            modal.style.display = 'none';
+        }
+    });
+});