Launch Typeform with Pro Button?

Hello!

I’m trying to launch a Typeform using a Button in the Pro builder with a bunch of custom attributes instead of using the button code Typeform provides. Because let’s face it, those Pro buttons are sweet and so easy to customize. :smiley:

Please don’t say this is a third party thing and not supported. I’m not asking you to make Typeform work - I’m asking to see if I can use the custom attributes feature of buttons (and/or other features) to get the needed information on the button to trigger the popup. This is a question of how to use the builder to do what I need to do.

The code they provide is:

<a class="typeform-share button" href="https://gutbar.typeform.com/to/SZyEwd" data-mode="popup" style="display:inline-block;text-decoration:none;background-color:#267DDD;color:white;cursor:pointer;font-family:Helvetica,Arial,sans-serif;font-size:20px;line-height:50px;text-align:center;margin:0;height:50px;padding:0px 33px;border-radius:25px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:bold;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;" data-hide-headers=true data-hide-footer=true data-submit-close-delay="2" target="_blank">Order Online </a> <script> (function() { var qs,js,q,s,d=document, gi=d.getElementById, ce=d.createElement, gt=d.getElementsByTagName, id="typef_orm_share", b="https://embed.typeform.com/"; if(!gi.call(d,id)){ js=ce.call(d,"script"); js.id=id; js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q) } })() </script>

When I strip out the style and remove the script (to put elsewhere on the page), things like that, I get this:

<a class="typeform-share button" href="https://gutbar.typeform.com/to/SZyEwd" data-mode="popup" data-hide-headers=true data-hide-footer=true data-submit-close-delay="2" target="_blank">Order Online </a>

My question is that some of the attributes - like data-mode have their parameter set within quotes - e.g. data-mode=“popup” while others like data-hide-header has it’s =true not inside quotes. If I add all these into custom attributes will they all be in quotes? If being in quotes makes it not work, is there a way to get these attributes on the button/link without quotes?

Thanks!

Hi @aleminopuy,

Thank you for writing in, In that context having a quote or not on a data- attribute does not matter since the value does not contain space.

e.g.

data-mode=popup works
data-mode="popup" works
data-mode="pop up" works
data-mode=pop up wont work

Yes, all custom attributes on Elements will be in quotes. If being in quotes does not work, then it won’t work without quotes as well. If this is the case, you need to ask the plugin support if its possible to integrate the form on your own button element.

Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.