# Hyperlink a Form Field Label

![Link to an external site for the Council District field](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-MbHp1ncbMoU4Md6jkjU%2F-MbhTGx4xE5Y8yJG1jff%2Fimage.png?alt=media\&token=34cac7a5-be76-49c8-a141-629c56f858df)

![Without link color, underline, and icon](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-Mbha6rygArS9SDvzAhY%2F-Mbhax2kASF03KMADxX5%2Fimage.png?alt=media\&token=3953fd49-02e7-46e8-974f-8dfd13416cb1)

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

{% tabs %}
{% tab title="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;}
```

{% endtab %}

{% tab title="2️⃣" %}
Open the Field Label you want to update with html

![](https://3087753818-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LzNSSXajDFpzOv2IhIv%2F-MbHp1ncbMoU4Md6jkjU%2F-MbhYrkMOG6f8JWjYqzy%2Fimage.png?alt=media\&token=63b3cf4e-2212-4cb7-b5ab-f9b9cdb41482)

Use an `<a>` tag to set the html class

```
<a class="form-link"
```

{% endtab %}

{% tab title="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

```
>
```

{% endtab %}

{% tab title="4️⃣" %}
In between the `<a>` `</a>` tags set your desired link text

```
> Look up Council District </a>
```

{% endtab %}

{% tab title="5️⃣" %}
Lastly, add a relevant fa icon to your link

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

{% endtab %}
{% endtabs %}