How do I a make a form display in a lightbox?

I would like to make a form display in a lightbox, like this.  How do Ido make that happen on this page?

http://max-opp.com/courses-on-writing-books-short-interesting-learn-by-example/, similar to this.

You can embed your form as a lightbox to your website.

The instructions on how you can get and/or customize your lightbox embed code are found in this guide, How-to-create-a-lightbox-form

Here's another guide that may also help you.

How-to-Auto-popup-a-Lightbox-Form

I hope this help. Please feel free to contact us anytime if you have any other questions or concerns. Thank you.

Thanks. I got that to work.  See here: http://max-opp.com/courses-on-writing-books-short-interesting-learn-by-example/

 

Suppose I wanted to change this to a non-modal pop-up box--do I just change the piece of code that says lightbox to pop-up?

To change it to a non-modal pop-up, you will need to re-embed the form to your page using the pop-up code provided in the Publish wizard.

Please let us know if you need further assistance,
Regards.

Thank you.

I'm trying this again with a different form.  These two things are not working:

 

1. I am not hiding the link

2. It is not popping up.

 

 

Here's the page where I embedded the form.

http://ahj.max-opp.com/finding-love-creative-edition/

 

Here's the form

https://www.jotform.com/build/71045242859963

 

Here's the code inserted in the form

<a href="javascriptDISABLED:void( window.open( 'https://form.jotformpro.com/71045242859963', 'blank', 'scrollbars=yes, toolbar=no, width=300, height=580' ) ) "> I'm a Fan of Alan H. Jordan </a>

<script language="JavaScript">

var delayseconds = 5;

    function pause() {

    myTimer = setTimeout('whatToDo()', delayseconds * 1000)

    }

   function whatToDo() {

document.getElementById('lightboxdelay').click();

    }

window.onload = pause;

</script>

 

What am I doing wrong?

I checked that page but failed to see any Lightbox Embed codes on your website's source code. So far, I'm seeing 4 links pointing to a form and none of these are Lightbox Embed codes:

Can you please ensure you're copying and pasting the actual Lightbox Embed codes?

Complete guide: How-to-Create-a-Lightbox-Form

Once you have the right Lightbox Embed Codes copied on your clipboard, paste them on your WP page as shown below:

Please check the code again.  I can get the lightbox to display manually, but not to pop-up after a delay;

hello AlanJordan,

Here is the code that you should use (please note of the ones in bold):

1) insert onDISABLEDload="pause" attribute and value on the link for Become a Fan of Alan H. Jordan

======

<a class="btn lightbox-71045242859963" style="margin-top: 16px;" onDISABLEDload="pause();"> Become a Fan of Alan H. Jordan </a><br />

======

2) On the script where your delay is processing in your whatToDo() function, replace the numeric ID 71045242859963 with lightboxdelay.

 

======

<script language="JavaScript">

var delayseconds = 5;
   function pause() {
     myTimer = setTimeout('whatToDo()', delayseconds * 1000)
  }
  function whatToDo() {
    document.getElementById('lightboxdelay').click();
  }
window.onload = pause;

</script>

======

So here is the chunk of code you can copy and paste to replace your existing one:

======

<a class="btn lightbox-71045242859963" style="margin-top: 16px;" onDISABLEDload="pause();"> Become a Fan of Alan H. Jordan </a><br />

 <a id="lightboxdelay" class="lightbox-71045242859963" style="cursor:pointer;color:blue;text-decoration:underline;display:none;">Cool Contact Form</a>

<script language="JavaScript">
var delayseconds = 5;
   function pause() {
     myTimer = setTimeout('whatToDo()', delayseconds * 1000)
  }
  function whatToDo() {
    document.getElementById('lightboxdelay').click();
  }
window.onload = pause;

</script>

======

If you have questions, please let us know.

 

I have now spent three hours on this and still cannot get it to work.

1. If I change the openOnLoad parameter to true the form displays. 

<script src="https://form.jotformpro.com/static/feedback2.js" type="text/javascript"> var JFL_71045242859963 = new JotformFeedback({ formId: '71045242859963', base: 'https://form.jotformpro.com/', windowTitle: 'Become a Fan of Alan H. Jordan', background: '#FFA500', fontColor: '#FFFFFF', type: 'false', height: 525, width: 350, openOnLoad: false }); </script> <a class="btn lightbox-71045242859963" style="margin-top: 16px;"onDISABLEDload="pause();> Become a Fan of Alan H. Jordan </a>

2. This displays the link which works when clicked.  The code you sent me did not work when clicked:

 <a id="lightboxdelay" class="lightbox-71045242859963" style="cursor:pointer;color:blue;text-decoration:underline;display:none;">Become a Fan of Alan H. Jordan</a><script language="JavaScript">

3. This code is not being called because if I change the delay seconds to 0 the form does not display

<script language="JavaScript">

var delayseconds = 5;

    function pause() {

    myTimer = setTimeout('whatToDo()', delayseconds * 1000)

    }

   function whatToDo() {

document.getElementById('lightboxdelay').click();

    }

window.onload = pause;

</script>

Once again, the URL is http://ahj.max-opp.com/finding-love-creative-edition/

I was having problem loading the http://ahj.max-opp.com/finding-love-creative-edition/ you provided. I am getting site can't be reached error. Can you please double check also the correctness of the URL.

You can also test this demo page that shows the auto pop up with delay of lightbox form.

https://shots.jotform.com/elton/delay_lightbox_onload_popup.html

If you view the source code of the page, you will be able to see the script source code used. You can try following the same script codes on your test.

Let us know how we can be of further assistance.

 

This url works:

http://ahj.max-opp.com/finding-love-creative-edition/

 

You can also reach this by typing in http://myfindinglove.com

 

Interestingly, when I tried to add some additional text in a different area of the post, I wound up with two lines that said 

Become a Fan of Alan H. Jordan

Become a Fan of Alan H. Jordan

The top one was a link.

The bottom was not.  

I rolled back to an earlier version of the form, perhaps that's why you had an issue.

Going to bed now.

I tried to sleep but could not.  I went back and copied all of the code to Notepad to strip out any hi-bit characters.

I pasted it into a new post.  It still did not work.

I added one line of text to the post.  It had double printouts.

http://ahj.max-opp.com/test/

 

I noticed that my form was not showing the word EMAIL so I cloned it, and removed the control. I put a new control in and took out the theme. I created a new form and pasted it in.  Here are the results.

http://ahj.max-opp.com/test-3/

 

I don't get it.

Can you look at my forms and see if they are corrupted or something?

 

I don't care if this is a lightbox.

Can you give me the exact code to paste in for a either one of these pop-up form that has a delay of 5 seconds associated with it please?  Something that I can copy and paste into a new post and see that it works.

Here I tried this with another form, and I can't get it to pop-up with a timer, but I can get it to pop-up if I set to openonDISABLEDload=True

http://ahj.max-opp.com/test-monbed/

 <script src="https://form.jotformpro.com/static/feedback2.js" type="text/javascript"> var JFL_60356959455973 = new JotformFeedback({ formId: '60356959455973', base: 'https://form.jotformpro.com/', windowTitle: 'Download Monbed', background: '#FFA500', fontColor: '#FFFFFF', type: 'false', height: 500, width: 700, openOnLoad: false }); </script> <a class="btn lightbox-60356959455973" style="margin-top: 16px"> Download Monbed </a>

 

<script language="JavaScript">

var delayseconds = 5;

    function pause() {

    myTimer = setTimeout('whatToDo()', delayseconds * 1000)

    }

   function whatToDo() {

document.getElementById('lightboxdelay').click();

    }

window.onload = pause;

</script>

 

I have sent a private message with Administrator Credentials. Perhaps that will be the easiest way.

Thanks.

I was able to review the source code of your website page. I see that you did follow and copied the javascript code from the demo page. But I see it was not working.

 

What I suggest you try to better test the code is to create a new blank page. Then just add the source code similar form the demo page.

Ex: 

You will be able to easily troubleshoot the page since it will not have any other script codes that could be causing conflict with the javascript code for the lightbox pop up.

Let us know if you were able to create the demo page so we can also review it.

 

 

I did that already.   http://ahj.max-opp.com/test-2/

Please see this post so that you can have permission to log into my wordpress blog.

Is it possible that we can save debug time for both of us this way (Private) 

I see that you have already removed the link to show your form as a lightbox on your website (http://ahj.max-opp.com/test-2/). Fortunately, before you have done that, I was able to look into your website's scripts. I understand that the script that would make your form automatically pop up on load is not working.

The script you have in your form is this:

To fix the issue, the part highlighted in yellow in the script above should be removed.

Then, the second "Become a Fan of Alan H. Jordan" (highlighted in green) should be between the opening <a> tag and the closing </a> tag. (Please see sample below)

<a id="lightboxdelay" class="lightbox-71045242859963" style="cursor: pointer; color: blue; text-decoration: underline; display: none;">Become a Fan of Alan H. Jordan</a>

And lastly, the "display: none;" property should also be removed if you want to show the link on the website.

I have copied your codes in a test form where I have applied the changes above. (Note: I have only multiplied the "delayseconds" to 500 instead of 1000)

Test Form

Below is a screenshot of the Test form's page source (CTRL+U).

I hope this helps. If you have any further questions or concerns, please feel free to contact us again anytime.

Thank you.