SOLVED

Add class to or wrap .mktoFormRow

Go to solution
TK
Level 1
Level 1

Add class to or wrap .mktoFormRow

Hello!

Maybe there is a better way of doing this, but I have a situation where I need to style a form row based on the field within.

 

Does anyone have an idea on how I could add an a additional class to (or wrap) mktoFormRow with something that is referencing the specific field inside of it?

 

For instance, if I had:

 

<div class = "mktoFormRow">
<label for "FirstName" id="LblFirstName" ... ></label>
<input></input>

 

How could I add something to that parent div so it looks like this?

<div class = "mktoFormRow input-id-FirstName">

 

 

Thanks for any ideas and suggestions!

1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: Add class to or wrap .mktoFormRow

Download FormsPlus::Tag from here and upload it to your Design Studio.

 

Then include it like:

<!-- FormsPlus::Tag Library -->
<script id="teknklFormsPlus-Tag-0.2.4" src="https://pages.example.com/rs/123-ABC-DEF/teknkl-formsplus-tag-0.2.4.js"></script>
<!-- /FormsPlus::Tag Library -->

(replacing the src w/the actual path in your Marketo instance).

 

There's no reason not to have FormsPlus::Tag always loaded — it's integral to advanced forms behaviors and styles. As you'll see, it tags all parent elements with the inputs they contain, using a data- attribute.

 

The script can go anywhere after your form embed; on a Marketo LP, place it just inside the closing </body>.

View solution in original post

3 REPLIES 3
Dave_Roberts
Level 10

Re: Add class to or wrap .mktoFormRow

What are you trying to solve for here -- like why do you want to wrap the parent element based on the field? Is it a styling thing? Would it be for just one field or many? 

 

There's a few ways to go about this:

1. You could use a script solution to do exactly what you're asking. eg. find a specific field by id="" and add that value as a class to the .mktoFormRow. 

2. You might be able to get away without a script by using CSS and/or adding your field into a fieldset which might help you delineate a "field inside a fieldset" (the one) from a "field not inside a fieldset" (the rest).

 

Let me know what you had in mind as a use-case, and if it's possible to share a link to a page w/ the form on it for reference, that would help to get you a better solution that's more plug-n-play from anyone here in the community.

SanfordWhiteman
Level 10 - Community Moderator

Re: Add class to or wrap .mktoFormRow

Download FormsPlus::Tag from here and upload it to your Design Studio.

 

Then include it like:

<!-- FormsPlus::Tag Library -->
<script id="teknklFormsPlus-Tag-0.2.4" src="https://pages.example.com/rs/123-ABC-DEF/teknkl-formsplus-tag-0.2.4.js"></script>
<!-- /FormsPlus::Tag Library -->

(replacing the src w/the actual path in your Marketo instance).

 

There's no reason not to have FormsPlus::Tag always loaded — it's integral to advanced forms behaviors and styles. As you'll see, it tags all parent elements with the inputs they contain, using a data- attribute.

 

The script can go anywhere after your form embed; on a Marketo LP, place it just inside the closing </body>.

TK
Level 1
Level 1

Re: Add class to or wrap .mktoFormRow

@SanfordWhiteman - incredible! Exactly, what I was looking for.

 

Thanks so much!