Oh, here is an example page with the new buttons .. note they are not set up with the lightbox currently as it isn’t working.  https://northernedgealgonquin.ca/retreats/yoga-sup/

Hi @northernedge apologies for missing this! Tagging @mathio to see if he can help. 

Hi , 1) install and activate the "Simple lightbox" or "Easy FancyBox " plugin on your WordPress website. These plugins enable lightbox functionality for various elements, including buttons. 2)  Create your Typeform on the Typeform website and I obtain the embed code for your form 3) Go to your WordPress website's dashboard and edit the page/post where you want to place the button.

Hello @northernedge 

which buttons on your website should be opening the popup windows? I see the buttons with dates on the right open typeforms in new tabs.

I am sorry but I am not familiar with the lightbox Wordpress plugin you are using and since I dont see it in your website I can not offer any help on that.

However, you could use typeform embed SDK to open default typeform popup from any button on your website, if you are interested. You are not limited to buttons that can be designed on our share page, any button works.

To do that, you need to get familiar with HTML - just a little bit and I am here to help. Steps to enable typeform popups for any buttons:

1. locate HTML code of any button in your page, it will look something like like this:

   <button class="my-button">click here</button>

    

2. add data-tf-popup=”<form-id>” attribute to the button (use your form ID as the attribute value) to make the button look something like this:

   <button class="my-button" data-tf-popup="<form-id>">click here</button>

3. add <script> with embed SDK to your page (eg. after the button):

   <script src="//embed.typeform.com/next/embed.js"></script>

    

4. now you should have a code like this in your page:

   <button class="my-button" data-tf-popup="<form-id>">click here</button>
   <script src="//embed.typeform.com/next/embed.js"></script>

5. click the button, it opens your typeform in a popup

Thanks @mathio - this seems like a workable solution.  I’m aiming for ease and simplicity for my team to be able to update links as they do change fairly often (We have a fresh registration form for every date/program.)  It would be ideal for them if it was as simple on the front end as swapping the link:

Is there some way for me to designate it to open this way in the html without the <form-id> being a part of it?  That way future users could just edit the link and text of the button to update to future forms, and I’ll have already done the html so it would pop up appropriately in a lightbox?

The components on our website and the “open link in lightbox” setting are from Stackable.  https://wpstackable.com/blog/introducing-stackable-lightbox/

Stackable has an option to add custom html attributes to the button without going in to edit the html myself.  Could I alternatively add something to that to make it open as expected?

Okay, maybe it was just an issue with stackable and wordpress… I updated our theme and now the lightbox trigger is opening the form just as I’d expect.  

If you have a button like this:

<button class="my-button" data-tf-popup="<form-id>">click here</button>

and you need to change the form, you just replace the <form-id> - it will display new form in the same popup. You can obtain the form ID from your form link - by default the link is in format like this:

https://form.typeform.com/to/<form-id>

Please note that if you use lightbox instead of a popup provided by typeform SDK this is considered custom embed and is officially not supported. There might be some bugs in there, but if you test it and are happy with it, you are welcome to keep using the lightbox approach.