I’ve managed to embed as per instructions but the button design is way off the button design of the main site.
Is there a way to embed the form as a pop-up but do so with a button in keeping with the site design?
Answered
Squarespace Embed — Getting the button design right
Best answer by mathio-tf
Hello
yes, you can attach the popup functionality to any button on your website if you dont mind getting your hand dirty with some HTML 😃
You can skip the embed snippet from share page and use Typeform Embed SDK directly:
- add SDK script to your page (anywhere, eg. at the very end):
<script src="//embed.typeform.com/next/embed.js"></script> - attach the typeform popup functionality to your button by adding
data-tf-popup="<form-id>"attribute to your button - you can configure and fine-tune the popup by using one of the many options available in the SDK (eg.
data-tf-size="75"to make it smaller)
You final HTML code should look something like this:
<button
class="my-fabulous-button"
data-tf-popup="<form-id>"
data-tf-size="75"
>click me</button>
<script src="//embed.typeform.com/next/embed.js"></script>
+5Hi
Do you mind sharing a screenshot of what the button looks like on your website?
Hi!
Have tried the embed but the design/font/etc simply don’t match - and never will sadly due to the limitations…
Ideally, I’d like to add the button to the site as I would normally and hook it into the firing the Typeform *somehow*?
+5Hello
yes, you can attach the popup functionality to any button on your website if you dont mind getting your hand dirty with some HTML 😃
You can skip the embed snippet from share page and use Typeform Embed SDK directly:
- add SDK script to your page (anywhere, eg. at the very end):
<script src="//embed.typeform.com/next/embed.js"></script> - attach the typeform popup functionality to your button by adding
data-tf-popup="<form-id>"attribute to your button - you can configure and fine-tune the popup by using one of the many options available in the SDK (eg.
data-tf-size="75"to make it smaller)
You final HTML code should look something like this:
<button
class="my-fabulous-button"
data-tf-popup="<form-id>"
data-tf-size="75"
>click me</button>
<script src="//embed.typeform.com/next/embed.js"></script>
Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.