SOLVED

Forms 2.0 CSS/style issues

Go to solution
Highlighted
Anonymous
Not applicable

Forms 2.0 CSS/style issues

Hi Marketo community, I am having issues manipulating the form button styling in the 2.0 editor.  In 1.0 I could drop an HTML block onto a landing page, which contained scripts that allowed me to change the appearance and position of the form button on the landing page level.

I know you are supposed to be able to do most of this natively in the 2.0 editor now, but I seem to be experiencing a lot of bugs when trying to apply changes via the WYSIWYG.  For example, in the screenshot here I updated the font type for the form in form settings.  It updated the font in the form fields, but not on the button.  Is it possible to make the button I choose bigger or smaller?  Also in regards to the buttons, if I select a custom color for one of the button styles, the hover color becomes the original button color and there does not appear to be a way to change the hover color.  This creates serious issues in our ability to create forms that use branded colors and fonts.

I am hoping someone has some pre-canned CSS for the form editor that would allow for better control over some of these areas in the forms.  Thanks for your feedback, rockstars!

0EM50000000S8P5.jpg
Tags (1)
1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Anonymous
Not applicable

Re: Forms 2.0 CSS/style issues

To change the button font and other aspects you will need to change the CSS using the button classes in the form editor. I had to make similar changes recently.  Go to form settings then click on the gear and select Edit Custom CSS. In there you will  find a blank box where you can add the button classes and change them however you need to. I have provided some screen shots of what I wrote it. I used the developer function in my  browser to pull most of the classes. Hope this helps you.
0EM50000000S8UE.jpg

View solution in original post

12 REPLIES 12
Highlighted
Anonymous
Not applicable

Re: Forms 2.0 CSS/style issues

To change the button font and other aspects you will need to change the CSS using the button classes in the form editor. I had to make similar changes recently.  Go to form settings then click on the gear and select Edit Custom CSS. In there you will  find a blank box where you can add the button classes and change them however you need to. I have provided some screen shots of what I wrote it. I used the developer function in my  browser to pull most of the classes. Hope this helps you.
0EM50000000S8UE.jpg

View solution in original post

Highlighted
Anonymous
Not applicable

Re: Forms 2.0 CSS/style issues

one more thing the !important part of the code is well important to add to certain lines if the override isn't taking immediately.
Highlighted
Anonymous
Not applicable

Re: Forms 2.0 CSS/style issues

Hi Shannan, thanks for that intel, makes sense.  Would you be able to share that CSS snippet?  It looks like those asset classes would apply to any marketo form via the editor?
Highlighted
Anonymous
Not applicable

Re: Forms 2.0 CSS/style issues

Yes they are useable for any form that you create in Marketo. (not sure how well the code will come through I have poor luck in getting code snippets in to the conversations.)

.mktoForm input[type=text],
.mktoForm input[type=url],
.mktoForm input[type=email],
.mktoForm input[type=tel],
.mktoForm input[type=number],
.mktoForm input[type=date],
.mktoForm select.mktoField,
.mktoForm textarea.mktoField{
  -webkit-appearance: none;
  background-color:#fff;
  height: 54px;
  line-height:1.5em;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  color:#000;
  border:1px solid #aeb0b6;
  padding:0.2em 0.3em;
  box-shadow:inset 1px 1px 4px 1px #ddd;
}
 
.mktoButton {
  -webkit-appearance: none;
  background-color:#f18100;
  position: absolute;
  left: 0px;
  height: 54px;
  width: 443px;
  color: #fff;
  font-size: 40px !important;
  font-weight: 600;

}

.mktoButtonRow {
  width: 443px !important;
}

.mktoButtonWrap {
  margin-left: 20px !important;
  width: 443px !important;
}
Highlighted
Anonymous
Not applicable

Re: Forms 2.0 CSS/style issues

Nate, Shannon, what does the CSS look like to get closer to the sample that Nate orignially posted? I am looking to create a similar look.

Thanks
Highlighted
Anonymous
Not applicable

Re: Forms 2.0 CSS/style issues

Are you wanting the layout or the  button or the text in the fields or all of the above?
Highlighted
Anonymous
Not applicable

Re: Forms 2.0 CSS/style issues

All of the above. I would really like the text in the fields for sure.
 
Highlighted
Anonymous
Not applicable

Re: Forms 2.0 CSS/style issues

You are in luck most of the changes made to the original are not CSS but built in to the capability. I'll break them out with screen shots where needed.

For the Side-by-side fields you will simply drag one field up and to the right of another field until the  arrow on the static field turns orange. (screen shot below)
0EM50000000SwLS.jpg

Field label inside the field instead of outside of the field (screen shot below bullets)
Click on the field and in the properties panel
  • Cut the label out of the label field & paste it into the hint text field
  • Change the label width to zero (0) or small number if you want additional spacing between fields
0EM50000000SwLm.jpg

To make required just check the required check box on each field you want to be required. The astrik is standard.

To change the font and font size of the labels in the fields (screen shots below bullets)
  1. Click on form settings
  2. Click on settings
  3. Change the font and font size of your choice
  4. Please Note that depending on the font you choose and the size of the font you may have to go back to the field details and change the field width of the field individually (you could change it universally in the css but since the labels may or may not be the same length so it may be more of a pain than a help to do it universally)
0EM50000000SwML.jpg 
example of field width change0EM50000000SwMV.jpg

The drop shadow in the fields (no screen shots)
  1. Click on Form Settings
  2. Click on Form Theme (should be default)
  3. Uset the arrows to click through themes until you find one that has a shadow that you like
I hope that this helps you out


 
Highlighted
Level 1

Re: Forms 2.0 CSS/style issues

Is there a way to put the Button on the same row as the field? I'm working on a Blog subscription form with just an email address field, and would ideally want to put them both on the same row.

I see that there's a .mktoButtonRow and a .mktoFormRow, but not sure how to manipulate the two to get what I want.