post

Input File personalizado com CSS e JS no Elementor

Publicado em: 20/06/2022

Categorias: BlogCSSElementorJavaScriptJSWordpress

É 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.

let inputFile = document.querySelector(".elementor-field-type-upload input");
let labelInputFile = document.querySelector('.elementor-field-type-upload label')

inputFile.addEventListener("change", () => {
    let inputImage = inputFile.files[0];
    labelInputFile.innerText = inputImage.name;
})

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.

Link de 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 para mim, e sugira alguma publicação de algum tema que tenha dificuldades de resolver.

Clique aqui e entre em contato


Comentários