Consejos para usar HTML y CSS en tus formularios

En este documento, le mostraremos cómo utilizar el bloque de código HTML y compartir con usted algunos trucos básicos HTML y CSS que puede utilizar para personalizar sus formularios.

Tenga en cuenta que esta es una característica avanzada y requiere conocimientos de CSS y HTML. Si no está familiarizado con HTML o CSS, le recomendamos que trabaje con un miembro de su equipo que lo esté. También hay varios grandes recursos por ahí donde se puede aprender HTML y CSS como este.

HTML

El bloque HTML le permite agregar texto con enlaces incrustados a su formulario en línea. Es posible que desee utilizar esto si desea vincular contactos a un vídeo o página de política de privacidad en su sitio. También puede dar formato al texto, así como su alineación en este bloque específico.

Tenga en cuenta que el bloque HTML solo se puede utilizar en formularios en línea. El cuadro float, la barra flotante y los formularios modales no tienen la opción de agregar un bloque HTML.

Adición del bloque código HTML al formulario

Para empezar, simplemente arrastre y suelte el bloque "Código HTML" en cualquier lugar del formulario. Este bloque se encuentra en el estándar Campos >:

HTML_code_block.png

Para agregar el código HTML personalizado, clic en ese bloque de código HTML en el formulario. Una vez que lo hagas, podrás introducir tu código en el cuadro del lado derecho de la pantalla:

add_html_code.png

Ahora está listo para agregar su propio HTML a su formulario.

Código HTML básico

Puede usar lo siguiente para agregar estilo al texto en el bloque código HTML.

Texto del centro
Etiquetas utilizadas: <center> </center>

En este ejemplo, colocamos el texto que queríamos centrado entre las dos etiquetas. Así es como lo configuramos: 

<center>Envíanos tu nombre y correo electrónico para suscribirte a nuestro boletín de noticias.</center>

center_text_html.png

Añadir salto de línea
Etiquetas utilizadas: <p> </p>

En este ejemplo, agregamos un salto de vínculo entre dos oraciones en nuestro bloque HTML. Así es como lo configuramos:

Envíenos su nombre y correo electrónico para suscribirse a nuestro boletín de noticias. <p>¡No olvides añadirnos a tu lista de contactos!</p>

Line_break_code.png
Texto en negrita
Etiquetas utilizadas <b> </b>

En este ejemplo, queríamos poner en negrita una oración en nuestro bloque HTML. Así es como lo configuramos: 

Envíenos su nombre y correo electrónico para suscribirse a nuestro boletín de noticias. <b>¡No olvides añadirnos a tu lista de contactos!</b>

Bold_html.png

Subrayar texto
Etiquetas utilizadas <u> </u>

En este ejemplo, queríamos subrayar una oración en nuestro bloque HTML. Así es como lo configuramos:

Envíenos su nombre y correo electrónico para suscribirse a nuestro boletín de noticias. <u>¡No olvides añadirnos a tu lista de contactos!</u>

Underline_html.png

Añadir enlace
Etiquetas utilizadas <a href> </a href>

En este ejemplo, queríamos agregar un enlace a nuestra política de privacidad para que los suscriptores haga clic en. Así es como lo configuramos:

Envíenos su nombre y correo electrónico para suscribirse a nuestro boletín de noticias. <a href-"https://www.activecampaign.com/privacy-policy/">Lea nuestra política de privacidad aquí.</a>

Link_html.png
Insertar línea
Ejemplo de código utilizado: 
<div style-"height:10px;border-bottom:1px solid #CCCCCC">
&nbsp;
</div>

En este ejemplo, usamos un bloque de código HTML independiente para crear una línea para insertar entre dos elementos de formulario.

Insert_line_html.png

example_of_line.png

Crear una lista con viñetas
Etiquetas utilizadas <li> </li>

En este ejemplo, queríamos enumerar lo que los suscriptores pueden esperar saber cuando se inscriben en nuestro boletín de noticias. Así es como lo configuramos:

Obtenga más información sobre lo siguiente: <li>Home energy check up</li><li>Solar consultation</li><li>Insulation</li>

bulleted_list_html.png

Añade color a tu texto
Ejemplo de código utilizado:
<estilo de span"color: #267ec2"; <p>Envíanos tu nombre y correo electrónico para suscribirte a nuestro boletín de noticias</p> </span>

En este ejemplo, queríamos agregar color al texto en nuestro bloque de código HTML. El código utilizado se encuentra arriba.

apply_color_html.png

CSS

Puede usar el cuadro CSS personalizado y el Inspector para modificar los elementos visuales del formulario, como ajustar el ancho del botón de envío, ajustar el tipo y el tamaño de la fuente, centrar el texto en un elemento, cambiar el color del texto y mucho más. Esta opción se encuentra en la pestaña Estilo. Todos los tipos de formulario incluyen el cuadro CSS personalizado y Inspector.

custom_css_box.png

Para usar el cuadro e inspector CSS personalizado, haga clic en la pestaña "Estilo" encuentra en la parte superior derecha del editor de formularios. A continuación, haga clic en el del botón inspector y destino el elemento al que desea agregar un estilo personalizado haciendo clic en él.

Ajustar el ancho de un elemento de formulario

Puede usar un porcentaje o un píxel para determinar el ancho de un elemento. En este ejemplo, vamos a ajustar el ancho del botón "Enviar":

  1. Vaya a "Estilo", a continuación, haga clic en "Inspector."

    inspector_button.png

  2. Diríjase al botón "Enviar" haciendo clic en él.

    click_submit_button_to_adjust.png
  3. En el cuadro CSS, enter:width: númeropx; Y reemplace "número" por su propio número. En este ejemplo, usamos 250px:

    example_width.png

El botón Enviar ahora tiene 250 píxeles de ancho:
wide_submit_button.png

Ajustar el tipo y el tamaño de la fuente

Puede utilizar el cuadro CSS para cambiar la fuente de cualquier elemento del formulario. En este ejemplo, vamos a modificar el botón enviar cambiando la fuente a Georgia y ajustando el tamaño de fuente a 25 píxeles:

  1. Vaya a "Estilo", a continuación, haga clic en "Inspector."

    inspector_button.png

  2. Diríjase al elemento haciendo clic en él. En este ejemplo, estamos eligiendo el botón "Enviar". click_submit_button_to_adjust.png
  3. En el cuadro CSS, enter:font-size: 25px;familia de fuentes: Georgia !important:

    css_for_font_type_and_size.png

El tamaño y el tipo de fuente del botón de envío ahora se ajustan:
new_submit_button.png

Centrar el texto con CSS

  1. Vaya a "Estilo" y, a continuación, haga clic en "Inspector."

    inspector_button.png

  2. Dirigirse al elemento que contiene el texto que desea centrar haciendo clic en él

    center_text_using_css.png
  3. En el cuadro CSS, escriba:text-align: center

    center_text_using_css_1.png

El texto ahora está centrado:
text_centered.png

Añadir color con CSS

  1. Vaya a "Estilo", a continuación, haga clic en "Inspector."

    inspector_button.png

  2. Diríjase al elemento que contiene el texto para el que desea cambiar el color haciendo clic en él.

    Click_element_to_add_color.png
  3. En el cuadro CSS, tipo: color:hexcodeforcolor; y reemplace "número" por su propio número. En este ejemplo, usamos #f441b8

    hex_color.png

El texto ahora tiene color aplicado:

blue_text.png

Si desea obtener más información sobre CSS, hay varios recursos excelentes por ahí como este.

¿Tiene más preguntas? Enviar una solicitud