How do I edit the contact form CSS

[Uzo]

So, I tried using one of the standard Weebly themes "Birdseye" and I tried to create an opt-in form I was using a purple background for the home page but the lines on the form option is black. Normally in the past you can go to edit html/css to fix this . I tried going there and I didn't find any css I could edit. So, how can I edit my form without having to use one from the app center? Thanks guys.

[Queso]

Hello Uzo! You should still be able to edit your code in the Theme menu, near the bottom.

[Uzo]

Queso, thanks but no thanks. I am not sure if you miss where I said I went to the "Edit HTML/CSS and had no luck. The "Edit Html/Css" is under the Theme menu at the bottom left. Please, do read carefully next time so you can provide a helpful answer to people. Thanks. Anyone else know it it's possible to fix and how?

[zarahoffman · Accepted solution]

The CSS is now in the main.less file, though there are certain values that are defined in the variables_v(#).less files so you may have to also go there to change what you want.

[Uzo]

Sorry, for the really late response but I felt I had to respond since you took the time out to help me. Yes, your recommendation worked and I was able to make the needed changes. Thank you so much.

[Hilcandoit]

I am also trying to edit the contact form CSS, but I can't find the main.less files or the variables_v(#).less files. Is this under "partials"? Or "assets"? Somebody hep' me?

Here is the URL for my page with the contact form.

http://www.hilcandoit.com/contact-me.html

[Adam7]

There might be some CSS bits that are not in there because they're included in global CSS. You should be able to add your own rules to override those, though.

[Hilcandoit]

Thanks for the reply. I can't say I understand your reply, but I will read the documentation and see if I can get enlightened.

[Jay16]

Things have moved around in Weebly lately.

As of August 2017, open the HTML/CSS Code Editor in Themes.

Look under "Styles" for _ui-kit.less

You will see a section that starts .wsite-form-input.

Here you can change the background color, border color, etc.

Tip: Try disabling sections of the code using "/*" before and "*/" after to see what it does before making permanent changes. You will have to save these changes before you see them.

[MrCharlieStyle]

YEs! Thank you this is what worked for me!

[Deminosto]

Is there anyone here using Contact Form plugin? I have a similar problem, but I use this widget https://www.weebly.com/app-center/contact-form1 - How do I change some of the styles? I guess, I need to add styles to the main css file, and get the style classes from the page (from the plugin) – is that right? Thank you for help in advance!

[Adam7]

Have you tried contacting the app developer for that, @Deminosto? They might be able to provide some help or even build that as an option into the app.

http://elfsight.com

[rwm]

You can change the styles and layout of any form directly (and infinitely) by embedding html using the Embed Code capability in Weebly.

Here's an article explaining how to do that including sample code and detailed instructions.

https://blog.formkeep.com/how-you-can-do-more-with-weebly-forms/

In addition to contolling the layout, with an embedded html solution you can also potentially take advantage of advance routing capabilities for your data.