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
Customize up to 8 badges at the top of your trophy case for all other Community members to see!
Boost 3
Earned on 7.21.22
Earned by 1401 people
Select to learn more
Give Back 10
Earned on 7.21.22
Earned by 544 people
Select to learn more
Ignite 3
Earned on 7.19.22
Earned by 886 people
Select to learn more
Give Back 5
Earned on 7.05.22
Earned by 893 people
Select to learn more
Boost 1
Earned on 7.01.22
Earned by 3090 people
Select to learn more
Validate 1
Earned on 6.30.22
Earned by 548 people
Select to learn more
Give Back 3
Earned on 6.30.22
Earned by 1374 people
Select to learn more
Ignite 1
Earned on 1.05.22
Earned by 2970 people
Select to learn more
.png)