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!
Solved! Go to Solution.
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>.
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.
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>.