Start with the design

It was asked in the Beaver Builder Slack group how to split the core form over multiple columns.

The first thing we need to know is what fields are we using in the form, and how many columns we want to have.

In this first example, we are going to take a basic form with the Name, Email and Message fields, and then split it across two columns so we have the contact info on the left, and the message field on the right

Working with Bootstrap

Beaver Builder is built on the Bootstrap framework, so what we need to know is how the responsive columns work. You can find out more by visiting the site here.

Bootstrap is broken up into 12 columns, and then uses different classes to determine the width for each screen size. This way we do not need to write CSS media queries.

As we want the content to be in two columns, 12 divided by 2 equals 6, so our column widths need to be 6.

Simple right? from there we want tablets and desktops to be 6 columns, but for phones we want everything to be in one single column so nothing is squashed.

In Bootstrap we use

  • .col-lg- = screens larger than 1200px (x-large desktops)
  • .col-md- = screens larger than 992px  (desktops)
  • .col-sm- = screens larger than 768px (tablets)
  • .col-xs- = screens smaller than 768px (phones)

Going by what we can see above, we know we want to use the class .col-sm- and with a column width of 6, so we need to use .col-sm-6

 

Adding in our classes

Now that we know the class we need to add, how do we add it in there?

For that we are going to use jQuery, now if you do not know jQuery, don't panic, I am going to give you the code as well as what it is doing, and it is only two lines.

First thing we need to understand is basic html. If we add the class to each element then we will end up with each field having a width of 50% and still side by side, not what we are after.

Instead, what we want to do, is wrap the name and email fields in one div that spans the 6 columns and then stack inside that div container. Like this example html

<div>
     <div class="col-sm-6">
          <div>Name Field</div>
          <div>Email Field</div>
     </div>
     <div class="col-sm-6">
          <div>Message Field</div>
     </div>
</div>

Working with jQuery

We have our html worked out, lets set about using jQuery to wrap our fields in the div and adding in our classes.

I am going to assume you are using the Beaver Builder theme, if you aren't, then please consult your theme developer to work out how to include scripts to your themes footer

Jump into the customizer and go to Code > Footer Code

Now paste in the following

<script>

jQuery('.fl-name, .fl-email').wrapAll('<div class="col-sm-6"></div>');

jQuery('.fl-message').addClass('col-md-6');

</script>

So what is this code doing, hopefully it is fairly straight forward for you all.

The first line is taking the name and email fields by their classes, and then wrapping them in the div with our column class. If you want to add more fields then just add in the class.

Here is an example if we used the phone field

jQuery('.fl-name, .fl-email, .fl-phone').wrapAll('<div class="col-sm-6"></div>');

If you add a class that is not there, then the script won't work

The second line is adding the column class directly to the message field.

Hopefully that all makes sense and you now have the layout we wanted

Responsive layouts

Tablet View
Phone View

Single row layout

Now that we have a two column layout, let's take the same form and turn it into a single row contact form.

The Bootsrap layout

As you can see in our sample image above, this time we have four columns, one for each of our fields, including the submit button.

This time we want to change up the breakpoint layout to having four columns for desktops. two columns on tablets and then a single column on phones.

Going back to our Bootstrap columns, we know it works on a twelve column layout, so 12 divided by 4 equals 3 (desktop) and 12 divided by 2 equals 6 (tablet). 

This gives us the following classes:

  • Desktop = col-md-3 (four columns)
  • Tablet = col-sm-6 (two columns)

The jQuery

Unlike before, we do not need to wrap any of our fields in a div container, instead we just need to assign the same class to every field. This is as simple as adding the following to our Customizer > Code > Footer Code

<script>
jQuery('.fl-name, .fl-email, .fl-message, .fl-contact-form-submit').addClass('col-md-3 col-sm-6');
</script>

This should be easy to read, as it is the same code we used for the message field in the previous example.

What it is doing is searching the document for the field classes, and then adding the bootstrap column classes we calculated in the previous step.

Styling with CSS

As you can see from the below image, things don't line up nicely for the single row so let's clean it up with some CSS.

So the first thing we want to do is remove the default min-height css from the message textarea

Jump into the Customizer > Code > CSS and add:

.fl-contact-form textarea {
min-height: 34px;
height: 34px;
}

So why 34px? That is the same height as the name and email fields.

Message CSS
Message CSS Result

What we want to do now is align the submit button using a top margin, however we need to target the button with the classes for the desktop and tablet, when the form is viewed on a mobile we don't want the margin to occur.

So we need to add the following CSS

@media (min-width: 768px) {
.fl-contact-form-submit.col-md-3.col-sm-6 {
margin-top: 25px;
}
}

What this is doing is telling the browser that whenever the screen (or print) resolution is 768px or bigger, then add the top margin of 25px

Final CSS
Desktop Form

Responsive layouts

Tablet View
Phone View

3 thoughts on “Splitting Core Contact Form Across Multiple Columns”

Leave a comment