Answered

window close button

  • 1 September 2021
  • 7 replies
  • 1251 views

How do you allow a person to click outside the form module to close the form window or change the colour of the X that closes the form window please?

 

This is an exit intent window

 

Notice how you can actually see the close window button.

 

https://www.mychiro.com.au/chiropractic-offer-1/

 

Thanks so much :)

 

 

icon

Best answer by mathio 2 September 2021, 11:45

View original

7 replies

Userlevel 7
Badge +5

Hi @stevloc Welcome to the community! Our embed code will automatically include an ‘x’ button that appears on the upper righthand corner for the respondent to close the window. 

Though, it looks like the form might be custom embedded on the site, which is why that ‘x’ isn’t appearing. You’ll either need to manually add it in with your own code or, the easiest solution, would be to use the embed code we provide in the builder directly without any custom code added. 

I hope that helps! :) 

Hi @Liz  thanks for the response.

 

The code is standard - I have no edited it.  Could there be another reason?

Here is the code:

<a data-tf-popup="Ya4NeRAo" data-tf-open="exit" data-tf-open-value="50" data-tf-hidden="utm_source=landing,utm_medium=website,utm_campaign=1,utm_term=60,utm_content=" style="color:#FA6B05;text-decoration:underline;font-size:14px;cursor:pointer;">Launch me</a><script src="//embed.typeform.com/next/embed.js"></script>
Userlevel 7
Badge +5

Hi @stevloc Have you added the code within a window on the site? If so, you’ll need to remove it from that window. 

Userlevel 7
Badge +5

Hello @stevloc 

Your embed code seems to be fine. However since you are embedding into your own website with its own CSS in some cases those can clash. And this is the case of your website.

I found that you have this CSS that overrides the close button color:

a:not([href]):not([tabindex]), a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
color: inherit;
text-decoration: none;
}

It overrides the default white color for the close button of your embedded typeform:
 

You need to update your CSS. A quick and dirty fix would be to add something like this to your CSS file:

.typeform-popup a.typeform-close {
color: white !important;
}

 

Userlevel 7
Badge +5

Hi @stevloc were you able to make the changes @mathio suggested? :grinning:

I used it and it's working

 .typeform-slider {
  color: white !important;
}

Userlevel 7
Badge +5

Wahoo! Glad to hear, @amadeuschaaf !

Reply