ポップアップ表示に関して

  • PHILDUCT
    2022年5月26日 4:27に質問

    ポップアップができることはわかるのですが、

    ブラウザバックボタンが押されたタイミングでポップアップ表示を実装することは可能なのでしょうか？

    どうぞよろしくお願いいたします。

  • Patrick_R
    2022年5月26日 5:15に返信

    Hello there,

    Kindly note that we don't have Japanese support available. So, I'll try to answer your concern in English. As far as I understand, you want your Jotform to popup as soon as the user presses the Back button.

    If I understood your requirement correctly, please note that this is technically possible to achieve; there are JS events to achieve this. However, the back button navigation would immediately take the user to the previous page, and your form will be shown, but it won't stop the back button event. There is no workaround for this.

    Usually, websites show a popup as soon as the user's mouse leaves the window; this ensures the user sees the popup before pressing the back or the reload button.

    Here is an example: https://codepen.io/pranav_jotform/pen/JjpOzWm. Move your mouse to the bottom pane and then move the mouse out; you'll notice the Jotfom lightbox form pop up.

    Does this solve your purpose? If yes, you can prepare this lightbox code as per these instructions. Also, make sure that the popup is not set to automatically show up on window load (as shown below). This way, it will only trigger when we want it to.

    1653556290 628f444215f71 Screenshot 10

    1653556320 628f4460c7e77 Screenshot 21

    The code used here is as follows:

    <!DOCTYPE html>
    
<html onmouseleave="handle_show_form()">
    
<head>
    
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    
<title>Title of the document</title>
    
<script type="text/javascript">
    
var handle_show_form = function(){
    
  document.getElementsByClassName('btn')[0].click()
    
}
    
</script>
    
</head>
    
<body>
    
<script src ="https://form.jotform.com/static/feedback2.js" type="text/javascript"></script><script type="text/javascript">
    
var JFL_221452511302944 = new JotformFeedback({
    
  formId: '221452511302944',
    
  base: 'https://form.jotform.com/',
    
  windowTitle: 'DPEARL 初診予約フォーム',
    
  background: '#FFA500',
    
  fontColor: '#FFFFFF',
    
  type: '0',
    
  height: 500,
    
  width: 700,
    
  openOnLoad: false
    
});
    
</script>
    
<a class="btn lightbox-221452511302944" style="margin-top: 16px">Show the Form</a>
    
</body>
    
</html>

    Please Note: This code is showing a cloned version of your form that is under my account. If you want to use this example, make sure that you generate the lightbox code for your form and use that instead. If you need our assistance with generating this code, let us know. We'll be glad to help.

    If you have questions or if this doesn't solve your purpose, let us know.