TypeForm / Working well on Desktop but not on iOS

ios

(Collin Hoyer) #1

Hey guys, I’m trying to embed a Survey into my website and it isn’t working on Mobile… although it works on desktop. Any insight?

Link to my website:

www.ratedevil.com

Link to survey:

Embed code (attached):13 PM

Mobile screenshot:


(Collin Hoyer) #2

I want this to be fully transparent like it is on the main website. It looks like garbage on mobile!


#3

I recommend setting up a SSL certificate for your site. I’m seeing a number of errors in the browser’s developer console. The thing that is causing your form to be blank is this one:

[Error] Blocked a frame with origin "https://collinhoyer.typeform.com" from accessing a frame with origin "http://www.ratedevil.com". The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match.

[Log] SyntaxError: Unexpected token ')'. Expected a ';' following a return statement. (ratedevil_hype_generated_script.js, line 5)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (proximanova-regular-webfont.woff2, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (proxima_nova_alt_light-webfont.woff2, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (proxima_nova_bold-webfont.woff2, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (android-icon-192x192.png, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (favicon-96x96.png, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (favicon-16x16.png, line 0)
[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (favicon-32x32.png, line 0)
[Error] Blocked a frame with origin "https://collinhoyer.typeform.com" from accessing a frame with origin "http://www.ratedevil.com".  The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match.

	(anonymous function) (common-19c1eba0d1431dcda8bbe8dd28b08569-min.z.js:8:18848)
	Global Code (common-19c1eba0d1431dcda8bbe8dd28b08569-min.z.js:8:19607)
[Error] Blocked a frame with origin "https://collinhoyer.typeform.com" from accessing a frame with origin "http://www.ratedevil.com".  The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match.

	(anonymous function) (default-ec05429ecb639211c830ee94a093382c-min.z.js:2:29093)
	Global Code (default-ec05429ecb639211c830ee94a093382c-min.z.js:2:29852)

(Collin Hoyer) #4

Thanks, Daniel. I will setup a SSL cert for the site.

Question: Even with the mismatched protocols, why would the survey look good on Desktop but experience issues on Mobile? Wouldn’t the Form be “ugly” on both Desktop and Mobile?

I’m a newb.


(Jonathan Deutsch) #5

I think this is an issue with the typeform widget. I don’t know what the solution is, but it appears to be doing something different based on the device. You can even see this if you enter the responsive design mode in Desktop Safari to an iOS variant (but not if you just trigger the smaller layout).


(Collin Hoyer) #6

Thanks, Jonathan. I think you’re right. I added a SSL cert and I’m still experiencing the issue.


#7

If your issue is the fact that there is a white background on the typeform in mobile, this is something that Typeform controls and specifically sets on the mobile layout:


(Mark Hunte) #8

could that be solved with an override

.css-t5ciqp {background-color:rgba(255,0,0,0) !important}

Actually if I understand how the Typeform works then I wonder if it can just be set in the configuration of the form…


(Collin Hoyer) #9

Thanks Mark and Daniel… truly appreciate your responses. Here’s the response I received from TypeForm support:

I’m going to try adding the CSS over-ride somewhere to see if that will help force transparency on mobile. I’m using the same TypeForm embed code on Desktop and Mobile – for some reason Desktop is transparent and Mobile is white. I responded to the TypeForm support thread asking for further assistance. I’ll report back.


(Mark Hunte) #10

What theme did you use also are the widgets in the upgrade version.
Not at mymacat mo but did not see them when I went a looking


(Daniel) #11

Hey Collin did you ever figure it out? Im having the same problem as well! I built a site and its seems the mobile app will only work without the button on full page mode but it doesnt have full transparent background. somehow they did it on this site www.realestatehealthinsurance.com i think they used a custom iframe code. I tried using their code and putting my src url in there instead of theirs… can someone please help!


#12

Can you share a link where you’re hitting this issue? If you can also share a Hype document that would be very helpful.

If you have a fully-prepared <iframe> snippet you’d like to use (with transparency) you can insert that code within the inner HTML of a rectangle by selecting Edit > Edit Inner HTML.

This property : <iframe src="frame.htm" allowtransparency="true"> should do it, but you can also add:

style: background-color:transparent; to your iframe.