Hyperlink a Form Field Label

How to hyperlink a field label on a form to make a link look like a link

Link to an external site for the Council District field

Without link color, underline, and icon

The CSS

We apply the blue link color to the text and have it underline on hover.

/*****************************************/
/** Style Links with Underline on Hover **/
/*****************************************/
/*use <a class="form-link" */
a.form-link:link {color: #367DB7; text-decoration: none;}
a.form-link:visited {color: #367DB7; text-decoration: none;}
a.form-link:hover {text-decoration: underline;}

The HTML

The html lives in the field label itself and can wrap whatever text you would like to link. We used the external link icon to reinforce the idea that this is an external link.

<a class="form-link" href="https://www.austintexas.gov/GIS/CouncilDistrictMap/" target="_blank"> Look up Council District </a><i class="fa fa-external-link"></i>

How to Implement

1️⃣

Copy pasta the CSS. This styling will apply to all form-links

/*****************************************/
/** Style Links with Underline on Hover **/
/*****************************************/
/*use <a class="form-link" */
a.form-link:link {color: #367DB7; text-decoration: none;}
a.form-link:visited {color: #367DB7; text-decoration: none;}
a.form-link:hover {text-decoration: underline;}

2️⃣

Open the Field Label you want to update with html

Use an <a> tag to set the html class

<a class="form-link"

3️⃣

Define your link

href="https://www.austintexas.gov/GIS/CouncilDistrictMap/"

Determine if you want to open the link in a new tab, if so then add target="_blank"

target="_blank"

and be sure to close the html tag

>

4️⃣

In between the <a> </a> tags set your desired link text

> Look up Council District </a>

5️⃣

Lastly, add a relevant fa icon to your link

<i class="fa fa-external-link"></i>