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.1 of 1 people found this helpful
one more thing the !important part of the code is well important to add to certain lines if the override isn't taking immediately.
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?
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.)
border:1px solid #aeb0b6;
box-shadow:inset 1px 1px 4px 1px #ddd;
font-size: 40px !important;
width: 443px !important;
margin-left: 20px !important;
width: 443px !important;
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.
Are you wanting the layout or the button or the text in the fields or all of the above?
All of the above. I would really like the text in the fields for sure.
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)
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
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)
- Click on form settings
- Click on settings
- Change the font and font size of your choice
- 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)
example of field width change
The drop shadow in the fields (no screen shots)
- Click on Form Settings
- Click on Form Theme (should be default)
- Uset the arrows to click through themes until you find one that has a shadow that you like
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.
Did you ever figure out how to do this? I am trying to do the same and am not having much luck
Unfortunately I did not