Hello,
I still have the same problem when implementing the form as slide tab on https://c-moins-cher.com : the CTA button is stucked to the top if the website, and this in mobile as in desktop :
Any idea why? Other integrations are working perfectly.
Best answer by mathio-tf
In that case you need to start with slider embed code, like this:
<button data-tf-slider="yFtBVbMe" class="my-custom-typeform-button">
Click here!
</button>
<script src="//embed.typeform.com/next/embed.js"></script>And to customize the button looks you can add custom CSS (inside <style> or .css file of your page):
.my-custom-typeform-button {
cursor: pointer;
padding: 10px 20px;
border-radius: 8px;
background: #fed700;
border: none;
color: black;
font-size: 16px;
transition: background 0.25s linear;
box-shadow: 1px 1px 10px rgba(0,0,0,0.25);
/* this is the important part to position the button */
position: fixed;
bottom: 20px;
left: 50%;
transform: translate(-50%);
}
.my-custom-typeform-button:hover {
background: #ffeb3b;
}You can find an example here: https://glitch.com/edit/#!/maddening-calico-cyclamen
Feel free to remix it and play around with it.
+5Hi 
How are you adding the code to your site? Do you mind sending a screenshot?
Hello 
. Here it is implemented with WP plugin βinsert header and Footerβ :
And here is the raw code as copied from my Typeform backend :
<div data-tf-sidetab="fSAPYiON" data-tf-width="320" data-tf-height="400" data-tf-button-color="#FED700" data-tf-button-text="Launch me" data-tf-iframe-props="title=Vos marques en promo !" data-tf-medium="snippet" style="all:unset;"></div><script src="//embed.typeform.com/next/embed.js"></script>
Thaks in advanced.
Don't forget to send us the URL of your website with the form! Would love to check it out!
Here it is again 
: https://c-moins-cher.com
+5Aaaah amazing! I was so happy I could actually understand the form (I studied French for five years but that was more than 10 years ago!). Happy your form is working fine now!
Do you happen to have other forms embedded in your website? 
This is getting nowhere 
.
Please go to c-moins-cher.com, you will see that the button is stucked on the top left.
Here is the code :
<div data-tf-sidetab="fSAPYiON" data-tf-width="320" data-tf-height="400" data-tf-button-color="#FED700" data-tf-button-text="Launch me" data-tf-iframe-props="title=Vos marques en promo !" data-tf-medium="snippet" style="all:unset;"></div><script src="//embed.typeform.com/next/embed.js"></script>
Here is how I implemented it , with plugin WP insert header and footer :
Thanks in advanced.
+5Hello
where would you like to place the button?
I can see in your website that the embed code is placed directly after the opening <body> tag. The button is displayed correctly based on where the embed code is placed.
You need to place typeform embed code in your website in place where you want it to display, not at the very top of the page.
Thanks
+5Oh, i think I can see the misunderstanding here! You have embedded your form as slider instead of side tab. If you embed as side tab, it will place a floating button on the right-hand edge of your website.
The side tab doesnβt transform well, because the eye catching text is vertical. It would be nice to have an horizontal floating button to open the form.
+5In that case you can modify the slider button. Just put together some custom CSS (with absolute or fixed position) to place the button wherever you want.
If you have troubles with the CSS feel free to ask here and show us your work in progress (I can no longer see the typeform button in your page).
Thanks
Many thanks in advanced.
<div data-tf-sidetab="fSAPYiON" data-tf-width="320" data-tf-height="400" data-tf-button-color="#FED700" data-tf-button-text="Launch me" data-tf-iframe-props="title=Vos marques en promo !" data-tf-medium="snippet" style="all:unset;"></div><script src="//embed.typeform.com/next/embed.js"></script>
+5Hi
side tab gives you a floating button by default. Did you mean to use a slider button embed code?
I will also need more details than βfloatingβ. Where should the button be placed?
Hi
I mean to use a floating button with the slider, not the side tab.
The floating button would float on the lower part of the screen, at the center, so that it is always on the userβs vew when the user scrolls down.
+5In that case you need to start with slider embed code, like this:
<button data-tf-slider="yFtBVbMe" class="my-custom-typeform-button">
Click here!
</button>
<script src="//embed.typeform.com/next/embed.js"></script>And to customize the button looks you can add custom CSS (inside <style> or .css file of your page):
.my-custom-typeform-button {
cursor: pointer;
padding: 10px 20px;
border-radius: 8px;
background: #fed700;
border: none;
color: black;
font-size: 16px;
transition: background 0.25s linear;
box-shadow: 1px 1px 10px rgba(0,0,0,0.25);
/* this is the important part to position the button */
position: fixed;
bottom: 20px;
left: 50%;
transform: translate(-50%);
}
.my-custom-typeform-button:hover {
background: #ffeb3b;
}You can find an example here: https://glitch.com/edit/#!/maddening-calico-cyclamen
Feel free to remix it and play around with it.
Thanks for your efforts and your professionalism
Itβs working except for 2 things : the background color button #fed700 is not displaying, and the it looks like the button is displayed βbehindβ the design : https://www.screencast.com/t/mSytqbGzeh.
Feel free to see it here : c-moins-cher.com
Here is where and how I put the button script :
Here is how and where I put the css code :
+5To override default button background you can use !important like this:
background: #fed700 !important;And to make sure it is placed above all other content you can set its z-index:
z-index: 999;
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.