post

Input File personalizado com CSS e JS no Elementor

Publicado em: 20/06/2022 / Atualizado em: 23/03/2024

Categorias: BlogCSSElementorJavaScript (JS)JSWordpress

É possível customizar o input file (campo de arquivo) do formulário no Elementor (ou em qualquer formulário HTML) apenas com CSS, e caso queira, você pode aplicar um pouco de Javascript para dar uma animação a mais.

Este tutorial esta para o formulário do Elementor, mas você pode adaptar para qualquer estrutura HTML, ok.

Abaixo, segue uma estrutura HTML, que retirei como exemplo de um formulário real, desenvolvido em um site wordpress, com Elementor.

<div class="elementor-field-type-upload elementor-field-group elementor-column elementor-field-group-field_53c80dc elementor-col-50 elementor-field-required">
  <label for="form-field-field_53c80dc" class="elementor-field-label">
    Clique aqui para enviar seu anexo
  </label>
  <input type="file" name="form_fields[field_53c80dc]" id="form-field-field_53c80dc" class="elementor-field elementor-size-lg  elementor-upload-field" required="required" aria-required="true">
</div>

Note que a estrutura HTML acima, é exatamente igual como o Elementor adiciona o campo ao seu formulário.

PASSO FUNDAMENTAL

Para personalizar o seu campo “file” em seu formulário Elementor, apenas precisa adicionar o CSS abaixo:

.elementor-field-type-upload label {
    background: #6D6E71 !important;
    border-radius: 8px !important;
    color: #F5F5F5 !important;
    font-size: 18px !important;
    padding: 20px !important;
    width: 100% !important;
    margin: 5px 0px 0px !important;
}

.elementor-field-type-upload label + input {
    display: none;
}

.elementor-field-type-upload::after {
    content: "Arquivos nos formatos: .pdf, .doc, .docx";
    margin-left: 0;
    margin-top: 5px;
}
	
.elementor-field-type-upload::before {
    content: "Enviar arquivo";
    font-family: var(--e-global-typography-primary-font-family ), Sans-serif;
    font-weight: var(--e-global-typography-primary-font-weight );
}

.elementor-field-type-upload label::before {
    content: "";
    padding: 10px;
    background-repeat: no-repeat;
    background-position: 0px 14px;
	margin-right: 10px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNCAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAuNDIzMzc1IDYuMDkxNTlMNS4wMTI3MyAxLjUzMTkxQzcuMDY4NjkgLTAuNTEwNjM4IDEwLjQwMjEgLTAuNTEwNjM4IDEyLjQ1OCAxLjUzMTkxQzE0LjUxNCAzLjU3NDc1IDE0LjUxNCA2Ljg4NjQ0IDEyLjQ1OCA4LjkyOTI3TDYuNDQ4OTkgMTQuODk5NUM0Ljk3NjE1IDE2LjM2MjkgMi41ODkzNCAxNi4zNjc1IDEuMTExMDggMTQuOTA5MkMtMC4zNjI2MTEgMTMuNDU2MSAtMC4zNzE0NjggMTEuMDkxIDEuMDkxMzYgOS42MjY5OEMxLjA5NDUxIDkuNjIzODQgMy4xMDYxOSA3LjYyNTI5IDcuMTI1ODMgMy42MzE2MUM4LjAxNDY3IDIuNzQ4NDcgOS40NTU3OSAyLjc0ODQ3IDEwLjM0NDYgMy42MzE2MUMxMS4yMzM1IDQuNTE0NzQgMTEuMjMzNSA1Ljk0NjQ0IDEwLjM0NDYgNi44Mjk1OEw1Ljc1NTI4IDExLjM4OTNMNC42MjgxNiAxMC4yNjkzTDkuMjE3NTEgNS43MDk4OEM5LjQ4Mzc5IDUuNDQ1MDIgOS40ODM3OSA1LjAxNTg4IDkuMjE3NTEgNC43NTEzMUM4Ljk1MTIzIDQuNDg2NDYgOC41MTkyNCA0LjQ4NjQ2IDguMjUyNjcgNC43NTEzMUwyLjIyODIgMTAuNzM3QzEuMzc5OTMgMTEuNTg1OCAxLjM4NTA3IDEyLjk0ODEgMi4yMzM5MiAxMy43ODUyQzMuMDg5MDQgMTQuNjI4NiA0LjQ2OTU5IDE0LjYyNjEgNS4zMjE4NiAxMy43Nzk1TDExLjMzMDkgNy44MDkyOEMxMi43NjQzIDYuMzg1MDEgMTIuNzY0MyA0LjA3NTg5IDExLjMzMDkgMi42NTE2MkM5Ljg5NzIxIDEuMjI3MzUgNy41NzMyNSAxLjIyNzM1IDYuMTM5NTYgMi42NTE2MkwxLjU1MDIxIDcuMjExMjlMMC40MjMzNzUgNi4wOTE1OVoiIGZpbGw9IiNGNUY1RjUiLz4KPC9zdmc+Cg==);
}

Com o CSS acima, você já pode receber o resultado visual completo abaixo.

Resultado final:

Resultado final da personalização do campo “file”

PASSO OPCIONAL

Caso queira exibir o nome do arquivo, depois de selecionado, você pode aplicar o seguinte código JavaScript abaixo.

<script>
    let inputFile = document.querySelector(".elementor-field-type-upload input[type='file']");
    let labelInputFile = document.querySelector('.elementor-field-type-upload label');

    inputFile.addEventListener("change", () => {
        let files = inputFile.files;
        let fileNames = [];

        for (let i = 0; i < files.length; i++) {
            fileNames.push(files[i].name);
        }

        labelInputFile.innerText = fileNames.join(', '); // Separa os nomes por vírgula
    });
</script>

Com o código JS acima, assim que o usuário selecionar o arquivo para anexar, o texto do botão vai mudar para mostrar o nome do arquivo selecionado.

Atualização: Agora o código javascript funciona com campo multiple. Isso quer dizer, que é possível exibir mais de 1 nome separado por virgula.

Publicações recomendadas:

Inscreva-se em Nossa News:

Seja notificando sempre que tiver conteúdo novo disponível no meu canal do Youtube ou artigo no meu Blog.

Bruno Devs News

Link Curto para Compartilhamento

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.

bruno.art.br/pb/1761

ID de Referência: 1761

Sugira uma publicação

Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.

Clique aqui e entre em contato


Comentários