Customizing HTML Link Appearance

Customize how your contact form link looks and behaves on your website.

Customization Options

When generating HTML link code in the Embed tab, you can customize:

Link Text - What the link says
Link Behavior - Opens in same or new window
Logo Display - Show or hide SupportRetriever logo

Link Text Options

Preset Options

Choose from common variations:

Contact - Simple, direct
Contact me - Personal, friendly
Contact us - Professional, business-like

Custom Text

Enter your own link text:

"Get in touch"
"Send us a message"
"Reach out"
"Talk to us"
Or any text that fits your brand

Link Text

Link Behavior

Same Window (Default)

Link opens in the current browser tab:

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

Best for:

Single-page websites
When you want users to return easily
Mobile-friendly experiences

New Window

Link opens in a new browser tab:

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

Best for:

Multi-page websites
When users might want to keep your site open
External links

Open in new window

Logo Display

With Logo

Includes SupportRetriever logo before text:

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

Visual appearance:

Contact

Without Logo

Text-only link:

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

Visual appearance:

Contact

Live Preview

The Embed tab shows a live preview that updates as you change options:

Preview

Custom CSS Styling

After copying the HTML, you can add custom CSS:

/* Style the link */
.contact-form-link {
  color: #3f3ea2;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

.contact-form-link:hover {
  color: #2d2a7a;
  text-decoration: underline;
}

/* Style the logo */
.contact-form-link img {
  opacity: 0.9;
  transition: opacity 0.2s;
}

.contact-form-link:hover img {
  opacity: 1;
}

Best Practices

Clear Text: Use descriptive, action-oriented text
Consistent Placement: Put links where users expect them
Accessible: Ensure sufficient color contrast
Mobile-Friendly: Test on mobile devices
Brand Alignment: Match your site's design language