S

i alguna vez has tenido que añadir a un formulario realizado con el plugin Contact Form 7 la opción de adjuntar un  archivo, habrás comprobado que el estilo del botón upload ‘Examinar’ que se genera viene determinado por el navegador y no es posible personalizarlo directamente con CSS.

Así es como muestra el navegador Firefox el botón Upload y el mansaje adjunto antes y después de seleccionar el archivo(otros navegadores lo muestran de modo similar):

Visualización del botón upload según lo muestra el navegador antes de adjuntar archivo alguno.
Visualización del botón upload una vez adjuntado un archivo al formulario.

Si te has currado un bonito diseño para tu web este botón puedo cargárselo por completo, esto fue lo que me sucedió durante el desarrollo de mi última web.

Pues bien, a continuación te voy a explicar cómo integrar el botón de ‘Examinar’ al diseño de tu web.

1º) Crea el formulario utilizando el plugin Contact Form7 y añádele el siguiente código:

[file file-265 id:botonfuncional class: botonfuncional limit:20000000 filetypes:doc|pdf 1/]
<input type=”button” id=”botonadjuntararchivo” value=”Adjuntar Archivo PDF”>
[text archivoadjuntado id:archivoadjuntado class:archivoadjuntado]

 

Con estas 3 líneas habrás creado el botón upload (‘Examinar’) para adjuntar archivos PDF, un botón no funcional (de momento) para darle el mismo fin y poder darle estilo con CSS, y por último, un campo de texto donde mostrar por pantalla el archivo seleccionado.

Hasta el momento esto es lo que hemos conseguido visualizar con estas líneas de código:

Visualización por pantalla del botón upload, tal y como lo muestra el navegador

(El campo de texto azul se mostrará diferente según el tema con el que trabajes.)

2º) A continuación crearemos las funcionalidades que necesitamos para poder examinar las carpetas del ordenador y seleccionar el archivo a adjuntar.

Para ello, lo más sencillo es hacerlo desde las opciones del tema si las tiene, en el espacio habilitado para añadir código JS. En su defecto puede utilizarse algún plugin para hacerlo de manera senzilla (tipo “Descargar plugin:CSS & JavaScript Toolbox” o similar). Añadiremos el siguiente código:

jQuery(function($) {

/*Asigna las funciones del ‘botonfuncional’ al campo de texto identificado como  ‘archivoadjuntado’ */

$(“#archivoadjuntado”).click(function() {

$(‘#botonfuncional’).click()

});

/* Asigna las funciones del ‘botonfuncional’ al input  identificado como ‘botonadjuntararchivo’ */

$(“#botonadjuntararchivo”).click(function() {

$(‘#botonfuncional’).click()

});

/*Muestra el archivo seleccionado en el campo de texto identificado como ‘archivoadjuntado’ */

$(‘#botonfuncional’).change(function() {

$(‘#archivoadjuntado’).val($(this).val());

});

});

Ahora nuestro nuevo botón Upload ya es funcional y completamente personalizable con CSS.

3º) Con las siguientes intrucciones de CSS conseguiremos dar al botón upload el aspecto que se muestra al final del post:

#botonfuncional {

display:none;

}

#archivoadjuntado {

height:50px;

width:100%;

color:#2DA0D1 !important;

padding-top:5px;

padding-left:0px !important;

background:none !important;

border:none;

}

#botonadjuntararchivo {

height:40px;

width:200px;

margin-top:-15px;

text-align:center;

}

#botonadjuntararchivo {

background-color:#2DA0D1;

color:white;

font-size: 15px;

}

#botonadjuntararchivo:hover{

background-color:#FF9800;

}

 

Finalmente os muestro la transformación del botón con las indicaciones dadas, antes y después de adjuntar el archivo:

Visualización del botón upload personalizado, antes de adjuntar archivo alguno.
Visualización por pantalla de la personalización del botón upload una vez adjuntado un archivo.

Espero que con estas indicaciones consigas personalizar el botón Upload de Examinar carpetas cuando te sea necesario adjuntarlo a un formulario. Y espero también, que si te ha parecido de utilidad el contenido del post, lo compartas. Solo eso. Hasta la vista!!

Post recomendados
Showing 2 comments
  • Mario
    Responder

    Hola , no he podido hacer lo que dices, donde inserto específicamente los códigos de punto 1 y 2?

  • Beta
    Responder

    Hola,

    Como hacer el buton “Examinar” y el texto “No se ha selecionado ningun archivo” en español, a mi me sale en ingles. Gracias

Deja un comentario