SupportRetriever LogoSupportRetriever
Log in

Embedding with HTML Link

Add a clickable link to your contact form on your website using HTML anchor tags.

Getting HTML Link Code

  1. Go to Form Management (/admin/form)
  2. Click the Embed tab
  3. Find the HTML Link section
  4. Customize the link appearance (optional)
  5. Copy the generated HTML code

Basic HTML Link

The simplest HTML link code:

<a href="https://supportretriever.com/form/your-form-id">Contact</a>

This creates a clickable link that opens your form in the same browser tab.

Customization Options

Link Text

Choose from preset options or use custom text:

  • Contact - Simple and direct
  • Contact me - Personal tone
  • Contact us - Business tone
  • Custom - Enter your own text

Customize

Open in New Window

Choose whether the link opens in a new tab:

  • Same window (default) - Opens in current tab
  • New window - Opens in new tab with target="_blank"

SupportRetriever Logo

Include the SupportRetriever logo in your link:

  • Show logo - Includes logo image before text
  • Hide logo - Text-only link
It's OK if you don't want it, but just know that this is a great way to help SupportRetriever gain more awareness 🙏

Generated HTML Code

With logo and custom text:

<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>

Without logo:

<a href="https://supportretriever.com/form/your-form-id" target="_blank">Contact us</a>

Preview

The Embed tab shows a live preview of your link:

SupportRetriever Contact us

Implementation

In HTML

Paste the code directly into your HTML:

<nav>
  <a href="/">Home</a>
  <a href="/about">About</a>
  <a href="https://supportretriever.com/form/your-form-id">Contact</a>
</nav>

In Content Management Systems

Most CMS platforms support HTML:

  • WordPress: Use HTML block or custom HTML widget
  • Wix/Squarespace: Use HTML embed widget
  • Webflow: Paste in HTML embed element
  • Custom sites: Add to your template files

Styling

You can style the link with CSS:

.contact-link {
  color: #3f3ea2;
  text-decoration: none;
  font-weight: 500;
}

.contact-link:hover {
  text-decoration: underline;
}

Best Practices

  • Clear Call-to-Action: Use descriptive link text
  • Prominent Placement: Put links where users expect them
  • Consistent Styling: Match your site's design
  • Accessibility: Ensure sufficient color contrast

Related Topics

Explore More

Browse All Articles