Personaliza cómo se ve y se comporta el enlace a tu formulario de contacto en tu web.
Opciones de personalización
Al generar el código del enlace HTML en la pestaña Insertar puedes personalizar:
- Texto del enlace: Qué dice el enlace
- Comportamiento del enlace: Abrir en la misma ventana o en una nueva
- Logo: Mostrar u ocultar el logo de SupportRetriever
Opciones de texto del enlace
Opciones predefinidas
Elige entre variaciones habituales:
- Contactar: Simple y directo
- Contáctame: Personal y cercano
- Contáctanos: Profesional, tono empresa
Texto personalizado
Introduce tu propio texto:
- "Ponte en contacto"
- "Envíanos un mensaje"
- "Escríbenos"
- "Habla con nosotros"
- O cualquier texto que encaje con tu marca
Comportamiento del enlace
Misma ventana (por defecto)
El enlace se abre en la pestaña actual:
<a href="https://supportretriever.com/form/your-form-id">Contact</a>
Recomendado para:
- Sitios de una sola página
- Cuando quieras que el usuario vuelva fácilmente
- Experiencia cómoda en móvil
Nueva ventana
El enlace se abre en una nueva pestaña:
<a href="https://supportretriever.com/form/your-form-id" target="_blank" rel="noopener noreferrer">Contact</a>
Recomendado para:
- Sitios de varias páginas
- Cuando el usuario pueda querer mantener tu sitio abierto
- Enlaces externos
Mostrar el logo
Con logo
Incluye el logo de SupportRetriever antes del texto:
<a href="https://supportretriever.com/form/your-form-id">
<img src="https://supportretriever.com/images/logoPink_small.png" alt="SupportRetriever" style="vertical-align: middle; margin-right: 8px; height: 20px;">
Contact
</a>
Aspecto visual:
Contact
Sin logo
Solo texto:
<a href="https://supportretriever.com/form/your-form-id">Contact</a>
Aspecto visual:
Vista previa en vivo
La pestaña Insertar muestra una vista previa que se actualiza al cambiar las opciones:
Vista previa
Estilos CSS personalizados
Después de copiar el HTML puedes añadir CSS personalizado:
/* Estilo del enlace */
.contact-form-link {
color: var(--color-primary);
text-decoration: none;
font-weight: 500;
transition: color 0.2s;
}
.contact-form-link:hover {
color: #2d2a7a;
text-decoration: underline;
}
/* Estilo del logo */
.contact-form-link img {
opacity: 0.9;
transition: opacity 0.2s;
}
.contact-form-link:hover img {
opacity: 1;
}
Buenas prácticas
- Texto claro: Usa texto descriptivo y orientado a la acción
- Ubicación coherente: Coloca los enlaces donde el usuario los espera
- Accesible: Asegura suficiente contraste de color
- Móvil: Prueba en dispositivos móviles
- Alineado con la marca: Que encaje con el diseño de tu sitio