How to show form to the end user

[ivantowers]

Hello,

Im new using json, I already get the Json code to save in to a database and load it to modify the form.

But i dont know how to show the form to the end user in order to send the info.

I see some tools to build json form to html form but I can´t make it work. I get something like this:

{"fields":[{"label":"Name","field_type":"text","required":true,"field_options":{"size":"small"},"cid":"c14"},{"label":"Phone","field_type":"text","required":true,"field_options":{"size":"small"},"cid":"c18"},{"label":"Select an option","field_type":"radio","required":true,"field_options":{"options":[{"label":"Option 1","checked":false},{"label":"Option 2","checked":false}]},"cid":"c22"},{"label":"Date","field_type":"date","required":true,"field_options":{},"cid":"c26"}]}

How to make a form? any ideas ?

Thanks!

[SteveChurch]

I am currently working on a solution for this, however my solution is PHP based where the JSON is processed by a PHP controller which then renders a form for the end user. A Javascript alternative would be good for this project if anyone is willing to work on it? I have sent a email to the developer to see if he is working on this as in the notes it does say from last year this may be worked on. Iff not maybe we should submit a pull.

[jaysukhnm]

@ivantowers you can post your json data through ajax and store this array of data in database, when you want to display to enduser you can fetch from the database, i am going through this strategy.

[SteveChurch]

@jaysukhnm - @ivantowers -I have now completed my form render which is part of a laravel project, took a while to create a function which iterated through the JSON array and it looks messy but it seems to do the job. My PHP is far better than my JS so it seamed the best option. However if anyone does come up with a JS option for this project that would be great!

[SteveChurch]

Here you go, a preview of the final render, this is taking the json from a stored DB and rendering for view, responses are then stored in JSON again and processed into a database.

This is PHP for my render, if you want more info @ivantowers let me know

[Patatou]

Don't know for Ivan, but i want more info !!! :)

When will you release this ?

It look great !

[Gerboa]

It does look good; the "All rights reserved" message might be worrying - is that the form or the renderer?

What does the resultant JSON data look like?

I really need the renderer in JavaScript, any news from @ajb?

[glennpowell2]

Is the php file attached anywhere for others to use @SteveChurch, I would be interested in this if your willing to share

[max-kk]

Hi @glennpowell2

Look at this example, that renders form from JSON.

Note - I've added some more fields params that included in default package (like $field->field_options->show_to, $field->width, etc) so you need remove them from code. Also some functions are Wordpress focused (apply_filters, sanitize_title, etc), so you need remove/replace them.

class Fv_Form_Helper {

    /**
     * @param int $form_ID
     * @return object
     */
    public static function get_form_structure_obj($formJSON) {
        $form_obj = json_decode( stripslashes($formJSON) );
        if ( json_last_error() !== JSON_ERROR_NONE ) {
            return array();
        }
        return $form_obj;
    }

    /**
     * Render upload form fields
     *
     * @param array $public_translated_messages
     * @param object $contest
     * @param bool $show_labels
     */
    public static function render_form($public_translated_messages, $formJSON, $show_labels = true) {

        $fields = self::get_form_structure_obj( $formJSON );

        $eol = "\n";
        $html ="";
        $c = 1;
        $cSectionBreak = 1;
        $wrap_class = '';
        $html .= '<form class="fv_upload_default"><fieldset>';
        foreach ($fields as $field) :

            if ( !empty($field->field_options->show_to) ) {
                $user_id = get_current_user_id();
                // IF user not LOGGED IN
                if ( !$user_id && $field->field_options->show_to == 'logged' ) {
                    continue;
                } elseif ( $user_id && $field->field_options->show_to == 'no_logged' ) {
                    continue;
                }
            }

            if ($field->field_type !== 'section_break'):
                $wrap_class = '';

                if ( empty($field->width) ) {
                    $field->width = '1-1';
                }
                $wrap_class = 'fv-field-type--' . sanitize_title($field->field_type) . ' fv-field-w--' . $field->width;

                // Add a Key value to Class ()
                if ( !empty($field->field_options->save_key) ) {
                    $wrap_class .= ' fv-field-key--' . sanitize_title($field->field_options->save_key);
                }

                $html .= '<div class="fv_wrapper ' . $wrap_class  . '">' . $eol;
                    if ( $show_labels ) {
                        $html .= self::display_label($field, $c) . $eol;
                    }
                    $html .= self::display_field($field, $c) . $eol;
                $html .= '</div>' . $eol;
                $c++;
            else:
                $html .= '</fieldset>';
                $html .= '<legend>' . apply_filters('fv/public/upload_form/section_break', $field->label, $field, $cSectionBreak) . '</legend>';
                $html .= '<fieldset>';
                $cSectionBreak++;
            endif;
        endforeach;

        $html .= apply_filters("fv_upload_form_rules_filer", '', $c, $contest);

        $html .= '<div class="fv_wrapper fv-field-type--submit">' .
                    '<button type="submit" class="fv-upload-btn">' .
                        '<span id="fv_upload_preloader"> <span class="fvicon-spinner icon rotate-animation"></span> </span>' .
                        $public_translated_messages['upload_form_button_text'] .
                    '</button>' .
                    apply_filters("fv_upload_form_rules_hook", '', $c) .
                '</div>';

        $html .= '</fieldset></form>';

        echo $html;
    }

    /**
     * Generate HTML for displaying fields
     * @param  array $field     Field data
     * @param  int $c           Counter
     * @return string
     */
    public static function display_label($field, $c) {
        $html = '<label>';
        $html .=  apply_filters('fv/public/upload_form/label', $field->label, $field, $c, $contest);
        $html .= '</label>';
        return $html;
    }

    /**
     * Generate HTML for displaying fields
     *
     * @param  array $field Field data
     * @param  int $c Field number
     *
     * @return string
     */
    public static function display_field($field, $c) {

        if ( !isset($field->cid) ) {
            return "Form error!";
        }

        $html = '';
        //$this->settings_base
        $option_name = "form[" . $field->cid . "]";

        if (get_current_user_id() > 0) {
            $user_info = get_userdata( get_current_user_id() );
        } else {
            $user_info = false;
        }

        if ( empty($field->class) ) {
            $field->class = 'form-control';
        }

        if ( empty($field->id) ) {
            $field->id = '';
        }
        if ( empty($field->placeholder) ) {
            $field->placeholder = '';
        }
        if ( empty($field->field_type) ) {

        }
        if ( empty($field->field_options) ) {
            $field->field_options = new stdClass();
        }

        // Set default value
        $data = '';
        if ( !empty($field->field_options->default_value) && get_current_user_id() > 0 ) {
            switch($field->field_options->default_value) {
                case 'display_name':
                    $data = $user_info->display_name;
                    break;
                case 'first_name':
                    $data = $user_info->first_name;
                    break;
                case 'last_name':
                    $data = $user_info->last_name;
                    break;
                case 'email':
                    $data = $user_info->user_email;
                    break;
                default:
                    $data = $field->field_options->default_value;
            }
        }

        if ( empty($field->field_options->description) ) {
            $field->field_options->description = '';
        }
        // for radio and select
        if ( empty($field->field_options->options) ) {
            $field->field_options->options = array();
        }

        $required = '';
        if ( !empty($field->required) && $field->required == true ) {
            $required = 'required';
            $field->class .= ' fv-field--required';
        }

        // Try remove ID attr
        //id="' . esc_attr($field->id) . '"
        switch ($field->field_type) {

            case 'text':
                $pattern = '';
                if ( isset($field->field_options->minlength) && $field->field_options->minlength > 0
                    && isset($field->field_options->maxlength) && $field->field_options->maxlength > 3 )
                {
                    $pattern = ' pattern=".{' . $field->field_options->minlength . ',' .  $field->field_options->maxlength . '}" ';
                }

                $html .= '<input class="' . esc_attr($field->class) . '" type="text" name="' . esc_attr($option_name) . '" placeholder="' . esc_attr($field->placeholder) . '" value="' . $data . '" ' . $required . $pattern . '/>' . "\n";
                break;

            case 'phone':
                $mask = '';
                if ( !empty($field->field_options->format) ) {
                    $mask = stripslashes($field->field_options->format);
                }

                $html .= '<input class="' . esc_attr($field->class) . '" type="tel" name="' . esc_attr($option_name) . '" placeholder="' . esc_attr($field->placeholder) . '" data-mask="' . $mask . '" ' . $required . '/>' . "\n";
                break;

            case 'website':
                $html .= '<input class="' . esc_attr($field->class) . '" type="url" name="' . esc_attr($option_name) . '" placeholder="' . esc_attr($field->placeholder) . '" value="' . $data . '" ' . $required . '/>' . "\n";
                break;

            case 'email':
                $html .= '<input autocomplete="on" class="' . esc_attr($field->class) . '" type="email" name="' . esc_attr($option_name) . '" placeholder="' . esc_attr($field->placeholder) . '" value="' . $data . '" ' . $required . '/>' . "\n";
                break;

            case 'number':
                $max = '';
                $min = '';
                $units = '';
                if ( isset($field->field_options->max) ) {
                    $max = ' max="' . $field->field_options->max . '" ';
                }
                if ( isset($field->field_options->min) ) {
                    $min = ' min="' . $field->field_options->min . '" ';
                }
                if ( isset($field->field_options->units) ) {
                    $units = $field->field_options->units;
                }
                $html .= '<div><input style="display: inline-block;" class="' . esc_attr($field->class) . '" type="number" name="' . esc_attr($option_name) . '" placeholder="' . esc_attr($field->placeholder) . '" value="' . $data . '" ' . $required . $min . $max . '/> ' . $units . "</div>\n";
                break;

            case 'date':
                if ( empty($field->field_options->date_format) ) {
                    $field->field_options->date_format = 'dd.mm.yyyy.';
                }
                if ( in_array($field->field_options->date_format[10], array('.','-','/')) ) {
                    $delimiter = $field->field_options->date_format[10];
                } else {
                    $delimiter = '.';
                }
                if ( empty($field->field_options->date_day_label) ) {
                    $field->field_options->date_day_label = 'DD';
                }
                if ( empty($field->field_options->date_month_label) ) {
                    $field->field_options->date_month_label = 'MM';
                }
                if ( empty($field->field_options->date_year_label) ) {
                    $field->field_options->date_year_label = 'YY';
                }
                $delimiter_html = '<span class="date-delimiter">' . $delimiter . '</span>';
                $day = '<input class="' . esc_attr($field->class) . ' day_input" type="number" name="' . esc_attr($option_name) . '[day]" ' . $required . ' value="1" min="1" max="31" size="2"/>';
                $day .= '<span class="date-label date-label-day">' . $field->field_options->date_day_label . '</span>';
                $month = '<input class="' . esc_attr($field->class) . ' month_input" type="number" name="' . esc_attr($option_name) . '[month]" ' . $required . ' value="1" min="1" max="12" size="2"/>';
                $month .= '<span class="date-label date-label-month">' . $field->field_options->date_month_label . '</span>';
                $year = '<input class="' . esc_attr($field->class) . ' year_input" type="number" name="' . esc_attr($option_name) . '[year]" value="' . date('Y') . '" ' . $required . ' min="1920" max="2050" size="4"/>';
                $year .= '<span class="date-label date-label-year">' . $field->field_options->date_year_label . '</span>';

                $inner_class = 'day-is-first';
                switch ($field->field_options->date_format){
                    case 'dd.mm.yyyy.':
                    case 'dd-mm-yyyy-':
                    case 'dd/mm/yyyy/':
                        $date_field = $day . $delimiter_html . $month . $delimiter_html . $year;
                        $inner_class = 'day-is-first';
                        break;
                    case 'mm/dd/yyyy/':
                        $date_field = $month . $delimiter_html . $day . $delimiter_html . $year;
                        $inner_class = 'month-is-first';
                        break;
                    case 'yyyy-mm-dd-':
                        $date_field = $year . $delimiter_html . $month . $delimiter_html . $day;
                        $inner_class = 'year-is-first';
                        break;
                    default:
                        $date_field = $day . $delimiter_html . $month . $delimiter_html . $year;
                        break;
                }
                $html .= '<div class="fv-field-type--date-inner ' . $inner_class . '" data-format="' . $field->field_options->date_format . '">' . $date_field . '</div>';
                unset($date_field);
                unset($year);
                unset($month);
                unset($day);
                unset($delimiter_html);
                unset($delimiter);
                unset($inner_class);
                break;

            case 'paragraph':
            case 'textarea':
                $maxlength = '';
                if ( isset($field->field_options->maxlength) ) {
                    $maxlength = ' maxlength="' . $field->field_options->maxlength . '" ';
                } else {
                    $maxlength = ' maxlength="1254" ';
                }

                $html .= '<textarea class="' . esc_attr($field->class) . '" rows="5" cols="50" name="' . esc_attr($option_name) . '" placeholder="' . esc_attr($field->placeholder) . '" ' . $required . $maxlength . '>' . esc_attr($data) . '</textarea>' . "\n";
                break;

            case 'rules_checkbox':
                $checked = '';
                if ( !empty($field->field_options->checked) ) {
                    $checked = 'checked="checked"';
                }
                $html .= '<label class="checkbox_input"><input type="checkbox" name="' . esc_attr($option_name) . '" class="fv_rules" ' . $checked . ' ' . $required . '/><span class="fv-checkbox-placeholder fvicon-"></span> ' . wp_kses_post($field->placeholder) . '</label> ' . "\n";
                break;

            case 'checkboxes':
            case 'checkbox_multi':
                foreach ($field->field_options->options  as $k => $opt) {
                    $html .= '<label for="' . esc_attr($field->cid . '_' . $k) . '" class="checkbox_input"><input type="checkbox" ' . checked($opt->checked, true, false) . ' name="' . esc_attr($option_name) . '[]" value="' . esc_attr($opt->label) . '" id="' . esc_attr($field->cid . '_' . $k) . '" /><span class="fv-checkbox-placeholder"></span> ' . $opt->label . '</label> ';
                }
                break;

            case 'radio':
                foreach ($field->field_options->options as $k => $opt) {
                    $html .= '<label for="' . esc_attr($field->cid. '_' . $k) . '" class="radio_input"><input type="radio" ' . checked($opt->checked, true, false) . ' name="' . esc_attr($option_name) . '" value="' . esc_attr($opt->label) . '" id="' . esc_attr($field->cid. '_' . $k) . '"  ' . $required . '/> ' . $opt->label . '</label> ';
                }
                break;

            case 'select':
                $html .= '<select name="' . esc_attr($option_name) . '" class="' . esc_attr($field->class) . '" ' . $required . '>';
                if ( !empty($field->include_blank_option) && $field->include_blank_option) {
                    $html .= '<option ' . selected(true) . ' value="">' . __("Select value", 'fv') . '</option>';
                }

                foreach ($field->field_options->options as $k => $opt) {
                    $html .= '<option ' . selected($opt->checked, true, false) . ' value="' . esc_attr($opt->label) . '">' . $opt->label . '</option>';
                }
                $html .= '</select> ';
                break;

            case 'select_multi':
                $html .= '<select name="' . esc_attr($option_name) . '[]" multiple="multiple" ' . $required . '>';
                foreach ($field->field_options->options as $k => $v) {
                    $selected = false;
                    if (in_array($k, $data)) {
                        $selected = true;
                    }
                    $html .= '<option ' . selected($selected, true, false) . ' value="' . esc_attr($k) . '" />' . $v . '</label> ';
                }
                $html .= '</select> ';
                break;

            case 'file':
                if ( apply_filters( 'fv/public/upload_form/custom_file_input/uses', false, $contest ) === false ) {
                    $required = '';
                    $placeholder = !empty($field->placeholder) ? $field->placeholder : '' ;
                    foreach( self::_get_file_inputs($form_ID) as $file_input_name => $file_input_params ):
                        $required = $file_input_params['required'] == true ? 'required="required"' : '';

                        $html .= '<div class="fv-file-wrapper">';
                        $html .= '<input type="file" name="' . $file_input_name . '" class="file-input" ' . $required . ' accept="image/*">' . "\n";
                        if ( isset($file_input_params['photo_name_input']) && $file_input_params['photo_name_input'] == true ) {
                            $html .= '<input type="text" placeholder="'. $placeholder .'" name="'. $file_input_name .'-name" class="form-control form-control-short foto-async-name" ' . $required . '>' . "\n";
                        }
                        $html .= '</div>';
                    endforeach;
                } else {
                    $html = apply_filters('fv/public/upload_form/custom_file_input', $html, $field, $contest);
                }
                break;
        }

        if ( !empty($field->field_options->description) ) {
            switch ($field->field_type) {

                case 'checkbox_multi':
                case 'radio':
                case 'select_multi':
                    $html .= '<span class="description">' . wp_kses_post(stripslashes($field->field_options->description)) . '</span>';
                    break;
                /*case 'file':
                    break;*/
                default:
                    $html .= '<span class="description">' . wp_kses_post(stripslashes($field->field_options->description)). '</span>' . "\n";
                    break;
            }
        }

        return $html;
    }
}

[max-kk]

Some CSS code:

.fv_upload_default .fv_wrapper input,
.fv_upload_default .fv_wrapper textarea {
   border: solid 1px #999;
   padding: 5px !important;
   font-size: 18px;
   background: url(../img/input.jpg) repeat-x left top #FFF !important;
}

.fv_upload_default .fv_wrapper input.invalid {
   border: solid 1px #C45E5E !important;
}
.fv_upload_default .fv_wrapper input:focus,
.fv_upload_default .fv_wrapper textarea:focus {
   border-color: #e5e5e5;
}

.fv_upload_default input[type='text'],
.fv_upload_default input[type='email'],
.fv_upload_default input[type='url'] {
   width: 82%;
}

.fv_upload_default input[type='file'] {
   width: 95%;
}

.fv_upload_default input[type='number'] {
   width: 150px;
}

.fv_upload_default input[type='radio'],
.fv_upload_default input[type='checkbox'],
.fv_upload_form select {
   width: auto;
}

.fv_upload_default .form-control-short {
   width: 300px !important;
}

.fv_upload_default .fv_wrapper select{
   padding: 4px;
}

.error-input,
.fv_rules.error-input + .fv-checkbox-placeholder{
   background-color: #FFEFEF;
   border-color: #BB6666 !important;
   color: #660000;
}

.fv_upload_default  .field,
.fv_upload_default .field label{
   margin-bottom: 4px;
}

.fv_upload_default .fv_wrapper {
   x-clear: both;
   font-family: Trebuchet MS;
   margin-bottom: 0px;
   padding: 12px 0;
   overflow:hidden;
   border-top: solid 1px #e0e0e0;
}

.fv_upload_default .fv_form_filed .wrapper{
   float:left;
   padding:0;
   overflow: hidden;
}

.fv_upload_default .fv_wrapper label {
   padding: 2px 0 2px 0;
   margin: 0 0 5px 0;
   font-weight: bold;
   display: block;
   font-size:16px;
   line-height: 26px;
}

.fv_upload_default .fv_wrapper label .number{
   float: left;
   width: 24px;
   height: 24px;
   line-height: 24px;
   display: block;
   font-size: 12px;
   text-align: center;
   margin-right: 10px;
   margin-top:1px;
   border-radius: 0 30px 30px 0;
}
.fv_upload_default .fv_wrapper .form-control,
.fv_upload_default .fv_wrapper .image-preview--wrapper,
.fv_upload_default .fv_wrapper .checkbox_input,
.fv_upload_default .fv_wrapper .radio_input{
   display: block;
   clear:both;
   margin-bottom:4px;
   margin-top:5px;
   width: 83%;
}

.image-preview--wrapper {
   box-sizing: border-box;
   position: relative;
   padding: 0.2em;
   overflow: hidden;
}
.image-preview--preview {
   box-sizing: border-box;
   position: relative;
   background-position: 50% center, 50% center;
   display: inline-block;
   float: left;
   margin-right: 1em;
}

.image-preview--file-wrap {
   box-sizing: border-box;
   position: relative;
   display: block;
   margin: 0.7em 0px 0.5em 0px;
   float: left;
}

.image-preview--label {
   position: relative;
   display: block;
   margin: 0px 0px 0.05em;
   font-size: 11px;
   color: red;
   padding: 0px;
}

/* ========================
    =DATE FIELD
======================== */
.fv_upload_default .fv-field-type--date .day_input,
.fv_upload_default .fv-field-type--date .month_input {
   width: 44px;
   display: inline-block;
}
.fv_upload_default .fv-field-type--date .year_input {
   width: 60px;
   display: inline-block;
}
.fv_upload_default .fv-field-type--date-inner.day-is-first .form-control:not(.day_input){
   margin-left: 5px;
}
.fv_upload_default .fv-field-type--date-inner.month-is-first .form-control:not(.month_input){
   margin-left: 5px;
}
.fv_upload_default .fv-field-type--date-inner.year-is-first .form-control:not(.year_input){
   margin-left: 5px;
}

.fv-field-type--date .date-label,
.fv-field-type--date .date-delimiter {
   display: inline-block;
   margin-left: 7px;
   font-weight: bold;
}
/*
    =Agree rules CHECKBOX
*/

.fv_rules {
   position: absolute;
   width: 2px;
   height: 1px;
}

.fv_rules + .fv-checkbox-placeholder {
   background-color: #fafafa;
   border: 1px solid #cacece;
   box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
   padding: 9px;
   border-radius: 3px;
   display: inline-block;
   position: relative;

   vertical-align: top;
   margin: 1px 3px 0 0;
}

.fv_rules:checked + .fv-checkbox-placeholder {
   background-color: #e9ecee;
   border: 1px solid #adb8c0;
   box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
   color: #99a1a7;
}

.fv_rules:checked + .fv-checkbox-placeholder:after {
   x-content: '\2714';
   content: "\e601";
   font-size: 19px;
   position: absolute;
   top: -1px;
   left: 2px;
   color: #99a1a7;
}
/* Agree rules CHECKBOX :: END */

.fv_upload_default .fv_wrapper .textarea,
.fv_upload_default .fv_wrapper textarea{
   width: 83%;
   height:100px;
}

.fv_upload_default .fv_wrapper .description {
   font-size:12px;
   margin-left: 33px;
   display: inline-block;
}

.fv_upload_default .fv_wrapper .red_star{
   color:red;
   margin-left:5px;
}

.fv_upload_default .fv_wrapper .body{
   clear:both;
   padding-bottom:4px;
   padding-top:5px;
}

.fv_upload_default .fv_wrapper .hint{
   font-size:12px;
}

.fv_upload_default .submit{
   font-size:16px;
}

.fv_upload_default .fv-upload-btn,
.fv-subscribe-btn {
   font-size: 20px;
   font-weight: 500;
   border-radius: 3px;
   padding: 5px 18px;
   line-height: 30px;
   background: transparent;
   border: 2px solid;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   transition: all 0.2s;
   position: relative;
   color: #425768;
   height: auto;
}

.fv_upload_default .fv-upload-btn:hover,
.fv-subscribe-btn:hover{
   background: rgba(0, 0, 0, 0.05);
   padding: 5px 34px 5px 14px !important;
}
.fv_upload_default .fv-upload-btn:hover:after,
.fv-subscribe-btn:hover:after {
   opacity: 1;
   margin-left: 0;
}
.fv_upload_default .fv-upload-btn:after,
.fv-subscribe-btn:after {
   content: "\e63f";

   font-size: 20px;
   line-height: 30px;
   font-family: 'icomoon_fv';
   opacity: 0;
   position: absolute;
   margin-left: -20px;
   transition: all 0.2s;
   top: 5px;
   right: 5px;
}

/* Mobile styles */
@media ( min-width:768px ) {
   .fv_upload_default input[type='file'] {
      min-width: 320px;
   }

   .fv_upload_default input[type='text'],
   .fv_upload_default input[type='email'],
   .fv_upload_default input[type='url']{
      width: 400px;
      box-sizing: border-box;
   }

   .fv_upload_default .fv_wrapper .textarea,
   .fv_upload_default .fv_wrapper textarea{
      width:500px;
      height:100px;
   }

   .fv_upload_default input[type='file'] {
      min-width: 90%;
   }

   .fv_upload_default .fv_wrapper .form-control,
   .fv_upload_default .fv_wrapper .image-preview--wrapper,
   .fv_upload_default .fv_wrapper .checkbox_input,
   .fv_upload_default .fv_wrapper .radio_input{
      margin-left: 33px;
   }

   .fv-field-w--1-1 {
      width: 100%;
      clear: both;
   }
   .fv-field-w--1-2 {
      width: 50%;
      float: left;
   }
   .fv-field-w--1-3 {
      width: 33.33%;
      float: left;
   }
   .fv-field-w--1-4 {
      width: 25%;
      float: left;
   }
   .fv-field-w--3-4 {
      width: 75%;
      float: left;
   }
   .fv-field-w--2-3 {
      width: 66.66%;
      float: left;
   }
}
@media ( max-width:768px ) {

   .fv_upload_default .fv_wrapper {
      clear: both;
   }

   .fv_upload_default .fv-file-wrapper .form-control-short {
      margin-left: 0px !important;
   }

   .fv_upload_default .fv-file-wrapper {
      margin-bottom: 10px;
      margin-top: 4px;
   }

   .fv_upload_default .fv-field-type--date .day_input,
   .fv_upload_default .fv-field-type--date .month_input {
      width: 32px;
   }
   .fv_upload_default .fv-field-type--date .year_input {
      width: 45px;
   }
   .fv_upload_default .fv-field-type--date-inner.day-is-first .form-control:not(.day_input){
      margin-left: 2px;
   }
   .fv_upload_default .fv-field-type--date-inner.month-is-first .form-control:not(.month_input){
      margin-left: 2px;
   }
   .fv_upload_default .fv-field-type--date-inner.year-is-first .form-control:not(.year_input){
      margin-left: 2px;
   }

   .fv-field-type--date .date-label,
   .fv-field-type--date .date-delimiter {
      margin-left: 2px;
   }
}

/* PRELOADER */

#fv_upload_preloader {
   display: inline-block;
   /*margin-top: 10px;*/
   /*float: right;*/
}
#fv_upload_preloader .icon{
   display: none;
   font-size: 20px;
   line-height: 30px;
   margin-left: 5px;
   margin-right: 15px;
}

/* User */

.fv_upload a { color: #425768; }
.fv_upload a:hover { color: #425768; text-decoration:none }

.fv_upload_form label { color: #425768; }
.fv_upload_form .fv_form_filed { border-top: solid 1px #e0e0e0; }
.fv_upload_form .number{ background-color: #425768 !important; color: #FFFFFF; }
.fv_upload_form form .submit { padding: 5px 10px; margin-top:10px; }

.fv_upload_form .fv_form_filed h3, .fv_form_filed .note{ color: #425768; }
.fv_upload_form .qt_static h3{ color: #354247; }
.fv_upload_form .fv_form_filed .wrapper{ color: #666666; }

[arashyarix]

Hi Mr @max-kk, in Fv_Form_Helper class, you used the "checked" function for checkbox input, but I can't find that. Can you send it here? thank you