WP Elementor с контактной формой 7 - отображение местоположения загрузки файла в текстовом поле - PullRequest
0 голосов
/ 25 мая 2018

Итак, я сделал несколько стилей для кнопки загрузки файла (внешний вид по умолчанию не соответствовал общему виду сайта) и смог добиться, чтобы кнопка выглядела стилизованно, но я потерял текстовое поле location, где оно показывает расположениефайл.

Ниже приведен код CSS, который я добавил в пользовательский CSS Elementor под формой 7 «Основные дополнения», чтобы сделать кнопку стильной:

/* Style wrapping span as button */
span.wpcf7-form-control-wrap.file-468 {
    display: inline-block;
    position: relative;
    width: 120px;
    height: 40px;
    border-radius: 20px;
    background: #699FDE;
    /*border: solid 1px #4096ee;*/

    color: #FFF;
    overflow:hidden;
}

/* Made input big and move it left and top inside wrapper to hide actual control but leave input clickable */
input.wpcf7-form-control.wpcf7-file {
    position: absolute;
    width: 1500px;
    height: 1000px;
    right: 0;
    bottom: 0;        
    outline: none !important;
}

/* Add button text */
.wpcf7-file:before {
    content: "Browse";
    display: block;
    width: 120px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    position: absolute;
    right: 0;
    bottom: 0;
    color: #FFF;
    font-size: 12px;
    text-transform: uppercase;
}

span.wpcf7-form-control-wrap.file-468:hover {
    background: #40B8F4;
}

Вот как у меня есть раздел формы в контактеФорма 7:

<label style="color: white;"> Full Name (required)
    [text* your-name] </label>

<label style="color: white;"> Email (required)
    [email* your-email] </label>

<label style="color: white;"> Subject
    [text your-subject] </label>

<label style="color: white;"> Message
    [textarea your-message] </label>

<label style="color: white;"> File Upload
[file file-468 id:fileuploadfield class:fileuploadfield]</label>

[text uploadtextfield id:uploadtextfield class:uploadtextfield]

[submit "Send"]

И это скрипт jQuery, который я пытаюсь использовать внутри дополнительных настроек формы 7 контакта, но пока безуспешно:

jQuery(document).ready(function($) {
  /*Click function of fileupload button when text field is clicked*/
    $("#uploadtextfield").click(function() {
        $('#fileuploadfield').click()
    });

  /*Click function of fileupload button when browse button is clicked*/
    $("input.wpcf7-form-control.wpcf7-file").click(function() {
        $('#fileuploadfield').click()
    });

  /*To bring the selected file value in text field*/    
    $('#fileuploadfield').change(function() {
    $('#uploadtextfield').val($(this).val());
  });

})(jQuery);

Любая помощь будет принята.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...