Typeform Embed with Custom Button

Design help Custom code
1

Hello,
I’d like to embed a typeform “Right Drawer” style popup in my website, however I would like to design the button div used to activate that code myself on my own Typeform site. Typeform gave me this embed code:

<a class="typeform-share button" href="https://gofastcampers.typeform.com/to/rKKydi" data-mode="drawer_right" style="display:inline-block;text-decoration:none;background-color:#CB732B;color:white;cursor:pointer;font-family:Helvetica,Arial,sans-serif;font-size:15px;line-height:37.5px;text-align:center;margin:0;height:37.5px;padding:0px 25px;border-radius:18px;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 target="_blank">Reserve Yours </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>

Can I somehow embed the form myself using my own div button without using all the custom hardcoded stuff that Typeform includes in their embed code?

Thank you!

2

Bumping because I am still looking for the answer to this one. Thank you!

3

See this part here:
<a class="typeform-share button" href="https://gofastcampers.typeform.com/to/rKKydi" data-mode="drawer_right" style="display:inline-block;text-decoration:none;background-color:#CB732B;color:white;cursor:pointer;font-family:Helvetica,Arial,sans-serif;font-size:15px;line-height:37.5px;text-align:center;margin:0;height:37.5px;padding:0px 25px;border-radius:18px;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 target="_blank">Reserve Yours </a>

That “style=…” part is what is setting the styling. First remove it, so your custom embed ends up looking like this:

<a class="typeform-share button" href="https://gofastcampers.typeform.com/to/rKKydi" data-mode="drawer_right" 
    data-hide-headers=true data-hide-footer=true target="_blank">Reserve Yours </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>

Next have a look at the css class being applied to the button. Notice <a class="typeform-share button" ?

“button” is a class. All you need to do is create a Webflow element, give it a class of button, then style it however you like. Your Typeform button will inherit this class.

2 Likes
4

One of our customers had a similar question so we wrote a script that allows you to easily create any element in Webflow and use it to submit any kind of form. You can design your button as you wish and then use JavaScript to trigger the Typeform popup.

Here is a link to the tutorial video that walks you through the question, and then the solution from start to finish.

If there are any questions feel free to tag me!

Happy Thursday!