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();
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);
Comments
0 comments
Please sign in to leave a comment.