Warum wird das Element "Name" mobil verschoben dargestellt?

Hallo lieber Support,

in der Vorschau werden die Eingabefelder Vor- und Nachname nicht schön dargestellt. Wie kann ich das Problem lösen, dass es bspw. wie bei E-Mail dargestellt wird?

Vielen Dank für die Unterstützung! Kira

Hi mmm_message,

Thanks for reaching out to Jotform Support. Our German Support agents are busy helping other Jotform users right now, so I'll try to help you in English using Google Translate, but you can reply in whichever language you feel comfortable using. Or, if you'd rather have support in German, let us know and we can have them do that. But, it might take a while until they're available again.

Now, coming back to your question, I see you have multiple forms, can you provide the form URL in question? We have this guide on how to locate the form URL.

Once we hear back from you, we'll be able to help you with this.

Hi Jeric,

sure, sorry: https://form.jotform.com/241832885184061

The problem exists with all our forms.

Thanks

Hi mmm_message,

Is this on a mobile view? I checked it on my end, and it's working as intended as shown in the screenshot below:

Can you take a full screenshot and tell us if it's mobile or desktop view?

Once we hear back from you, we'll be able to help you with this.

Sure, attached, it's mobile view.

We've tested it with several mobile devices and it is actually displayed differently. Maybe depending on the browser or device?

Hi mmm_message,

To make it responsive in mobile devices, you just need to inject Custom CSS code. Let me show you how:

1. Copy the CSS code below:

@media screen and (max-width: 480px) {

    .form-product-item.form-radio,

    .form-product-item.form-checkbox {

        margin-right: -3px;

    }

}

3 . Choose the Paint Roller icon located on the right side of the Form Builder.

4 . Navigate to the Styles tab of the Form Designer.

5 . Under Inject Custom CSS, paste your code to replace the media screen code that you have; all changes are automatically saved.

See my screencast below to see my result:

Give it a try and let us know how it goes.

Hi,

thank you. I have already injected the code before, but unfortunately it did not fix the problem.

On my mobile phone with normal sized text settings it is no problem at all. It is only when you enlarge the text a little that it is displayed so strangely. It is also displayed like this in the preview when I am editing (screenshots attached, unfortunately I cannot send any screencasts). It would be enough for me if the input fields were exactly one below the other and had a slight gap, like the fields for the e-mail addresses.

Hi mmm_message,

The screencast that I shared above is from a real device and not from the preview of my cloned form.

Can you try using the Custom CSS Code above, open your form from your mobile phone's browser and see how it goes?

Give it a try and let us know if you need any other help.