Hi @Dave_Roberts - You kindly helped me recently with a form fields formatting issue caused by some whacky custom CSS on the form and JS on the Landing Page that was inherited. I have another Landing Page where I'm trying to add the same checkboxes field and having a formatting problem that I hope you can help with. Note that I stripped the Custom CSS from the form entirely. This didn't change anything on the form except for the way in which my new field was failing to display correctly. Here are the details:
LP with Form:
https://go.veritivcorp.com/Web-Form-2391-FS-Custodial-Assessment-Request_LP-Custodial-Assessment-copy.html
JS on LP:
<div>
<script>// <![CDATA[
MktoForms2.whenReady(function(form){
vrtvMktoFormatting();
form.onSuccess(function(values, followUpUrl) {
form.getFormElem().hide();
document.getElementById('thank-you-msg').style.display = 'block';
return false;
});
});
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_9437').addClass('vrtvMktoForm');
$('#mktoForm_9437').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>
Form Field (correctly formatted) as it appears in the Forms editor:
This is the Custom CSS that I stripped from the form - including the CSS you had given me previously, which I added to this one - to no avail:
div[style^="width: 255px;"] {
display: block !important;
width: 98% !important;
}
input[type=checkbox], .mktoForm input[type=radio] {
margin-top: 0 !important;
}
.mktoFormRow:nth-of-type(8) label.mktoVrtvLabel {
margin-left: 1.6rem !important;
}
.vrtvMktoForm select.mktoField {
background: none !important;
}
.vrtvMktoForm select.mktoField {
height: 32px !important;
padding: 4px 8px !important;
}
.vrtvMktoForm .as-b {
border-radius: .25em !important;
}
.mktoForm .mktoRadioList, .mktoForm .mktoCheckboxList {
margin-top: -3rem;
width: 24px !important;
}
.vrtvMktoForm .mktoFormRow .mktoFieldDescriptor {
padding-right: 0px;
}
.mktoFormRow:nth-of-type(8) label.mktoVrtvLabel {
margin-left: 2rem !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;
}
}
/* restore native checkbox display */
.mktoForm input[type=checkbox] {
opacity: 1;
margin: 0px !important;
float: left !important;
margin-right: 10px !important;
}
/* hide fake checkbox element */
.mktoForm input[type=checkbox] + label:before {
display: none !important;
}
/* get rid of negative top margin */
.mktoForm .mktoRadioList, .mktoForm .mktoCheckboxList {
margin-top: 0px !important;
padding: 0px !important;
}
/* indent checkbox label */
.vrtvMktoForm .mktoLogicalField label.mktoVrtvLabel {
margin-left: 20px !important;
}
/* fix mobile label width issue */
.vrtvMktoForm label.mktoVrtvLabel {
width: 100% !important;
padding-bottom: 5px !important;
margin-bottom: 0px !important;
}
.mktoAsterix {
float: left !important;
padding-left: 0px !important;
padding-right: 5px !important;
}
I'd be grateful for any help!
... View more