white border on Embed in a web page -button | Community
Skip to main content
Answered

white border on Embed in a web page -button

C
Forum|alt.badge.img

how to get rid ofthe of white color around  the buttons?

I can easily change the button colour, but the white border somehow not. At least I cant find where … :(

please help - THANKS

Best answer by Liz

@chris2021 thank you! I looked at the code and because the typeform code is being placed into a block, the block is automatically adding a white background. I tried editing the code on my end to match the border color you’re seeing, and this code should change that border color to be the same color you currently have. Would you mind adding: 

border-color: #313131

to your Typeform code? It should look something like this: 

style="display:inline-block;text-decoration:none;background-color:#313131;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;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:bold;-webkit-font-smoothing:antialiased;border-color: #313131;-moz-osx-font-smoothing:grayscale;"

 

(I didn’t paste the entire code in case it then just added the Typeform directly into this post.)

 

Hopefully that makes sense!

 

View original

11 replies

C
Forum|alt.badge.img
  • chris2021
  • Author
  • Explorer
  • 5 replies
  • March 30, 2021

is there any possibility to use my own buttons with the typforme functionality?

khailed2011z6689
1 person likes this
  • khailed2011z6689
    khailed2011z6689
Liz
Community Team
Forum|alt.badge.img+5
  • Liz
  • Tech Community Advocate
  • 14987 replies
  • March 30, 2021

Hi @chris2021 thanks for stopping by! Would you mind sharing the URL where your form is embedded and any screenshots of the issue? 

As for buttons, are you looking to add the form to your own button on your site? If so, I’d suggest taking a look at our Embed SDK, which will give you a bit more flexibility with the embed!

Life is a series of awkward moments separated by snacks.
john.desborough
1 person likes this
  • john.desborough
    john.desborough
C
Forum|alt.badge.img
  • chris2021
  • Author
  • Explorer
  • 5 replies
  • March 31, 2021

Hey Liz, thanks for your answer - the coding secrtio is a bit too much for me. Will ask A PROGRAMMER IF THERE IS NO OTHERWAY …

 

ANYWAY, the white boarder of the “jetzt starten” button is here. The button also has to be in the middle of the column - how do I do that?:

 

https://neckattack.net/staedte/mobile-massage-muenchen-test/

 

THANKS for your help! cheers chris

 

john.desborough
Forum|alt.badge.img+6
  • john.desboroughCertified Partner
  • Certified Partner & Champion
  • 5304 replies
  • March 31, 2021

@chris2021 - from a user here.. 

in your embed code area, put the <center>     …. </center>  tags around the code and it should show up ok.. 

If your third coffee of the day is not helping you with your Typeform, maybe we can help you find your answers...
C
1 person likes this
  • C
    chris2021
Liz
Community Team
Forum|alt.badge.img+5
  • Liz
  • Tech Community Advocate
  • 14987 replies
  • March 31, 2021

Hi @chris2021 looking at the code, are you using a custom button of your own or adding the code into a module on Wordpres? If so, both of these can cause the white spacing issue. Or, if you could send a screenshot of how you’re adding the code to your site, this will help me more specifically. :) 

Life is a series of awkward moments separated by snacks.
john.desborough
1 person likes this
  • john.desborough
    john.desborough
C
Forum|alt.badge.img
  • chris2021
  • Author
  • Explorer
  • 5 replies
  • April 1, 2021

Hey Liz … OK, sure. Here is the screenshot. I am using wordpress, right! But as “unfiltered HTML”:

 

see attachment

 

john.desborough
1 person likes this
  • john.desborough
    john.desborough
Liz
Community Team
Forum|alt.badge.img+5
  • Liz
  • Tech Community Advocate
  • 14987 replies
  • Answer
  • April 1, 2021

@chris2021 thank you! I looked at the code and because the typeform code is being placed into a block, the block is automatically adding a white background. I tried editing the code on my end to match the border color you’re seeing, and this code should change that border color to be the same color you currently have. Would you mind adding: 

border-color: #313131

to your Typeform code? It should look something like this: 

style="display:inline-block;text-decoration:none;background-color:#313131;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;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:bold;-webkit-font-smoothing:antialiased;border-color: #313131;-moz-osx-font-smoothing:grayscale;"

 

(I didn’t paste the entire code in case it then just added the Typeform directly into this post.)

 

Hopefully that makes sense!

 

Life is a series of awkward moments separated by snacks.
john.desborough
1 person likes this
  • john.desborough
    john.desborough
Liz
Community Team
Forum|alt.badge.img+5
  • Liz
  • Tech Community Advocate
  • 14987 replies
  • April 7, 2021

Hi @chris2021 did that solution work for you?

Life is a series of awkward moments separated by snacks.
john.desborough
1 person likes this
  • john.desborough
    john.desborough
C
Forum|alt.badge.img
  • chris2021
  • Author
  • Explorer
  • 5 replies
  • June 24, 2021

hey Liz .. well, I have the same or a similar problem at the moment … its kind of nor very nice to your button design form .. :(

 

I need now a button in whit, without boarder and black or grey text, how can I add those parameters?

 

border-color

… what else? text-color??

khailed2011z6689
1 person likes this
  • khailed2011z6689
    khailed2011z6689
C
Forum|alt.badge.img
  • chris2021
  • Author
  • Explorer
  • 5 replies
  • June 24, 2021

by the way, a mouseover effect of the button would be nice. Any Idea how to do that`?

Liz
Community Team
Forum|alt.badge.img+5
  • Liz
  • Tech Community Advocate
  • 14987 replies
  • June 24, 2021

Hi @chris2021 We don’t have a hover option, but most of these settings can be edited when you click on the embed options in the share panel. Have you given this a look recently? We’ve made a few changes since the last time we chatted to add some more features! :grinning:

Though, it isn’t possible to change the button text color yet. :\

 

Life is a series of awkward moments separated by snacks.
john.desborough
1 person likes this
  • john.desborough
    john.desborough

Reply


Still need help?

Don't be shy and ask the community.

Ask your question here!
Community T&Cs