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