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:
Link to survey:
Embed code (attached):
Mobile screenshot:
I want this to be fully transparent like it is on the main website. It looks like garbage on mobile!
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)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.
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).
1 Like
Thanks, Jonathan. I think you’re right. I added a SSL cert and I’m still experiencing the issue.
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:
1 Like
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…
1 Like
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.
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
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!
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.