Feb 152016
 

Como Centrar El Formulario De Contacto FSCF te muestra cómo centralizar los campos de texto, el contenido div y otros campos del formulario.

Actualizado el: 12 de enero, 2019

Esta tutoría te ayudará a centrar el formulario de contacto utilizando la versión 4.x o superior.

Como Centrar El Formulario De Contacto FSCF

Nota: Es posible que decida ajustar la configuraciones del código de este tutorial a los códigos siguientes.

  • De – text-align: center; a –text-align: left;
  • De – margin-left: auto; margin-right: auto; a –text-align: center;

================================

Paso 1 ) Haga clic en Configuración Básica para centrar el mensaje de Texto de bienvenida. Ver la siguiente imagen.

  • Cambiar el <p>a<pstyle = “text-align: center;”></p>

fast-secure-contact-form-estilo-centrico

Paso 2 ) Haga clic en la pestaña Estilos para añadir el código personalizado. Ver la siguiente imagen.

Recuerda que tienes de seleccionar el método de entregar el estilo del formulario

  • CSS Hoja de estilo interno (por defecto, editar más adelante)

fast-secure-contact-form-estilo-2

Paso 3 ) La siguiente imagen muestra donde se tiene que añadir el siguiente código CSS.

Código CSS para Añadir

  • En los campos DIV: margin-left: auto;margin-right: auto;
  • En muchos otros campos: text-align: center;

Campos

  • Formulario DIV: = margin-left: auto;margin-right: auto;
  • Alineación etiquetas de entrada DIV: = text-align: center;
  • Alineación campos de entrada DIV: = text-align: center;
  • Pequeño CAPTCHA DIV: = margin-left: auto;margin-right: auto;
  • Grande CAPTCHA DIV: = margin-left: auto;margin-right: auto;
  • Enviar DIV: = text-align: center;

fast-secure-contact-form-estilo-div

Paso 4 ) La siguiente imagen Estilo de etiquetas, entradas de campo, botones y texto muestra dónde agregar el siguiente código CSS.

  • Indicador campo obligatorio:
  • Campo de texto obligatorio:
  • Mensajes de validación de entrada:
  • Redirigiendo mensaje:
  • Etiquetas de campo:
  • Entrada de casilla de texto:

fast-secure-contact-form-estilo-etiquetas

Paso 5 ) La siguiente imagen continúa del Paso 4 ) arriba y muestra dónde agregar el código CSS.

  • Entrada de campo de texto CAPCHA:
  • Campos de área de texto de entrada:
  • Seleccione los campos de entrada:

fast-secure-contact-form-estilo-etiquetas-2

Paso 6 ) La siguiente imagen muestra el formulario de contacto. Como puedes ver las casillas y el texto esta centralizado.

fast-secure-contact-form-estilo-final

Por favor, recuerda que en algunos casos su formulario de contacto tendrá extra campos añadido. Si estos campos no están centrados, tendrá que añadir el código mencionado arriba a los campos correspondientes.

Pincha en el siguiente enlace Como Agregar Campos Fast Secure Contact Form Plugin para completar el siguiente tutorial.

Si tiene alguna pregunta, o sugerencia no dude en preguntar.

Disfrutar.

Más Cursos de Fast Secure Contact Form:

Me llamo Manuel Ballesta Ruiz. Trabajo en informática desde 1999 y disfruto de los desafíos que me trae. Me encanta desarrollar sitios con WordPress. Paso mucho tiempo ayudando en los foros de wordpress.org. He estado escribiendo tutoriales desde 2011. Ahora estoy aprendiendo a administrar mi propio servidor virtual privado VPS.

 Deja un Comentario

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)