You are viewing limited content. For full access, please sign in.

Question

Question

Is there a place to enter CSS and JacaScript code that so that it applies to all forms?

asked on October 16, 2019 Show version history

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?

0 0

Answer

SELECTED ANSWER
replied on October 17, 2019

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.

2 0

Replies

replied on October 16, 2019 Show version history

Do you use themes? you should be able to apply css there.

0 0
replied on October 16, 2019

You could also just link to an external css page. 

0 0
replied on October 16, 2019

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"); 

}); 

}); 

0 0
replied on October 16, 2019

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.

0 0
SELECTED ANSWER
replied on October 17, 2019

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.

2 0
You are not allowed to follow up in this post.

Sign in to reply to this post.