Help with Custom CSS on a Form and Landing Page
I am trying to add a new field to a form that contains custom CSS on a Landing Page with a JavaScript section that also contains form formatting. The person who created the original form and LP is no longer with the company. Adding the new field messes up the format. I'm not a coder and can't figure out how to make the form look right with the new field. I'm hoping that for someone who does know CSS and Marketo forms that it would be easy to spot what to do to fix this. If so, I'd be grateful for help. If it's not a simple solution that you can just provide here, feel free to let me know that. Thank you!
Original LP:
https://go.veritivcorp.com/Cleanliness-at-Work.html
Test LP with with a new field added to a copy of the form:
https://go.veritivcorp.com/Web-Content-1906-Cleanliness-at-Work-Guide-Download_LP-Request-copy.html
JavaScript Section in the LP (in the test LP, I replaced the original form ID with the new form ID - I got that far!):
<div>
<script>
// <![CDATA[
MktoForms2.whenReady(function(form){
vrtvMktoFormatting();
});
function vrtvMktoFormatting() {
$('.mktoFormRow').each(function() {
if ($(this).children('.mktoFieldDescriptor').length > 1 ){
if ($(this).children('.mktoFieldDescriptor').length == 2) {
$(this).addClass("block-two");
} else if ($(this).children('.mktoFieldDescriptor').length == 3) {
$(this).addClass("block-three");
} else {
$(this).addClass("block-four");
}
}
});
$('#mktoForm_9288').addClass('vrtvMktoForm');
$('#mktoForm_9288').removeAttr('style');
$('.mktoForm input, .mktoForm textarea, .mktoForm label, .mktoForm .mktoFormCol, .mktoForm .mktoButtonWrap, .mktoRequired, select, mktoHasWidth').removeAttr('style');
$('.mktoForm').css('width', '100%');
$('.mktoOffset, .mktoGutter').remove();
$('label').addClass('mktoVrtvLabel').removeClass('mktoLabel');
$('input.mktoField, input.mktoTextField').removeClass('mktoField').removeClass('mktoTextField');
$('.mktoFieldWrap').removeClass('mktoFieldWrap');
$('.mktoFormCol').removeClass('mktoFormCol');
$('.mktoButtonRow').removeClass('mktoButtonRow');
$('.mktoForm button').addClass('as-b').removeClass('mktoButton');
};
MktoForms2.onFormRender(function (form) {
vrtvMktoFormatting();
});
// ]]></script>
</div>
Custom CSS in form:
input[type=checkbox], .mktoForm input[type=radio] {
margin-top: 1rem !important;
}
@media screen and (max-width: 991px) {
input[type=checkbox], .mktoForm input[type=radio] {
margin-top: 2rem !important;
}
}
@media screen and (max-width: 1199px) {
input[type=checkbox], .mktoForm input[type=radio] {
margin-top: 0rem !important;
}
}
For reference, this is the way we want the new field to display on the form (not the gray background - just the placement of the form field and label):
And this is what it looks like if Canada is selected as a Country on an LP where the form behaves as desired:
