post

Campo anexar arquivo (File Input) personalizado no Formulário do Elementor com CSS + JS

Publicado em: 29/11/2024 / Atualizado em: 29/11/2024

Categorias: BlogCSSElementorJavaScript (JS)JSWordpress

Nesse post eu vou te mostrar como você pode personalizar o campo de anexar arquivos do formulário do Elementor para que ele fique com uma estética muito mais agradável, apenas utilizando um pouco de CSS JavaScript personalizado.

Primeiramente você precisa adicionar este script CSS em “Avançado > Custom CSS” no seu widget de formulário:

/* Estilo do container */
selector .elementor-field-type-upload {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 2px solid #6b6b6b;
    border-radius: 100px;
    padding: 12px 12px 12px 24px !important;
    background-color: #f9f9f9;
    margin: 0 10px 24px;
}

/* Estilo do texto de "Nenhum arquivo selecionado" */
selector .elementor-field-type-upload span {
    flex-grow: 1;
    color: #666;
    font-size: 16px;
}

/* Esconder o input de upload original */
selector .elementor-field-type-upload input[type="file"] {
    display: none;
}

/* Estilo do botão */
selector .elementor-field-type-upload label {
    display: inline-block;
    background-color: #6200ea;
    color: #fff;
    font-size: 14px;
    padding: 10px 20px !important;
    border-radius: 25px;
    cursor: pointer;
    text-align: center;
    margin-left: 10px;
    white-space: nowrap;
}
/* Estilo do botão hover */
selector .elementor-field-type-upload label:hover {
    background-color: #4500a5;
}

/* Remove os labels de todos os inputs, exceto o do upload */
selector form label:not(.elementor-field-type-upload label) {
    display: none;
}

Depois, você precisa arrastar o widget de HTML para a sua página e adicionar este script em Javascript para que o campo seja atualizado com o nome do arquivo:

<script>
document.addEventListener("DOMContentLoaded", function () {
    const uploadField = document.querySelector(".elementor-field-type-upload");
    const fileInput = uploadField.querySelector("input[type='file']");
    const label = uploadField.querySelector("label");
    
    // Cria o texto que mostra o nome do arquivo
    const fileNameText = document.createElement("span");
    fileNameText.textContent = "Nenhum arquivo selecionado";
    uploadField.insertBefore(fileNameText, label);

    // Atualiza o texto quando um arquivo é selecionado
    fileInput.addEventListener("change", function () {
        const fileName = this.files.length > 0 ? this.files[0].name : "Nenhum arquivo selecionado";
        fileNameText.textContent = fileName;
    });
});
</script>

Com os códigos de exemplo acima, ele vai ficar com esta aparência aqui embaixo:

image
print do campo de anexar arquivos personalizado o Elementor

Você pode, claro, customizar ali o CSS para que ele fique mais adequado ao estilo do seu site.

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/5868

ID de Referência: 5868

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