Answered

Get typeforms to open in lightbox from wordpress button

  • 3 August 2023
  • 7 replies
  • 249 views
N
Badge

Hey all,

So for the past couple of years I’ve been using Typeform’s pop-up embeds as booking buttons on my website, and they worked great.

We’ve recently updated our website design massively - and a part of that design is buttons that are native to the wordpress theme we’re using.  I really like the look of the updated buttons on our new theme.

From the back end, these buttons give me the following toggle option to “Open link in lightbox”, which I believe is supposed to automatically embed embeddable pages and forms:

I’ve tested this out with one of my typeform links, and on the front end all that happens when you click the button is the lightbox opens and fills up the screen, but no form loads in (it’s just dark grey/empty with an “x” to close the lightbox.)

Is there some way to get this to load the typeform up properly?  I’m editing through the theme where I just paste the link, so I’m not deep into html at the moment.  I tried adding ?typeform-embed-redirect-target=_self to the end of the link based on another thread but that didn’t change anything.

Until this is up and working, they typeforms just open in a new tab which works but is not ideal for the user experience.  Would appreciate any insights!  (Yes, I have reviewed the Embed Your Typeform article https://www.typeform.com/help/a/embed-your-typeform-360029249212)

icon

Best answer by mathio 14 August 2023, 09:49

View original

7 replies

N
Badge

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/

Liz
Rank
Userlevel 7
Badge +5

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

Life is a series of awkward moments separated by snacks.
Ibrahim masudi
Userlevel 2
Badge +2

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.

mathio
Rank
Userlevel 7
Badge +5

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
N
Badge

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?

N
Badge

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.  🤷🏼

mathio
Rank
Userlevel 7
Badge +5

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.

Reply


Still need help?

Don't be shy and ask the community.

Ask your question here!
Community T&Cs