Adjacent Form Input Fields

Primer Webforms 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 Primer's 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();

In order to put two field together side by side

– this is 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%”,
};

to assign this style to custom field here you want do to

$("#form_input_custom6_wrapper").css(css_48_margin); this is the first one and it will be on the left side
$("#form_input_custom7_wrapper").css(css_50); this is the second one and it will be on the right side

now you can change the custom field by changing it's number so for custom 5 it will be #form_input_custom5_wrapper

so the final code will be

$(“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);