Skip to main content
Answered

Welcome Screen On Mobile (embedded form)


Why is this screen showing up on my survey when viewed on mobile? I have no welcome screen.

Th

anks 

Best answer by mathio-tf

Hello @Duzer Group your code is not valid. As you can see in my replies above, you need to add attribute data-tf-inline-on-mobile to your code with no value. You code has data-tf-inline-on-mobile="title= XXXX (Website)" which is not correct and it is there multiple times (just once is sufficient).

This should be the correct code:

<div data-tf-widget="XXXXXXXX" data-tf-inline-on-mobile data-tf-hidden="utm_source={},utm_medium={},utm_campaign={}" data-tf-transitive-search-params="utm_source, utm_medium, utm_campaign" style="width:100%;height:500px;"></div><script src="//embed.typeform.com/next/embed.js"></script>

@Liz the “best” answer is for old embed code. This is however not applicable to current embed SDK version.

View original

53 replies

Mariana
Ex–Typefomer
Forum|alt.badge.img+5
  • Ex–Typefomer
  • 679 replies
  • March 1, 2021

Hey @jmjking24. Welcome to the Typeform Community! 🤩

 

In fact, embedded typeforms display differently on mobile. On mobile all users will see one of two screens;

  • Your Welcome Screen if you use one, or;

  • A placeholder displaying your form name

 

Don't worry though! If you don’t want any of those to show you can try one of these options:

 

Option 1:

Try adding ?typeform-welcome=0 after the URL in the embedded code.

 

?name=inline-1459438255.png

 

Option 2:

Embed your typeform as a pop-up or full screen to avoid the placeholder page too, we have a guide on this right here.

 

Option 3:

Use an iframe tag to embed your typeform and add the form URL to the src attribute. Note that this might impact some functionality of our embeds. Avoid if possible. :) 

 

Let us know if you have any further questions or if you need more guidance when following one of the steps above. We'll be happy to help! 


vickioneill
Forum|alt.badge.img+5
  • Tastemaker
  • 320 replies
  • March 1, 2021

Great question @jmjking24 and very insightful options @Mariana ! This is good to know for future surveys I create (I hadn’t even thought of asking the question - thank you!!).


Mariana
Ex–Typefomer
Forum|alt.badge.img+5
  • Ex–Typefomer
  • 679 replies
  • March 1, 2021

Yay! That's awesome to hear, @vickioneill! 🤩It's always delightful to see how a question from a member can benefit other workflows too! 

 

 


vickioneill
Forum|alt.badge.img+5
  • Tastemaker
  • 320 replies
  • March 1, 2021

Yes, absolutely, @Mariana . Questions give ideas, too. Love it!


  • Explorer
  • 2 replies
  • May 4, 2021

Hello community

 

I need your help, im on the way to make a landing page using typerform and elementor (wordpress)

And i dont find how i can leave the starting page of my forms when people come on my website on mobile and thats a big problem, because i dont want it 

If u know how to fix that it will be great


Liz
Community Team
Forum|alt.badge.img+5
  • Tech Community Advocate
  • 14584 replies
  • May 4, 2021

Hi @Kevin P Thanks for stopping by the community! I added your question here where we have the answer. Let us know if you think of anything else!


  • Explorer
  • 2 replies
  • May 5, 2021

Thanks for the answer but i use elementor pro to build my website and i can’t change the embeded code on it 

Or if it possible i dont find the way :/


Liz
Community Team
Forum|alt.badge.img+5
  • Tech Community Advocate
  • 14584 replies
  • May 7, 2021

Hi @Kevin P are you embedding the code onto your site using the Elementor builder? Or if you don’t mind sending a screenshot, that would be handy! That’ll help me answer your question better. :grinning:


Hello,

 

Our form doesn’t have a welcome screen added, however when we embed our form onto a button popup, a welcome screen appears? How do we have no welcome screen on mobile and desktop?


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

Hi @matthewjones123 thanks for stopping by the community. :smile: I added your post here where we have the answer. Let us know if you have any other questions!


Hi,

We’re using the new Typeform with the “next” embed.js.

We are experiencing the same issue of a A placeholder displaying your form name when viewing our STANDARD embedded typerform on mobile.

We would like to remove the placeholder screen.

But not sure if we are able to follow this advice as per this thread.

How can we disable the placeholder screen with the next gen Typeform?

--

Edited: removed code for security reasons. 


Scot
Typeform
Forum|alt.badge.img+3
  • Typeform
  • 19 replies
  • August 24, 2021

Hey all! Going forward, with the newer embed code, you can hide the welcome and start screen on mobile by:

  1. Deleting any Welcome Screen
  2. See below :)


Add this code in between the attributes data-tf-inline-on-mobile​ this is how the code above looks after adding a form ID and the attribute: 

<div data-tf-widget="WdPoWdU6" data-tf-inline-on-mobile style="width:100%;height:400px;color:#FFFFFF;"></div><script src="//embed.typeform.com/next/embed.js"></script>

Note that, if applicable, this will show your form inline (not as a pop-up), and if you don't have any welcome screens it will show the first block you selected.

Hopefully, this helps anybody going forward with our new embed code. :)


  • Navigating the Land
  • 1 reply
  • September 23, 2021
Scot wrote:

 

Hey all! Going forward, with the newer embed code, you can hide the welcome and start screen on mobile by:

  1. Deleting any Welcome Screen
  2. See below :)


Add this code in between the attributes data-tf-inline-on-mobile​ this is how the code above looks after adding a form ID and the attribute: 

<div data-tf-widget="WdPoWdU6" data-tf-inline-on-mobile style="width:100%;height:400px;color:#FFFFFF;"></div><script src="//embed.typeform.com/next/embed.js"></script>

Note that, if applicable, this will show your form inline (not as a pop-up), and if you don't have any welcome screens it will show the first block you selected.

Hopefully, this helps anybody going forward with our new embed code. :)

 

 

Scot, I just spend about 3 hours trying to fix this using old posts in forums and nothing worked. THANK YOU for sharing this fix. Saved me from having to scrap typeform. This should be part of the settings on the form itself! Thank you again!!!

 

-Mike


I am experiencing that the mobile version is showing the form title as starting screen (this particularly form does not have a welcome screen). 

If I as editor do not have acces to the code, is there any way I can make it start with the first question instead?

 


  • Navigating the Land
  • 1 reply
  • February 2, 2022
Scot wrote:

Hey all! Going forward, with the newer embed code, you can hide the welcome and start screen on mobile by:

  1. Deleting any Welcome Screen
  2. See below :)


Add this code in between the attributes data-tf-inline-on-mobile​ this is how the code above looks after adding a form ID and the attribute: 

<div data-tf-widget="WdPoWdU6" data-tf-inline-on-mobile style="width:100%;height:400px;color:#FFFFFF;"></div><script src="//embed.typeform.com/next/embed.js"></script>

Note that, if applicable, this will show your form inline (not as a pop-up), and if you don't have any welcome screens it will show the first block you selected.

Hopefully, this helps anybody going forward with our new embed code. :)

Awesome, thank you so much!


Liz
Community Team
Forum|alt.badge.img+5
  • Tech Community Advocate
  • 14584 replies
  • February 2, 2022

Thanks, @Scot !!


  • Navigating the Land
  • 1 reply
  • June 30, 2022

Hello, we are also having the same problem with this embed code and welcome screen on mobile.
I tried everything in this post and nothing worked.
Do you have any solution?
Thank you 


Liz
Community Team
Forum|alt.badge.img+5
  • Tech Community Advocate
  • 14584 replies
  • June 30, 2022

@oriana Can you share the URL where you have the form embedded? Thanks! 


Hi everyone! I am finding mobile forms to be an issue, in particular users cannot “exit” the form after the complete the questions. So it leaves them to either refresh the page on mobile, or re-visit the site which isn’t the best experience.

 

Is there a way to show the X icon after form is completed on mobile? Any help is greatly appreciated!

 

 


Liz
Community Team
Forum|alt.badge.img+5
  • Tech Community Advocate
  • 14584 replies
  • July 6, 2022

@KaitlinKinzinger , @mathio may be able to help you with this one!


Hi there, great! @mathio, I very much look forward to your reply.

Note: Our code looks like this: 

<div style="width: 100%; height: 400px;" data-tf-widget="CODE#HERE" data-tf-iframe-props="title=TITLE NAME HERE" data-tf-medium="snippet"></div>

 

And after completing the quiz user cannot see an X on mobile to close the form out.


mathio-tf
Typeform
Forum|alt.badge.img+5
  • Typeform
  • 888 replies
  • July 11, 2022

Hello @KaitlinKinzinger 

it looks like your page header is covering part of your typeform where the close button is. You will need to change your header z-index to be 10000 or lower. If you share a link to your page I can have a look and maybe provide further help.


  • Navigating the Land
  • 3 replies
  • July 13, 2022

Hi @mathio I’m having the same issue but using the embed SDK widget. Is there a way to prevent the welcome screen from showing up?

https://github.com/Typeform/embed/tree/main/packages/demo-react

 


mathio-tf
Typeform
Forum|alt.badge.img+5
  • Typeform
  • 888 replies
  • July 13, 2022

Hi @AlexHipp , if you want to actually remove the welcome screen you can do it when building your form.

If you would like to avoid displaying your typeform in a fullscreen modal window in mobile, you can display your typeform inline on mobile using data-tf-inline-on-mobile attribute in your embed code.


  • Navigating the Land
  • 3 replies
  • July 13, 2022
mathio wrote:

Hi @AlexHipp , if you want to actually remove the welcome screen you can do it when building your form.

If you would like to avoid displaying your typeform in a fullscreen modal window in mobile, you can display your typeform inline on mobile using data-tf-inline-on-mobile attribute in your embed code.

 Hi thanks for the reply. The form doesn’t have a welcome screen. 

I’m using the react embed and it looks like this. Maybe, I’m using it wrong.
<Widget id="GQJVCmRq" data-tf-inline-on-mobile style={{ width: '100%', height: '100%' }} className="my-form" />


Reply