Overview

Web Forms offers you the ability to arrange form input fields adjacently. Styling input fields in this manner can help to conserve space and has the effect of making the overall form look smaller. The following steps explain how to accomplish this using custom JS.

In custom JS boxes: After DOM ready

At first, you need to remove the invisible div between each custom field. In order to do that put this line of code at very top. 

$("div[style='float: none; clear: both;']").remove();

Put two field together side by side

Here are the css rules:

var css_48_margin = {
“display”: “inline-block”,

“float”: “left”,
“width”: “48%”,

“margin-right”:”10px”
};


var css_50 = {
“display”: “inline-block”,

“float”: “left”,
“width”: “50%”,
};

Assign this style to custom field

1. $("#form_input_custom6_wrapper").css(css_48_margin). This is the first one and it will be on the left side.

2. $("#form_input_custom7_wrapper").css(css_50). This is the second one and it will be on the right side.

3. Now you can change the custom field by changing it's number. So for custom 5 it will be #form_input_custom5_wrapper

Final code

$(“div[style=’float: none; clear: both;’]”).remove();


var css_48_margin = {
“display”: “inline-block”,
“float”: “left”,

“width”: “48%”,

“margin-right”:”10px”
};


var css_50 = {
“display”: “inline-block”,
“float”: “left”,
“width”: “50%”,
};


$(“#form_input_custom6_wrapper”).css(css_48_margin);

$(“#form_input_custom7_wrapper”).css(css_50);