How to match widget styling to the theme?

For example, if I turn on "Rounded corners" in the standard field styling, all the widget fields keep their square corners. The widget fields are also not the same height.

I'm familiar with CSS (though hardly an expert) but since I can't create classes and there are no classes listed, how would I know what to call the CSS change I'm making?

.????? {

  border-radius 6px;
}

Also, how am I to get the CSS I'm copying FROM? Shadow settings, radius, colors...are those all in a file somewhere in the template?

You may find the classes or IDs of a widget from the browser inspect tool from the preview of the form. Please see the help article below from Google that might help you in finding the classes and IDs from the browser inspect tool.

https://developers.google.com/web/tools/chrome-devtools/css/

Using these IDs or classes, you may then apply the CSS code to the widget to change the styling. 

Hope this information helps. If you need any further assistance, please get back to us with the form ID and the section that you are trying to change the styling so that we can assist you further.

Hi Kiran, I gave that a try but it's not working. The form has so many problems that I don't even know where to start. For one thing, the font size in my upload button is 118px. For another, I can't change the button styling on the upload button without affecting the Submit button, though for some reason the Submit button does NOT have 118px font size.

At this point I'd be happy to pay someone to fix this form styling for me. I do CSS for entire websites all day without issue, but I can't work like this without having access to HTML and full CSS files.

Please try injecting the following CSS code to the form to adjust the height of the Submit and File upload buttons.

.qq-upload-button {

height: 20px !important;

}

.form-submit-button {

height: 40px !important;

}

If you need the complete HTML code of the form, you may consider downloading the full source of the form by following the guide below and make necessary changes so that you may host it on your web server.

Hope this information helps.

Thanks Kiran, that worked well. I appreciate the link about self-hosting the forms - I may give that a shot if I can't figure out my other issues. Is it ok if I post my other problems in here to get your advice?

On behalf of my colleague you are welcome. If you have any issue that is not related to this one please open a new ticket to avoid confusion.