There are several bits of code like to make items Two/ThreePerLine or to hide a field in CSS, or JavaScript that will format a phone number to look nicer. I apply this code to every form I create. Is there a place to enter this code so that whenever I create a new form, it always starts with that code, then I can edit it from there?
Question
Question
Is there a place to enter CSS and JacaScript code that so that it applies to all forms?
Answer
You can place the css and java script in files under the forms folder and then reference those in the css and java script sections like below:
CSS:
@import url('https://formsserver/forms/path/file.css');
Java script:
$(document).ready(function(){ $.getScript('/Forms/path/file.js'); });
You can also include extra that is not used on every page, but make sure not to get the file too large as it can still slow down the page loading.
Replies
Do you use themes? you should be able to apply css there.
We do use Themes, but I dont believe Themes adjust the items that I want them to. We use the below code on every form.
/*Displays two fields per line*/
.TwoPerLine{display: inline-block; width:365px;}
.TwoPerLine > .cf-field {width: 335px !important;}
.TwoPerLine .cf-medium {width:100%;}
/* Displays three fields per line */
.ThreePerLine {display: inline-block; width: 33%;}
.ThreePerLine .cf-medium {width:100%;}
/*Hides fields*/
.hide {display:none;}
.approval-wrap > p:nth-child(1){
display:none;
}
#comments {
display:none;
}
Linking to an external CSS page sounds like it might work. How do you go about that?
Although, there is also some JavaScript that I would like on every form, such as:
/*Formats phone number*/
$(document).ready(function () {
$.getScript('http://imageoneforms.com/Forms/js/jquery.maskedinput.min.js', function () {
$(".phone input").mask("(999) 999-9999");
});
});
You are right. I haven't messed around with themes. Ours were built before I started here. I assumed there would be a way to add global css in that interface.
You can place the css and java script in files under the forms folder and then reference those in the css and java script sections like below:
CSS:
@import url('https://formsserver/forms/path/file.css');
Java script:
$(document).ready(function(){ $.getScript('/Forms/path/file.js'); });
You can also include extra that is not used on every page, but make sure not to get the file too large as it can still slow down the page loading.