Custom styled form - embed with custom CSS or use API? | Community
Skip to main content
A
Anonymous
March 2, 2016
Question

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

  • March 2, 2016
  • 1 reply
  • 2788 views

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!

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

1 reply

Grégoire_Miche2
Grégoire_Miche2
Level 10
March 2, 2016

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

A
Anonymous
March 2, 2016

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
Justin_Cooperm2
Level 10
March 2, 2016

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.

Terms & ConditionsAccessibility statement

Loading footer...