How do I edit the background color, shadow, font color, and Heading/Sub-Heading font in the Header element?

I don't see anywhere to change the background color, fonts, font color, etc.

Thank you for any help that you can provide.

Thank you for contacting us.

You can certainly customise how your form looks in our Advanced Designer. You can find that by going to Form Designer > Colors > Advanced designer

Please see screenshot below how to find that:

Please let me know if this helps, or if you require any further assistance regarding this matter! :)

Thank you!

Thank you for your response, but I think you misunderstood what I am trying to edit. I added the “Header” to the top of the form. It is from the Form Elements menu.

Look at the hidden element at the top of my form. It is a black box, with a photo of a house, and some text in black in the box. I want to edit the color of the box, the font color, and the font. There is nothing in the setting to change these details. How do I do this, please?

Thank you.

...

You can edit the header in advance designer. Just unhide the field first and you should see it in the designer page.

That worked. Thank you for the tip.

I have a few other questions, if you could please assist.

* Header text: How do I remove the “shadow” from the text in the header? I tried setting the color to no value, but that is not taking away the shadow look. It’s hard to read (blurry) with this shadow effect, don’t like it. Just want plain text with no shadow.

* Header width: In the header, how to I get it to fit as wide as the white form background? I fiddled with the horizonal and vertical spacing, but nothing worked to make it the same width as the form.

* Date picker calendar pop-up: I tried using the new date picker with the more modern pop-up calendar (you will see it hidden in my form). I think this feature has some bugs still. When viewing on my iPhone, the right arrows to navigate to the months in 2021 are cut off. How do I fix this? Also, I tried deleting the months I did not want to show in the calendar. I only wanted to show June, July, August and September 2021. The calendar did not display what I wanted. It showed “’Null’ 2020” for the months that I deleted and still made users scroll forward to 2021 (and then the right arrows were cut off). Any fixes for this?

* Submit button: I used some custom CSS to make my submit button have rounded corners (30px), blue background (#397dcf), white text (no shadow). I can see the CSS applied in the Advanced designer, but when I close that and preview my form, it’s showing as a gray rectangular button with a shadow. Do I need to put the CSS somewhere else?

Some screenshots attached. Thank you in advance.


...

Thank you for your response. I'm afraid I can't see any screenshots attached, could you please kindly follow this guide on how to post screenshots to our forum?

https://www.jotform.com/help/438-How-to-Post-Screenshots-to-Our-Support-Forum

Thank you, looking forward to your reply.

Here are the screenshots. Thank you for your help.

Header (would like to remove the shadow behind the type and make the header width extend all the way to the margins of the white form background):

Button (I used custom CSS to make the button look like this in the designer, but it is not displaying like this when I preview the form):

Calendar (the right side of the calendar does not show on iPhone screen; also it said "Null" when I removed the months that I did not want to show - not pictured):

Hi @Bluehyd,

Thank you for getting back to JotForm support. For the header section, please go to Advanced designer and set 'Horizontal Padding' under 'Form Layout' to 0 px.

For the submit button, please click the button and configure the color, width, height, border from here as well.

I also checked the form on my Google Pixel and I confirmed that the date picker has been displayed correctly. May I ask which iPhone you are currently using to check the form? I'd like to check with the emulator with that display size on my end.

I hope you find this useful and if you have any other questions, please reach out to JotForm support again.

Cheers,

Yuta