FAQs

File input elements in forms are normally formatted by the user's browser, not by ChronoForms. There are though many ways of changing the defualt layout using CSS and JavaScript. This FAQ looks at using a few examples of these methods in CFv5.

The NiceFileInput jQuery plug-in

This method was suggested for ChronoForms by user BNDragon. It is a jQuery plug-in developed by Jorge Moreno Moro. See the documentation here - there is a link to the download from GitHub at the bottom of the page.

This is what the end result looks like using the settings and CSS in this FAQ - the Choose button changes color on hover and you click it to select a file. You can change the CSS, the 'Choose' label and some of the behaviours - see the script documents for more information.

a. Download the package, unzip and copy the jquery.nicefileinput.min.js file to the /components/com_chronoforms5/extras/nicefileinput folder on your site, you will need to create the folder as well.

b. Add a File Field element in the Designer tab of your form. Open the settings and add file nice to the Class box.

In the Setup tab add a Load JavaScript action to the form On Load event.

In the JS Code box add this code which links the format script to all inputs with the class file:, you can change the label to suit your form (as you will see this is not the same as the ChronoForms input label):

jQuery(document).ready(function (jQ) {
  jQ( '.file' ).nicefileinput({
    label: 'Choose'
  });
});

and in the JS Files box add this code which loads the JavaScript library:

<?php
echo JUri::root().'/components/com_chronoforms5/extras/nicefileinput/jquery.nicefileinput.min.js';
?>

c. Add a Load CSS action to the form On Load event and add ths CSS to it:

.gcore-display-table {
  width: 100% !important;
}
.nice {
  border: solid #549384 1px;
  background: #fff;
  font-size: 14px;
  display: block;
  width: 100%;
  max-width: 360px;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 0 0 2px #fff;
}
.nice:hover {
  border: solid #069 1px;
}
.nice .NFI-button {
  height: 40px;
  line-height: 40px;
  background: #549384;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
  color: #fff;
  width: 30%;
  font-weight: 700;
}
.nice .NFI-button:hover {
  background: #069;
}
.nice .NFI-filename {
  width: 70%;
  height: 40px;
  margin: 0;
  padding: 0;
  display: block;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
}
.gbs3 .NFI-wrapper {
  // needed to over-write the ChronoForms padding settings
  padding: 0px; !important
}

Note: This CSS is taken from an example on Jorge's site - you can edit it to suit your needs. 

d. Save and test the form.