Añade un enlace clicable a tu formulario de contacto en tu web usando etiquetas HTML de ancla.
Obtener el código del enlace HTML
- Ve a Gestión de formularios (
/admin/form) - Haz clic en la pestaña Insertar
- Busca la sección Enlace HTML
- Personaliza la apariencia del enlace (opcional)
- Copia el código HTML generado
Enlace HTML básico
El código más simple:
<a href="https://supportretriever.com/form/your-form-id">Contact</a>
Crea un enlace clicable que abre tu formulario en la misma pestaña.
Opciones de personalización
Texto del enlace
Elige entre opciones predefinidas o texto personalizado:
- Contact - Simple y directo
- Contact me - Tono personal
- Contact us - Tono empresa
- Custom - Introduce tu propio texto
Personalizar
Abrir en nueva ventana
Elige si el enlace abre en una nueva pestaña:
- Misma ventana (por defecto) - Se abre en la pestaña actual
- Nueva ventana - Se abre en nueva pestaña con
target="_blank"
Logo de SupportRetriever
Incluir el logo de SupportRetriever en el enlace:
- Mostrar logo - Incluye la imagen del logo antes del texto
- Ocultar logo - Solo texto
No pasa nada si no lo quieres, pero es una forma estupenda de dar a conocer SupportRetriever 🙏
Código HTML generado
Con logo y texto personalizado:
<a href="https://supportretriever.com/form/your-form-id" target="_blank">
<img src="https://supportretriever.com/images/logoPink_small.png" alt="SupportRetriever" style="vertical-align: middle; margin-right: 8px; height: 20px;">
Contact us
</a>
Sin logo:
<a href="https://supportretriever.com/form/your-form-id" target="_blank">Contact us</a>
Vista previa
La pestaña Insertar muestra una vista previa en vivo del enlace:
Contáctanos
Implementación
En HTML
Pega el código directamente en tu HTML:
<nav>
<a href="/">Inicio</a>
<a href="/about">Nosotros</a>
<a href="https://supportretriever.com/form/your-form-id">Contactar</a>
</nav>
En gestores de contenido
La mayoría de CMS permiten HTML:
- WordPress: Bloque HTML o widget HTML personalizado
- Wix/Squarespace: Widget de inserción HTML
- Webflow: Elemento de inserción HTML
- Sitios a medida: Añade el código a tus plantillas
Estilos
Puedes dar estilo al enlace con CSS:
.contact-link {
color: var(--color-primary);
text-decoration: none;
font-weight: 500;
}
.contact-link:hover {
text-decoration: underline;
}
Buenas prácticas
- Llamada a la acción clara: Usa un texto de enlace descriptivo
- Ubicación visible: Coloca el enlace donde el usuario lo espera
- Estilo coherente: Que encaje con el diseño de tu sitio
- Accesibilidad: Asegura suficiente contraste de color