Card Form: Option to hide the next and previous page animation on mobile view

Do you know how can I get rid of frames on mobile versions? Check the screenshot

Unfortunately, screenshots sent via email do not reach our Support System. Please re-send it by following this guide: How-to-Post-Screenshots-to-Our-Support-Forum

Meantime, below is what your embedded forms looks like on my end (mobile version).

Oh Wow it’s different on my end. Check a screenshot link
http://joxi.ru/82QKN3QU9dYMJr
As I see on your’s can we get rid of this space? I used the code you gave me and 0px height. And it’s still not working on your end as I see
http://joxi.ru/82QKN3QU9dYMJr
http://joxi.ru/Q2KQBdYsvdn7xr
...

I checked your page but could not see any frames, instead, this is what I see:

Currently, the iFrame's height is automatically updated by the <script></script> portion of your embed code. If you wish to shorten the height, you can remove the <script></script> part and manually set the form's height, however, that will make your form not responsive to the different device sizes.

Do let us know how you wish to proceed.

Can you see space in the right side of the form? And on the bottom?
...

http://joxi.ru/1A5oaexTb1BeGm
Please take a look at screenshot. There is spaces on the sides. It looks weird. Unprofessional. You know what I mean :)
...

Please note that the white you are seeing on the sides are portions of the previous and next cards. Meanwhile, the placement of the bottom navigation bar is automatically adjusted depending on the size of the device.

Unfortunately, in both cases, there is no way to remove or modify that.

I just need to stick to the frames. I don’t want to have a spaces. It looks unprofessional. LEt’s find the way. We can use CSS code I believe
...

Unfortunately, there is no option to use CSS on card forms and the spaces as you have shown cannot be removed.

What do you mean it’s impossible? Everything is possible. Do you have somebody in your team who can help with that?
...

Hello,

Unfortunately, this is how a Card form displays on mobile by default. The previous and next cards can always be seen.

It would be possible to change this with CSS, however, our built-in theme editor does not support Card forms yet, as there is already heavy styling implied. We believe it would confuse many users; the card form was originally designed to provide a smooth, responsive, and user-friendly experience without custom styling.

We apologize for the inconvenience. You could download your form's source code, then host it on your web server to perform any changes you want (e.g. change card width, add custom JS, etc.).

Alternatively, reverting the layout of your form to the default one would allow you to inject custom CSS (and possibly build your own card layout).

Let us know how we can be of any further assistance,

Thank you,

Simon

I think you didn’t get me. I just need to stick to the edge of the screen. Like wide frame. Can use some space on the edges? I just want to get rid of it. So you know what I mean?
...

Hello,

We understand that you would like to remove the white space/bar on both sides, which are the next and previous page indicators in the Card Layout form. However, as advised by my colleagues, it's an animation on the Card layout form when viewing it on a mobile device.

Unfortunately, it's impossible to add custom CSS codes on card layout forms, and there's no option to hide or remove the animation. I can escalate a feature request ticket to our back-end team, but please note that we can't provide an estimated time of when this could be implemented.

You will be notified on this ticket if there's any update regarding your request. Thank you.

No I don’t want to remove white space bar!
This is not what I want to do. Could you please read message again!
Can you see the edge go the screen?and where edge of the form is? The re is space between edge of the screen and form, can you see it?
Please take a look carefully.
ATTENTION!!!!! I’m not talking about What spaces ob the both sides.
I’m talking about empty space!!! On sides and Bottom
Can you see it? Do you know what I mean?
...

We highly understand what you meant which we can also see on your screenshot here:

As previously mentioned, it is not possible to customize the form to what you need right now hence the reason a feature request has been forwarded.

Please note that we cannot guarantee if that will be granted but rest assured you will be notified here once we get any update.

I’m talking about this empty space. I colored it on red. I’m not talking about white frames. Edges should stick to the form without empty spaces. Do you know what I mean? Sorry but if It’s not understandable could you please ask general manager about it. It’s pretty simple here. It’s basic stuff I believe
...

It should be like that. Can you see that no empty space on the sides? It sticks to the edges. I hope now you can see what I mean
...

I hear your concern but please note that cards form layout has very limited customization possibility. Please let us know the web page where you have embedded your form, and we will take a look.

I did check your website but could not locate the form for which you have shared the screenshot. The form which is embedded on the following web page is a different form: https://www.sunpowerproject.com/2-questionnaire43523709

To remove the empty spaces on this embedded form, please add the following custom CSS code in your webpage (not form):

@media only screen and (max-width: 770px) and (min-width: 0px){

.col-inner {

  padding-left: 0px !important;

  padding-right: 0px !important;

  margin-left: 0px !important;

  margin-right: auto !important;

  width: 100% !important;

}

}

Hope this helps.

Do try it out and get back to us if you have any questions.

Almost there
Use this web site
Sunpowerproject.com
...

I did check your website and it seems to display the form correctly now with no margin. Do you want to remove the shadow also which is being displayed?

Please let us know and we will take a look.

We will wait for your response.

I still have small margin. About few pixels. Shadow is good. I like it. But just small margins still there. Can you share your screenshot?
...

As well I’ve noticed that sometime on the mobile version not working next button and submit button. It’s vital to make it work. Because we can loose leads because of that
...

I still have small margin. About few pixels. Shadow is good. I like it. But just small margins still there. Can you share your screenshot?

I have checked the embedded form again on your website, and here's what I'm showing on my end:

As well I’ve noticed that sometime on the mobile version not working next button and submit button. It’s vital to make it work. Because we can loose leads because of that

Here's a test from a cross-browser testing app:

May we have the make and model of the device wherein you are showing the issue so that we can try to replicate it on our end? I have also tried using my android phone and the buttons are working fine on my end.

Thank you. Looking forward to your response.

Safrai iPhone 11 Pro max
...

Since I did not have an iPhone 11Pro Max, I've checked your website on an iPhone XR and was able to view the form correctly and also fill/navigate between the card correctly.

Here is a screencast of my test: https://tinyurl.com/yy6h69mb

Could you test and let us know?

Or share a screen recording from your end?

Actually you has as well small spaces on the sides. PLease take a look closer
...

For clarity, I have added an extra black background to clearly display the edges of the device screen. Based on the screenshot below, I assume you are referring to the white spaces on the sides that is not included on the blue highlight.

If yes, please note that the form itself has already occupied 100% of its allotted space. The padding you see on the sides are set within your webpage.

Kindly add the CSS below within your webpage (not form):

@media only screen and (max-width: 770px) and (min-width: 0px) {

div#row-7946510000 { padding-left: 0px !important; padding-right: 0px !important; }

}

If there are other customizations that needs to be done within your webpage but outside the form, I suggest you contact your web developer.

Bravo! Yes that works thank you
...