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

3️⃣

4️⃣

5️⃣