Adobe BC Web Form Customization - Basic HTML

Question

Hi all,
I've got a form that I created in BC, and obviously it looks like doo doo because that what standard forms look like in BC. I had created a form directly in Muse manually, but I needed the clickable boxes that BC offered, so I'm signed up.
Obviously, I know very little if not zero code, hence why I'm using Muse, so I have no idea where to start with customization in terms of the form (i.e. font colors, padding, etc).
I was wondering if anyone has gone through this before and maybe has a few tutorials they would like to share. Let me know your thoughts, thanks in advance.
What my form used to look like:

Answer 1

I've finally found a workaround for this! It may not be the most elegant solution and I don't know if it will help you, but it accomplished what I needed and it didn't break the form. Here's what it looks like now:
The text is now the font I want, and bigger, I was able to add the borders where I wanted them, plus do some other things.
Someone with knowledge of CSS & HTML showed me where to add the coding needed to change the look of the form. And with the help of this site: CSS Reference, I was able to take it from there (with a bit of trial and error). Here's what I did.
Once I had all the elements in the form that I needed, the first thing I had to do was insert the form on the site differently than I did before. Before, I had used 1-click insert, and tried to customize the HTML in Business Catalyst. That did not work for me, because the form would not accept any style changes. It seemed like it did, but after publishing it looked just as it did before.
Instead, I used the "Get Web Form HTML Code" under "More Actions" and copied the code. Then logged out of BC, and opened a text editor to paste the code into and add my modifications.
Now, to accomplish the style changes -- and here is where the trial and error comes in -- I had to add a <style> tag (forgive me if I am using the wrong terminology, I don't know what anything is called or what I am doing really... but the bottom line is I got it to work) at the very end of the form, between </script> and </form>. I was told it's important that it goes after the script. That's where I was able to add some CSS that accomplished what I needed.
With the help of Google Chrome and View>Developer>Developer Tools, I was able to find out what the various class names were that I needed to alter. If you don't know how the developer tools work, try to find someone who can show you or post back and I will try my best to explain. I will paste my code below so you can see what I did, but yours will of course vary because your form has different elements and you need a different look. I'm adding in bold what each class affected in case that saves you some searching.
<style>
(This first class is just the asterisks for the required fields, for some reason they are separate from the actual words)
.req{
font-family: verdana;
font-size: 14px;
(This class is the words that go with the asterisks, i.e. Name, State, etc.)
.webform label{
font-family: verdana;
font-size: 14px;
(This class is the various items that make up the Checkbox List)
.webform{
font-family: verdana;
font-size: 14px;
(Setting this class to 0px padding removed extra spacing between the fields)
.td{
padding: 0px;
(This class was for a multi-line custom field I added)
.cat_listbox{
border: 2px solid #f06823;
border-radius: 10px;
background-color: white;
width: 350px;
padding: 6px;
(This class was for all the other text entry fields, the ones I needed the orange border on, Name, State, etc.)
.cat_textbox{
border: 2px solid #f06823;
border-radius: 10px;
background-color: white;
width: 350px;
height: 26px;
padding: 0px 6px 0px 6px;
(This class was for the Submit button)
.cat_button{
border: 2px solid #f06823;
border-radius: 10px;
width: 177px;
height: 30px;
font-family: verdana;
font-size: 12pt;
color: white;
background-color: #f06823;
</style>
Back in Muse, I inserted the new code on the page by choosing Object>Insert HTML. After pasting it would sit there with a spinning wheel for a bit and eventually come up with an exclamation point and "Unable to generate thumbnail." (Ignore that.)  I then moved the box where it needed to go and resized it to touch the footer, so the page would stretch to accommodate the full form. After that I published the page and everything looked fine. You can use preview but in my experience it didn't show things the same as the published site.
I recommend that you create a test site (or at the very least a test page within your real site) where you can play with this to see how it works. Maybe use my code above and paste it in the right place to see how it changes things... and then customize for your own use. I did test the form after publishing and it does still work just fine. The only thing that broke a part of it for me was trying to change the background color for the date picker. It's a light gray (#F0F0F0) and I wanted it white. You can see it right there in the form's own HTML, but changing it to white made it stop working. The field was still there but the date picker would no longer pop up when clicking on the field.
ANYWAY! I know this is very long but I hope it helps you, or someone else if you've moved on.
Good luck! And if anyone with any CSS knowledge reads this and sees any problems with my solution, please do chime in...