Custom styled form - embed with custom CSS or use API?

[Anonymous]

Hi,

I want to add a simple email subscribe form to our website. I'd like it styled in a certain way:

So, I have already created this form and the CSS to style it. Now I want to get people who fill it in to go into Marketo.

What's the best way to do this? Is it possible to style a Marketo form to look like the one above? Or should I look at using the API?

Thanks!

[Grégoire_Miche2]

Hi Ben,

The API is not the question here. You can set the CSS at the form level (clicking on the gear icon on the form theme page) or in your landing page or web site CSS. It will work on embedded forms very well.

My preference is that you do it on you landing page CSS or your web site CSS, so that it does not depend on user doing it at form level.

-Greg

[Anonymous]

Thanks Greg, in that case I'll investigate styling the form. I already have the necessary CSS for a basic HTML form (see below). To apply this to the Marketo form, do I need to add anything? eg. I can see .mktoForm precedes the CSS, so should I add that to each part below?

Also. when using a Marketo form, is it possible to move the submit button to the right of the form?

Here's the code for the basic styled form:

<style>

input[type=text] {

    padding: 8px 60px 8px 14px;

    border-radius: 10px 0 0 10px;

    outline: none;

    border:0px;

    color:#29393f;

}

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

    background-color: #1ba8dd;

    color: white;

    padding: 8px 14px;

    outline: none;

    text-decoration: none;

    cursor: pointer;

    text-transform: uppercase;

    border:0px;

    border-radius: 0 10px 10px 0;

}

</style>

<form>

<input type="text" placeholder="Your email"><input type="submit">

</form>

[Justin_Cooperm2]

Check out Sanford Whiteman​'s example of stripping all Marketo form styles: MktoForms2 :: Destyle Marketo form - JSFiddle

You may find it easier to work with at the bare bones. But, either way, the form will support any CSS you apply to it.

[Anonymous]

Thanks Justin, that might be useful. Will investigate.