Answered

Welcome Screen On Mobile (embedded form)

  • 28 February 2021
  • 51 replies
  • 5230 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

The option name data-tf-inline-on-mobile is for when you are embedding as HTML snippet. For embedding via JS or React you should use inlineOnMobile attribute.

The option name data-tf-inline-on-mobile is for when you are embedding as HTML snippet. For embedding via JS or React you should use inlineOnMobile attribute.

Great thanks that works!

Having same problem with mobile showing the title screen

does the  data-tf-inline-on-mobile replace BOTH data tf attributes?  or just one of them?

Will this affect how it displays on Desktop?

data-tf-iframe-props="title=TITLE OF SURVEY” 

data-tf-medium="snippet" 

Userlevel 7
Badge +5

Hi @MeredithK I believe you will need to add this in addition to the other elements you listed. Let me know if that doesn’t work!

Hi @Liz and fellow Typeformers.

 

I had a question about the solution shared above. Where can I add the code with the updated embed format?

*My Typeform Code*
<div data-tf-widget="pSDHIPEX" data-tf-hide-headers data-tf-iframe-props="title=Photoshoot Makeup" data-tf-medium="snippet" style="width:100%;height:400px;"></div><script src="//embed.typeform.com/next/embed.js"></script>

**

Option 1:

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

 

?name=inline-1459438255.png

Userlevel 7
Badge +5

Hello @arjansahni the answer you are referring to is 1 year old and no longer valid for latest embed SDK. If you read the rest of this thread you will see my reply on how to achieve the same thing.

Badge

Could you please give a guide for dummies (like me) to get the form to work on mobile without showing the form name and “Start” button at first? I don’t have any welcome screen on my form, and it works nicely on desktop, but the form name shows on mobile. I want that away and just have the question shown.

I tried the data-tf-inline-on-mobile in the code, didn’t do anything.

Userlevel 7
Badge +5

Hello @Riinuska 

if you prefer not to touch the embed code directly, you can do this on the latest share page.:

  1. Select standard embed on the left

     

  1. Disable the full screen on mobile toggle

 

Alternatively you can also add data-tf-inline-on-mobile attribute to your existing embed code manually. Please refer to this help article (last section).

 

Badge

The option name data-tf-inline-on-mobile is for when you are embedding as HTML snippet. For embedding via JS or React you should use inlineOnMobile attribute.

Hello Mathio,

I have a typeform with no welcome screen. It is initiated by a user event via your Embed SDK. When on mobile would I like the form to go fullscreen and show the first question directly.

My problem:

  • using inlineOnMobile set to true achieves the above partly, as inline, not as a full screen takeover (which has some wanted UX built in).
  • the default mode goes fullscreen, but display the form title (as mentioned in this thread) and a “start” button. None of these make any sense to show again in my use case.

Is it possible to go fullscreen on mobile, without showing the form title and the “start” button using the Embed SDK?

Userlevel 7
Badge +5

You have two options:

  1. if you want to show your form in fullscreen as the only content of your page you can use the full screen embed (data-tf-full-screen or get the code from share page)
     
  2. if you want to show other content on your page you could do a popup embed on mobile and widget on desktop - like this:
    <div id="form"></div>
    <script src="//embed.typeform.com/next/embed.js"></script>
    <link rel="stylesheet" href="//embed.typeform.com/next/css/widget.css" />
    <link rel="stylesheet" href="//embed.typeform.com/next/css/popup.css" />
    <script>
    const container = document.querySelector('#form')
    const isSmallScreen = window.innerWidth < 800
    if (isSmallScreen) {
    const button = document.createElement('button')
    button.innerText = 'click to open form'
    button.onclick = () => {
    window.tf.createPopup('Cqrg7cgL').open()
    }
    container.append(button)
    } else {
    container.style.width = '100%';
    container.style.height = '500px';
    window.tf.createWidget('Cqrg7cgL', { container })
    }

    </script>

     

Badge

You have two options:

  1. if you want to show your form in fullscreen as the only content of your page you can use the full screen embed (data-tf-full-screen or get the code from share page)
     
  2. if you want to show other content on your page you could do a popup embed on mobile and widget on desktop - like this:
    <div id="form"></div>
    <script src="//embed.typeform.com/next/embed.js"></script>
    <link rel="stylesheet" href="//embed.typeform.com/next/css/widget.css" />
    <link rel="stylesheet" href="//embed.typeform.com/next/css/popup.css" />
    <script>
    const container = document.querySelector('#form')
    const isSmallScreen = window.innerWidth < 800
    if (isSmallScreen) {
    const button = document.createElement('button')
    button.innerText = 'click to open form'
    button.onclick = () => {
    window.tf.createPopup('Cqrg7cgL').open()
    }
    container.append(button)
    } else {
    container.style.width = '100%';
    container.style.height = '500px';
    window.tf.createWidget('Cqrg7cgL', { container })
    }

    </script>

     

This confirmed my suspicion that there were no direct solution to my problem.
For the wishlist: Since the createWidget solution works excellent to trigger externally, both on desktop (inline) and on mobile (fullscreen), would it be great if it was possible to turn the extra welcome screen off on mobile.
 

Thanks a lot for the quick answer and for the suggestion to use multiple embed strategies, I’ll have a look!

Userlevel 7
Badge +5

@magnuslundin to turn off the welcome screen on mobile you can use data-tf-inline-on-mobile option. It does not show the full screen modal, because without the welcome screen there is no placeholder to display. The placeholder (welcome screen) displays a CTA button to open the modal window with your typeform.

Badge

@magnuslundin to turn off the welcome screen on mobile you can use data-tf-inline-on-mobile option. It does not show the full screen modal, because without the welcome screen there is no placeholder to display. The placeholder (welcome screen) displays a CTA button to open the modal window with your typeform.

The problem is that it is not easy to get good UX on mobile when using the inline-mode (unless the page layout is completely free from other elements). The fullscreen mode solve all issues with keyboards making the page jump (Safari..), address fields hiding navigation buttons, scrolling vs. swiping etc and the user see only the form.

This is why my question revolved around using the fullscreen mode, without the placeholder, which isn’t possible.

can anyone provide a straight forward answer to this?

 

Here’s my code: 

 

<div data-tf-widget="XXXXXXXX" data-tf-inline-on-mobile="title= XXXX (Website)" data-tf-inline-on-mobile="snippet" 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>

 

What code do i put and WHERE do i put it to NOT show the start quiz button?

Userlevel 7
Badge +5

Hi @Duzer Group Were you able to see the options in the best answer of this post? That will tell you what you need to do! 😀

Userlevel 7
Badge +5

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.

Userlevel 7
Badge +5

@mathio I’ll update the best answer!

Userlevel 7
Badge +5

Cool, thanks!

Badge +1

How to disable “show launch button” on Standard Embed (mobile).

I did not used to have this issue, but this has been happening recently.

 

When I try to embed in Standard mode, when my website users visit by mobile, the typeform puts in a launch page by default (but not on desktop).

I DON’T WANT THIS. I want to disable it. But that setting option is not available for Standard. Why is this the default for mobile? Is there a way to turn it off?

 

Userlevel 7
Badge +5

Hi @hbeckwith I’ve moved your post here where we have an existing conversation about this. 😀

Userlevel 7
Badge +5

Hello @hbeckwith 

Standard embeds do not have launch buttons. However they are opened in modal window on mobile to improve the user experience when filling out the form.

If you do not want to open forms in modal window on mobile, you can disable this setting on your share page:

Hope this help 👋

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

Thanks Scott for this solution. I was looking for it for years!!! I had tried all solution and none was working so far ! You're a magician

Userlevel 7
Badge +5

Glad that worked, @26Leads !! 😀

Same issue here, how to remove the welcome screen from mobile view in a landing page embed. 
(there is no welcome screen in the form) 
my code is <div data-tf-live="01HKFYV0Q5V5XEKBG71PVKJ85A"></div><script src="//embed.typeform.com/next/embed.js"></script>

The previously given solutions no longer apply. 
thank you 

Userlevel 7
Badge +5

Hello @Art of Living 

have you tried adding data-tf-inline-on-mobile attribute your embed code? I tried and it works for me:

<div data-tf-live="01HKFYV0Q5V5XEKBG71PVKJ85A" data-tf-inline-on-mobile></div><script src="//embed.typeform.com/next/embed.js"></script>

If you do not want to manually edit the HTML snippet, you can also disable full-screen on mobile on your share page (see my earlier reply).

Reply