| @@ -5,9 +5,9 @@ | ||
| 5 | 5 | /** |
| 6 | 6 | * Plugin Name: FormFacade |
| 7 | 7 | * Plugin URI: https://formfacade.com/website/how-to-embed-google-forms-in-wordpress.html |
| 8 | 8 | * Description: Customize your Google Form to suit your wordpress site |
| 9 | -* Version: 1.3.2 | |
| 9 | +* Version: 2.0 | |
| 10 | 10 | * Author: FormFacade |
| 11 | 11 | * Author URI: https://formfacade.com |
| 12 | 12 | * License: GPL v2 or Later |
| 13 | 13 | * Text Domain: formfacade |
| @@ -34,8 +34,37 @@ | ||
| 34 | 34 | defined('ABSPATH') or die('Sorry! This request is not called properly'); |
| 35 | 35 | function_exists('add_action') or die('Sorry! This request is called outside wordpress'); |
| 36 | 36 | |
| 37 | 37 | |
| 38 | +// Cache-bust the plugin's own CSS/JS by file modification time so browsers | |
| 39 | +// always pick up edits instead of serving a stale cached copy. | |
| 40 | +function formfacade_asset_ver($relative_path) { | |
| 41 | + $full = plugin_dir_path(__FILE__) . ltrim($relative_path, '/'); | |
| 42 | + return file_exists($full) ? filemtime($full) : '1.4.1'; | |
| 43 | +} | |
| 44 | + | |
| 45 | +// Shared CSS that makes an embedded iframe fill the admin canvas with no scrollbars. | |
| 46 | +function formfacade_fullscreen_iframe_css() { | |
| 47 | + ?> | |
| 48 | + <style> | |
| 49 | + #wpcontent { padding-left: 0; } | |
| 50 | + #wpbody-content { padding-bottom: 0; } | |
| 51 | + #wpfooter { display: none; } | |
| 52 | + .wrap.ff-fullscreen { | |
| 53 | + margin: 0; | |
| 54 | + height: calc(100vh - var(--wp-admin--admin-bar--height, 32px)); | |
| 55 | + } | |
| 56 | + .wrap.ff-fullscreen iframe { | |
| 57 | + display: block; | |
| 58 | + width: 100%; | |
| 59 | + height: 100%; | |
| 60 | + border: 0; | |
| 61 | + } | |
| 62 | + </style> | |
| 63 | + <?php | |
| 64 | +} | |
| 65 | + | |
| 66 | + | |
| 38 | 67 | // Add menu items |
| 39 | 68 | add_action('admin_menu', 'formfacade_plugin_menu'); |
| 40 | 69 | |
| 41 | 70 | function formfacade_plugin_menu() { |
| @@ -79,8 +108,14 @@ | ||
| 79 | 108 | ); |
| 80 | 109 | } |
| 81 | 110 | |
| 82 | 111 | function formfacade_home_page() { |
| 112 | + wp_enqueue_style('formfacade_fonts', 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Onest:wght@400;500;600;700&display=swap', [], null); | |
| 113 | + wp_enqueue_style('formfacade_styles_bootstrap', plugins_url('assets/css/bootstrap.min.css', __FILE__), [], '1.0.0'); | |
| 114 | + wp_enqueue_style('formfacade_styles_custom', plugins_url('assets/css/style.css', __FILE__), [], formfacade_asset_ver('assets/css/style.css')); | |
| 115 | + | |
| 116 | + wp_enqueue_script('formfacade_home_script', plugins_url('assets/js/home.js', __FILE__), [], formfacade_asset_ver('assets/js/home.js'), true); | |
| 117 | + wp_enqueue_script('lottie_script', plugins_url('assets/js/lottie.js', __FILE__), [], '5.7.13', true); | |
| 83 | 118 | include(plugin_dir_path(__FILE__) . 'templates/home.php'); |
| 84 | 119 | } |
| 85 | 120 | |
| 86 | 121 | function formfacade_dashboard_page() { |
| @@ -86,16 +121,31 @@ | ||
| 86 | 121 | function formfacade_dashboard_page() { |
| 87 | 122 | $domain = "https://formfacade.com"; |
| 88 | 123 | $url = $domain . "/login/website.html"; |
| 89 | 124 | |
| 90 | - if ( isset($_GET['redirectURL']) ) { | |
| 91 | - $url = $domain . $_GET['redirectURL']; | |
| 125 | + if ( isset($_GET['redirectURL']) ) { | |
| 126 | + // Sanitize and validate the redirectURL parameter | |
| 127 | + $redirectURL = sanitize_url($_GET['redirectURL']); | |
| 128 | + | |
| 129 | + // Ensure redirectURL only contains alphanumeric characters and slashes | |
| 130 | + if (preg_match('/^[a-zA-Z0-9\/\-_.]+$/', $redirectURL)) { | |
| 131 | + // Ensure redirectURL starts with a single slash | |
| 132 | + if (substr($redirectURL, 0, 1) === '/') { | |
| 133 | + $redirectURL = substr($redirectURL, 1); | |
| 134 | + } | |
| 135 | + | |
| 136 | + $url = $domain . '/' . $redirectURL; | |
| 137 | + } else { | |
| 138 | + // Handle invalid redirectURL, possibly log an error or redirect to a default URL | |
| 139 | + $url = $domain . "/404.html"; | |
| 140 | + } | |
| 92 | 141 | } |
| 93 | 142 | |
| 143 | + formfacade_fullscreen_iframe_css(); | |
| 94 | 144 | ?> |
| 95 | - <div class="wrap" style="height: 100vh;"> | |
| 96 | - <iframe id="myIframe" src="<?php echo $url; ?>" width="100%" height="100%" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe> | |
| 97 | - </div> | |
| 145 | + <div class="wrap ff-fullscreen"> | |
| 146 | + <iframe id="myIframe" src="<?php echo esc_url($url); ?>" title="Formfacade Dashboard">Loading…</iframe> | |
| 147 | + </div> | |
| 98 | 148 | <?php |
| 99 | 149 | } |
| 100 | 150 | |
| 101 | 151 | // Function to run on plugin activation |
| @@ -129,20 +179,17 @@ | ||
| 129 | 179 | } |
| 130 | 180 | |
| 131 | 181 | function embed_google_forms_page() { |
| 132 | 182 | $pages = get_pages(); |
| 133 | - foreach ( $pages as &$page ) { | |
| 134 | - $page->edit_url = get_edit_post_link( $page->ID ); | |
| 183 | + foreach ($pages as &$page) { | |
| 184 | + $page->edit_url = get_edit_post_link($page->ID); | |
| 135 | 185 | } |
| 136 | - | |
| 137 | - $pages_json = json_encode($pages); | |
| 186 | + | |
| 138 | 187 | $domain = "https://formfacade.com"; |
| 139 | 188 | $url = $domain . "/wordpress/onboard.html"; |
| 140 | 189 | $preview_url = ''; |
| 141 | - | |
| 142 | 190 | $admin_url = admin_url('admin.php?page=formfacade_dashboard'); |
| 143 | 191 | |
| 144 | - | |
| 145 | 192 | $user = wp_get_current_user(); |
| 146 | 193 | $user_details = array( |
| 147 | 194 | 'email' => $user->user_email, |
| 148 | 195 | 'displayName' => $user->display_name, |
| @@ -152,57 +199,92 @@ | ||
| 152 | 199 | 'homeURL' => get_home_url(), |
| 153 | 200 | 'emailHash' => md5($user->user_email), |
| 154 | 201 | 'siteHash' => md5(get_site_url()) |
| 155 | 202 | ); |
| 156 | - $user_json = json_encode($user_details); | |
| 157 | - | |
| 158 | - // Handle form submission | |
| 159 | - if ( isset($_GET['pageId']) && isset($_GET['userId']) && isset($_GET['publishId'])) { | |
| 160 | - $page_id = intval($_GET['pageId']); | |
| 161 | - $url = $url . "?pageId=" . $page_id . "&userId=" . $_GET['userId'] . "&publishId=" . $_GET['publishId']; | |
| 203 | + | |
| 204 | + // Sanitize and validate the input | |
| 205 | + $page_id = isset($_GET['pageId']) ? intval(sanitize_text_field(wp_unslash($_GET['pageId']))) : 0; | |
| 206 | + $user_id = isset($_GET['userId']) ? sanitize_text_field(wp_unslash($_GET['userId'])) : ''; | |
| 207 | + $publish_id = isset($_GET['publishId']) ? sanitize_text_field(wp_unslash($_GET['publishId'])) : ''; | |
| 208 | + $page_name = isset($_GET['pageName']) ? sanitize_text_field(wp_unslash($_GET['pageName'])) : ''; | |
| 209 | + | |
| 210 | + // Validate that the IDs are numeric or alphanumeric as appropriate | |
| 211 | + if ($page_id > 0 && $user_id && $publish_id) { | |
| 212 | + $url = $url . "?pageId=" . esc_attr($page_id) . "&userId=" . esc_attr($user_id) . "&publishId=" . esc_attr($publish_id); | |
| 162 | 213 | $preview_url = get_permalink($page_id) . '?preview=true'; |
| 163 | - emebd_wordpress_script($page_id, $_GET['userId'], $_GET['publishId']); | |
| 164 | - } | |
| 165 | - | |
| 214 | + emebd_wordpress_script($page_id, $user_id, $publish_id); | |
| 215 | + } else if($page_name){ | |
| 216 | + $page_id = formfacade_new_page($page_name, $user_id, $publish_id); | |
| 217 | + $url = $url . "?pageId=" . esc_attr($page_id) . "&userId=" . esc_attr($user_id) . "&publishId=" . esc_attr($publish_id); | |
| 218 | + $preview_url = get_permalink($page_id) . '?preview=true'; | |
| 219 | + } | |
| 220 | + | |
| 221 | + | |
| 222 | + formfacade_fullscreen_iframe_css(); | |
| 166 | 223 | ?> |
| 167 | - <div class="wrap" style="height: 100vh;"> | |
| 168 | - <iframe id="myIframe" src="<?php echo $url; ?>" width="100%" height="100%" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe> | |
| 169 | - </div> | |
| 170 | - <script type="text/javascript"> | |
| 171 | - document.addEventListener('DOMContentLoaded', function() { | |
| 172 | - var iframe = document.getElementById('myIframe'); | |
| 173 | - iframe.addEventListener('load', function() { | |
| 174 | - var pages = <?php echo $pages_json; ?>; | |
| 175 | - var preview_url = "<?php echo $preview_url; ?>"; | |
| 176 | - var user = <?php echo $user_json; ?>; | |
| 224 | + <div class="wrap ff-fullscreen"> | |
| 225 | + <iframe id="myIframe" src="<?php echo esc_url($url); ?>" title="Formfacade">Loading…</iframe> | |
| 226 | + </div> | |
| 227 | + <?php | |
| 177 | 228 | |
| 178 | - var data = { pages: pages, previewURL: preview_url, wordpressUser: user }; | |
| 179 | - iframe.contentWindow.postMessage(data, "<?php echo $domain; ?>"); | |
| 180 | - }); | |
| 229 | + // Register and enqueue the script | |
| 230 | + wp_register_script('formfacade_script', '', [], time(), true); | |
| 231 | + wp_enqueue_script('formfacade_script'); | |
| 232 | + | |
| 233 | + // Add inline script | |
| 234 | + $inline_script = " | |
| 235 | + document.addEventListener('DOMContentLoaded', function() { | |
| 236 | + var iframe = document.getElementById('myIframe'); | |
| 237 | + var postedMessage = false; | |
| 238 | + | |
| 239 | + function postMessageToIframe() { | |
| 240 | + var pages = " . wp_json_encode($pages) . "; | |
| 241 | + var preview_url = '" . esc_url($preview_url) . "'; | |
| 242 | + var user = " . wp_json_encode($user_details) . "; | |
| 243 | + var data = {pages: pages, previewURL: preview_url, wordpressUser: user }; | |
| 244 | + // console.log('Before postinggggggg', data); | |
| 245 | + iframe.contentWindow.postMessage(data, '" . esc_url($domain) . "'); | |
| 246 | + postedMessage = true; | |
| 247 | + clearInterval(interval); | |
| 248 | + } | |
| 249 | + | |
| 250 | + iframe.addEventListener('load', function() { | |
| 251 | + if (!postedMessage) postMessageToIframe(); | |
| 181 | 252 | }); |
| 182 | 253 | |
| 254 | + var interval = setInterval(function() { | |
| 255 | + var iframe = document.getElementById('myIframe'); | |
| 256 | + if (!postedMessage && iframe) postMessageToIframe(); | |
| 257 | + }, 1000); | |
| 258 | + | |
| 183 | 259 | window.addEventListener('message', function(event) { |
| 184 | - if (event.origin !== "<?php echo $domain; ?>") return; // Verify the origin | |
| 260 | + if (event.origin !== '" . esc_url($domain) . "') return; // Verify the origin | |
| 185 | 261 | var formData = event.data; // This will contain the form data sent from the iframe |
| 186 | - console.log('Form data received 1111:', formData); | |
| 187 | - var admin_url = "<?php echo $admin_url; ?>"; | |
| 188 | - if(formData && formData.indexOf('pageId') > -1) { | |
| 189 | - var data = JSON.parse(formData) | |
| 262 | + var admin_url = '" . esc_url($admin_url) . "'; | |
| 263 | + if (typeof formData !== 'string') return; // only handle string (JSON) messages from the iframe | |
| 264 | + if (formData && formData.indexOf('pageId') > -1) { | |
| 265 | + var data = JSON.parse(formData); | |
| 190 | 266 | var url = window.location.href; |
| 191 | - var separator = url.indexOf('?') !== -1 ? '&' : '?'; | |
| 192 | - url += separator + `pageId=${data.pageId}&userId=${data.userId}&publishId=${data.publishId}`; | |
| 267 | + var separator = url.indexOf('?') !== -1 ? '&' : '?'; | |
| 268 | + url += separator + 'pageId=' + data.pageId + '&userId=' + data.userId + '&publishId=' + data.publishId; | |
| 193 | 269 | window.location.href = url; |
| 194 | - } | |
| 270 | + } else if(formData && formData.indexOf('pageName') > -1) { | |
| 271 | + var data = JSON.parse(formData); | |
| 272 | + var url = window.location.href; | |
| 273 | + var separator = url.indexOf('?') !== -1 ? '&' : '?'; | |
| 274 | + url += separator + 'pageName=' + data.pageName + '&userId=' + data.userId + '&publishId=' + data.publishId; | |
| 275 | + window.location.href = url; | |
| 276 | + } | |
| 195 | 277 | |
| 196 | - if(formData && formData.indexOf('redirectURL') > -1) { | |
| 278 | + if (formData && formData.indexOf('redirectURL') > -1) { | |
| 197 | 279 | var data = JSON.parse(formData); |
| 198 | - url = admin_url + `&redirectURL=${data.redirectURL}`; | |
| 280 | + url = admin_url + '&redirectURL=' + data.redirectURL; | |
| 199 | 281 | window.location.href = url; |
| 200 | 282 | } |
| 201 | 283 | }); |
| 202 | - </script> | |
| 203 | - <?php | |
| 204 | - | |
| 284 | + }); | |
| 285 | + "; | |
| 286 | + wp_add_inline_script('formfacade_script', $inline_script); | |
| 205 | 287 | } |
| 206 | 288 | |
| 207 | 289 | function emebd_wordpress_script($pageId, $userId, $publishId) { |
| 208 | 290 | $page = get_post($pageId); |
| @@ -208,14 +290,19 @@ | ||
| 208 | 290 | $page = get_post($pageId); |
| 209 | 291 | if ($page) { |
| 210 | 292 | // Get the current post content |
| 211 | 293 | $existing_content = $page->post_content; |
| 294 | + $embedUrl = 'https://formfacade.com/include/' . $userId . '/form/' . $publishId . '/wordpress.js?div=ff-compose'; | |
| 212 | 295 | |
| 213 | 296 | if (strpos($existing_content, $publishId) === false) { |
| 214 | 297 | $block_content = '<!-- wp:html -->'; |
| 215 | 298 | $block_content .= '<!-- Custom HTML block -->'; |
| 216 | - $block_content .= '<div id="ff-compose"></div>'; | |
| 217 | - $block_content .= '<script async defer src="https://formfacade.com/include/' . $userId . '/form/' . $publishId . '/wordpress.js?div=ff-compose"></script>'; | |
| 299 | + | |
| 300 | + wp_register_script('formfacade_embed_script', $embedUrl, [], time(), true); | |
| 301 | + wp_enqueue_script('formfacade_embed_script'); | |
| 302 | + $script_tag = wp_get_inline_script_tag('', ['src' => $embedUrl, 'async' => true, 'defer' => true]); | |
| 303 | + $block_content .= '<div id="ff-compose"></div>' . $script_tag; | |
| 304 | + | |
| 218 | 305 | $block_content .= '<!-- /Custom HTML block -->'; |
| 219 | 306 | $block_content .= '<!-- /wp:html -->'; |
| 220 | 307 | $updated_content = $existing_content . "\n\n" . $block_content; |
| 221 | 308 | wp_update_post([ 'ID' => $pageId, 'post_content' => $updated_content, ]); |
| @@ -222,9 +309,38 @@ | ||
| 222 | 309 | } |
| 223 | 310 | } |
| 224 | 311 | } |
| 225 | 312 | |
| 313 | +function formfacade_new_page($pageName, $userId, $publishId) { | |
| 314 | + $page = array( | |
| 315 | + 'post_title' => $pageName, | |
| 316 | + 'post_content' => '', | |
| 317 | + 'post_status' => 'publish', | |
| 318 | + 'post_type' => 'page' | |
| 319 | + ); | |
| 226 | 320 | |
| 321 | + $embedUrl = 'https://formfacade.com/include/' . $userId . '/form/' . $publishId . '/wordpress.js?div=ff-compose'; | |
| 322 | + $pageId = wp_insert_post($page); | |
| 323 | + | |
| 324 | + if ($pageId) { | |
| 325 | + $block_content = '<!-- wp:html -->'; | |
| 326 | + $block_content .= '<!-- Custom HTML block -->'; | |
| 327 | + | |
| 328 | + wp_register_script('formfacade_embed_script', $embedUrl, [], time(), true); | |
| 329 | + wp_enqueue_script('formfacade_embed_script'); | |
| 330 | + $script_tag = wp_get_inline_script_tag('', ['src' => $embedUrl, 'async' => true, 'defer' => true]); | |
| 331 | + $block_content .= '<div id="ff-compose"></div>' . $script_tag; | |
| 332 | + | |
| 333 | + $block_content .= '<!-- /Custom HTML block -->'; | |
| 334 | + $block_content .= '<!-- /wp:html -->'; | |
| 335 | + // New page starts empty, so the embed block is the entire content. | |
| 336 | + $updated_content = $block_content; | |
| 337 | + wp_update_post([ 'ID' => $pageId, 'post_content' => $updated_content, ]); | |
| 338 | + } | |
| 339 | + | |
| 340 | + return $pageId; | |
| 341 | +} | |
| 342 | + | |
| 227 | 343 | class FormFacade |
| 228 | 344 | { |
| 229 | 345 | function activate() |
| 230 | 346 | { |
| @@ -246,14 +362,19 @@ | ||
| 246 | 362 | if (array_key_exists('appearance', $atts)) { |
| 247 | 363 | $appearance = sanitize_text_field($atts['appearance']); |
| 248 | 364 | } |
| 249 | 365 | |
| 250 | - // Check for owner attributes | |
| 251 | - if (array_key_exists('owner', $atts)) { | |
| 366 | + if (array_key_exists('owner', $atts)) { | |
| 252 | 367 | $owner = sanitize_text_field($atts['owner']); |
| 253 | - return '<div id="ff-' . esc_attr($id) . '"></div><script async defer src="https://formfacade.com/include/' . esc_attr($owner) . '/form/' . esc_attr($id) . '/' . esc_attr($appearance) . '.js?div=ff-' . esc_attr($id) . '"></script>'; | |
| 368 | + $script_url = 'https://formfacade.com/include/' . esc_attr($owner) . '/form/' . esc_attr($id) . '/' . esc_attr($appearance) . '.js?div=ff-' . esc_attr($id); | |
| 369 | + $script_tag = wp_get_inline_script_tag('', ['src' => $script_url, 'async' => true, 'defer' => true]); | |
| 370 | + return '<div id="ff-' . esc_url($id) . '"></div>' . $script_tag; | |
| 254 | 371 | } else if ($id) { |
| 255 | - return '<div id="ff-' . esc_attr($id) . '"></div><script async defer src="https://formfacade.com/forms/d/e/' . esc_attr($id) . '/' . esc_attr($appearance) . '.js?div=ff-' . esc_attr($id) . '"></script>'; | |
| 372 | + $embedUrl = 'https://formfacade.com/forms/d/e/' . esc_attr($id) . '/' . esc_attr($appearance) . '.js?div=ff-' . esc_attr($id); | |
| 373 | + wp_register_script('formfacade_render_script', $embedUrl, [], null, true); | |
| 374 | + wp_enqueue_script('formfacade_render_script'); | |
| 375 | + $script_tag = wp_get_inline_script_tag('', ['src' => $embedUrl, 'async' => true, 'defer' => true]); | |
| 376 | + return '<div id="ff-' . esc_url($id) . '"></div>' . $script_tag; | |
| 256 | 377 | } else { |
| 257 | 378 | return '<div>Invalid form id.<br/>- For example, if the public url of your Google Form is: https://docs.google.com/forms/d/e/<span style="background:yellow;color:red;">1FAIpQLSdN-M-uIQN8FfjAZul_BQi0MKYARV_vqNKFejV0QFomAjtdGg</span>/viewform<br/>- Your public id issssssssssss: 1FAIpQLSdN-M-uIQN8FfjAZul_BQi0MKYARV_vqNKFejV0QFomAjtdGg<br/>- So, the short code that you need to add to your page will be: <br/>[formfacade id=1FAIpQLSdN-M-uIQN8FfjAZul_BQi0MKYARV_vqNKFejV0QFomAjtdGg]<br/><br/><i>For Support Contact: <b>support@formfacade.com</b></i></div>'; |
| 258 | 379 | } |
| 259 | 380 | } |
