Form Design: Issues with Persistent Logo Display

Pudo hit a deadend.
He was doing fine at first like taking out this weird speech bubble that just popped up on my form, and fixing spacing. But I needed help on responsiveness because the form doesn't look good on mobile phones.

I just cloned this form from an old one we used last year and it was ok back then.
There was also this problem of the top logo that keeps appearing on preview even if I've already deleted it. My work around was going to advanced designer and resizing the logo to the most minimum. It worked but it may be the one causing the unresponsiveness in mobile phone view.

This is the form https://form.jotform.com/261033479441455

Hi myhillals,

Thanks for reaching out to Jotform Support. Just to make sure I’ve got this right, can you confirm that you want to remove the logo section in your form? Take a look at the screenshot below to see the logos:

If that's the case, it's really easy to remove the Form Logo. Let me show you how:

1. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

2. Now, in the Form Designer menu, click on the Styles tab.

3. Under Form Logo, click Remove Logo. That’s it. The changes are automatically saved.

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

I already know how to do that. Been doing that for years.

That's not my issue. You're not even in the preview mode so you can see how it is on all the devices.

Anyway, I worked on the form again and apparently when the image is embedded as a logo, it is responsive. But when it is part of the header as an image it's not automatically responsive. The image needs to be resized.

Then again as a top logo the way the system adjusted the image is bad. It skewed the image real bad. So the solution here is a to resize the image so it doesn't look bad when your irresponsive system adjusts it.

Hi myhillals,

You can easily adjust the Header Image on mobile view by Injecting CSS Codes into your form. Let me walk you through it:

1. First, copy this code:

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

.header-logo-top {

    max-width: 280px !important;

    margin-left: -35px !important;

}

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Take a look at the screenshot below to see my results:

To keep the conversation organized, I moved your other question to its own thread, and someone from our Support Team will help you with it here.

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

This is what I see from my end.


The logo on the top and as image header -

So I just took out the image as header and left the one on top but the text wrapping is still bad

Then when you scroll down further this is what I see

For now, we will just put a note "ON MOBILE, BEST VIEWED ON HORIZONTAL MODE"


This is just so frustrating because this didn't happen before :/

Hi myhillals,

I can see that you're testing the form view using a simulator which is not accurate with the mobile device view. It would be better if you can test the form using a real mobile device. Here's a screencast that shows my result when viewing the form through my mobile device.

You can test the form using a mobile device and let us know how it goes.