# Hyperlink a Form Field Label

![Link to an external site for the Council District field](/files/-MbhTGx4xE5Y8yJG1jff)

![Without link color, underline, and icon](/files/-Mbhax2kASF03KMADxX5)

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

![](/files/-MbhYrkMOG6f8JWjYqzy)

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://atd-dts.gitbook.io/atd-knack-operations/knack-code/looks/hyperlink-form-field-label.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.