Forms 2.0 - Button Colors

[Anonymous]

Hi, 

Can someone please take a look at the custom button colors in Forms 2.0? When you change the buttons to another color, all of the images retain the outer edge and/or shadows, of the original color.

If I want to change the color of the buttons to red, 90% of my newly available options have an orange, green, or blue rim...it would be great if we could change the color of the WHOLE button.

[Anonymous]

Hey Laura, this happened to me also, and the colours weren't true to my hex colour code either. But i'm loving the fact that we have this available now. will be great when it works properly. Great feature guys!

[Anonymous]

Hi Laura,

I had the exact same issue when working with Forms 2.0. 

My solution was to add additional code in the custom CSS section that allowed me to make those changes. The biggest issue was keeping the gradients on the buttons since you can only choose a single color. 

Even though Forms 2.0 is supposed to have little to no coding required, I have personally found that it requires more coding to make everything work correctly. 

If you need any help with building the CSS for the button let me know and I'll be happy to see what i can do to help. 

Cheers,

-AF

[Dan_Stevens_]

I noticed that as well.  Basically this feature isn't very useful unless it also allows you to change the highlight/secondary colors.

[Anonymous]

Anthony, I would be interested in seeing the code you added to the custom CSS if you wouldn't mind sharing...

[Anonymous]

Sure thing.

Below is exactly what I put in the custom CSS field.

A few notes about the code. The CSS code only works on the default button. I have also used a nice little code that may be useful if you use the "if known lead use custom HTML" option. the link for "Not You" does not follow the CSS of the template so you need to manually edit this. 

If any questions let me know. 

Cheers,

-AF

/* Add your custom CSS below */

/* Button CSS */

button, input {

behavior: url("/rs/marketoreferencelibrary/images/PIE.htc");

}

button, input[type="reset"], input[type="submit"], input[type="button"] {

background: #4c8fcc;

background: -webkit-gradient(linear, 0 0, 0 bottom, from(#d9541e), to(#fdb813))!important;

background: -webkit-linear-gradient(#d9541e, #fdb813)!important;

background: -moz-linear-gradient(#d9541e, #fdb813)!important;

background: -ms-linear-gradient(#d9541e, #fdb813)!important;

background: -o-linear-gradient(#d9541e, #fdb813)!important;

background: linear-gradient(#d9541e, #fdb813)!important;

-pie-background: linear-gradient(#d9541e, #fdb813)!important;

border:0px solid #89cbdf!important;

-webkit-border-radius: 5px;

-khtml-border-radius: 5px;

-moz-border-radius: 5px;

-ms-border-radius: 5px;

-o-border-radius: 5px;

border-radius: 5px;

color:#FFFFFF !important;

cursor:pointer;

display:inline;

font-size:12px !important;

font-weight:bold;

left:0px;

vertical-align:central;

padding:20px 10px !important;

position:relative;

text-transform:uppercase;

top:10px;

}

button:hover, input[type="reset"]:hover, input[type="submit"]:hover, input[type="button"]:hover {

}

form.lpeRegForm label {

font-family: Arial, sans-serif !important;

color:#666 !important;

}

form.lpeRegForm input[type="text"], form.lpeRegForm select, form.lpeRegForm  textarea {

border:1px solid #bdbdbd;

border-radius: 3px 3px 3px 3px;

color:#666 !important;

font-family: Arial, sans-serif !important;

font-size: 12px;

padding: 5px;

}

/* Not You link CSS */

.mktoForm a.mktoNotYou:hover {

text-decoration: none;

  color: #0095d3;

}

.mktoForm a.mktoNotYou {

cursor: pointer;

color: #006990;

  text-decoration: none;

}

[Anonymous]

To add to this, many of the button styles are quite outdated for modern web design. Can we please have some newer, flat buttons?

Thanks!