SOLVED

Add a CSS class to MktoForm field

Go to solution
TBlane_McMichen
Marketo Employee

Add a CSS class to MktoForm field

Related to this thread, I want to add an autocomplete feature to one of the fields to avoid a long select list.  I found this JS that will do the job... Awesomplete: Ultra lightweight, highly customizable, simple autocomplete, by Lea Verou

The trick is to add a class to the field (<input class="awesomplete" ...) but i don't see how to do that.  Any ideas?

1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: Add a CSS class to MktoForm field

Awesomplete has multiple methods of binding data lists to inputs.

The CSS class is the declarative method, and that isn't the best choice for forms libraries like Marketo's, which inject forms asynchronously into the page.

Instead, use the programmatic method, as shown here: MktoForms2 :: Awesomplete

View solution in original post

6 REPLIES 6
SanfordWhiteman
Level 10 - Community Moderator

Re: Add a CSS class to MktoForm field

Awesomplete has multiple methods of binding data lists to inputs.

The CSS class is the declarative method, and that isn't the best choice for forms libraries like Marketo's, which inject forms asynchronously into the page.

Instead, use the programmatic method, as shown here: MktoForms2 :: Awesomplete

TBlane_McMichen
Marketo Employee

Re: Add a CSS class to MktoForm field

Perfect! 

Just what I needed.  Thanks!

TBlane_McMichen
Marketo Employee

Re: Add a CSS class to MktoForm field

Is there a way to change the code and datalist, so I the user can pick their Full Name and Awesomplete will populate their First name, Last name, Email address, and Phone into hidden fields?

TBlane_McMichen
Marketo Employee

Re: Add a CSS class to MktoForm field

Sanford Whiteman​ i looked in your codepen and what i need is similar to your Google Places Autocomplete, but I need to be able to provide the data.

SanfordWhiteman
Level 10 - Community Moderator

Re: Add a CSS class to MktoForm field

Well, the way GP Autocomplete works is very different, so I wouldn't take any guidance from that!

With Awesomeplete you can do it like this.

TBlane_McMichen
Marketo Employee

Re: Add a CSS class to MktoForm field

Thank you Sanford Whiteman for your help.  It works very well.

I modified it to complete multiple fields by doing this...

dataList: {
     "Bob" : { "LastName" : "Hoskins",
"Phone" : "111-555-3333" },
     "Barbara" : { "LastName" : "Bel Geddes"
, "Phone" : "222-555-4444" },

     "Charlize" : { "LastName" : "Theron", "Phone" : "333-555-4444" },

}

... not that you wouldn't know, but for others that may find this thread at a later date.