Answered

Welcome Screen On Mobile (embedded form)

  • 28 February 2021
  • 51 replies
  • 5226 views

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

Th

anks 

icon

Best answer by mathio 30 May 2023, 09:57

View original

51 replies

Userlevel 7
Badge +5

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! 

Userlevel 7
Badge +5

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!!).

Userlevel 7
Badge +5

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

 

 

Userlevel 7
Badge +5

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

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

Userlevel 7
Badge +5

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!

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 :/

Userlevel 7
Badge +5

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?

Userlevel 7
Badge +5

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. 

Userlevel 3
Badge +3

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. :)

 

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?

 

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!

Userlevel 7
Badge +5

Thanks, @Scot !!

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 

Userlevel 7
Badge +5

@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!

 

 

Userlevel 7
Badge +5

@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.

Userlevel 7
Badge +5

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.

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

 

Userlevel 7
Badge +5

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 @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