This is a quick update to my prior blog on creating multi-column checkboxes in Pardot. As a refresher: Pardot only allows you to easily create vertical or horizontal checkbox and radio lists. If you have a lot of checkboxes, the list can get really long and create an eyesore on the page. If you try to use a horizontal list to avoid length, then you end up with a poorly formatted word-wrap of checkboxes.
My previous solution got most of the way there, but the formatting was still disappointing. So, I have a couple of updates that resolve my complaints! First, we are going to move the title of the checkbox section out of the checkbox section. We are going to do this with Jenna Molby's Add text between form fields solution. Then, you will just clear out the Label when you build the checkbox field.
An extra pro tip when using Jenna's javascript fix linked above: you can add HTML within the text, so if you need more space above and below, just add some <br>s. For example: '<br>Select your interests:<br><br>' will format properly on the page. You can run with that in other ways as well - bold, italicize, change colors, etc.
Now, in the layout template code, you are going to just add in the following css to what I provided before:
form.form span.value {
margin-left: 0px;
width: fit-content;
}This targets the span that is holding the checkboxes, which in my previous solution was inheriting the 50% width that was set for each individual checkbox.
There is also one other enhancement since the original post. When the screen narrows to a certain width, two columns start to look really crowded. So, I added in a media query to collapse the list into one column when it gets awkwardly small. You can adjust the breaking point for your form, but here are some common breakpoints:
320px — 480px: Mobile devices
481px — 768px: iPads, Tablets
769px — 1024px: Small screens, laptops
1025px — 1200px: Desktops, large screens
1201px and more — Extra large screens, TV
Also remember that if you are inserting a Pardot form onto a website using an iframe, you have to treat your screen width like it's just the iframe window. So, it doesn't matter if the website is on a 65" TV if the iframe is maxed out at 600px.
@media screen and (max-width: 992px) {
.checkbox-grid-2-col span {
display: inline-block;
float: left;
width: 100%;
}
}This little bit of code says that when the screen width shrinks down to 992px, the 2-column designation replates the 1-column designation.
Here is the full code that will need to be inserted into Layout template (adjust the .btn to suit your needs):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="%%description%%" />
<title>%%title%%</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<style type="text/css">
body {
background-color: #ffffff;
padding: 25px;
}
form.form input.text,
form.form textarea.standard,
form.form select,
form.form input.date {
display: block;
width: 100%;
padding: .375rem .75rem;
font-size: 1rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: .25rem;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
form.form select {
height: 40px;
}
form.form textarea.standard {
height: 100px;
}
form.form span.value {
margin-left: 0px;
width: fit-content;
}
.btn {
color: #fff;
background-color: black;
border-color: black;
margin: 25px 0;
}
.btn:hover,
.btn:focus,
.btn:active,
.btn.active,
.open>.dropdown-toggle.btn {
color: black;
background-color: #ffffff;
border-color: black;
}
.pd-checkbox {
width: 100%;
}
.pd-checkbox input,
.pd-checkbox label {
display: inline-block;
margin: 5px;
cursor: pointer;
}
.pd-checkbox label {
position: relative;
}
.pd-checkbox input,
.pd-radio label {
display: inline-block;
margin: 5px;
cursor: pointer;
}
.checkbox-grid-2-col span {
display: inline-block;
float: left;
width: 50%;
}
.checkbox-grid-1-col span {
display: inline-block;
float: left;
width: 100%;
}
@media screen and (max-width: 992px) {
.checkbox-grid-2-col span {
display: inline-block;
float: left;
width: 100%;
}
}
.checkbox-grid-2-col .field-label,
.checkbox-grid-1-col .field-label {
float: left;
clear: both;
}
</style>
</head>
<body>
<div class="container"> %%content%% </div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>Also, note that this only includes up to 2 columns of checkboxes. Refer to my prior blog if you want to attempt 3 or 4 columns.
Here is the result of my latest updates:
