### [Populating a Form Field from an Anchor Link](https://wpforms.com/developers/how-to-populate-a-form-field-from-an-anchor-link/)

**Published:** May 11, 2021
**Author:** Umair Majeed

**Excerpt:** This tutorial will show you how you can populate a form field from an anchor link with a small snippet. 

**Content:**

Would you like to automatically populate form fields when users click links on your page? Using anchor links and JavaScript, you can fill form fields with predefined text when visitors click specific links.

This guide will show you how to implement this dynamic form population.

## Understanding the Concept

When a user clicks an anchor link (like #daily or #weekly), we’ll capture that interaction and automatically populate a form field with corresponding text. This is useful for:

- Service selection forms
- Product inquiry forms
- Support request forms
- Contact forms with predefined subjects

## Setting Up Your Form

First, let’s create our form. It’s a simple one with fields for **Name**, **Email Address**, **Subject** (Single Line Text), and **Message** (Paragraph Text).

If you need guidance on making your form, [check out our guide on creating your first form.](https://wpforms.com/docs/creating-first-form/ "Creating Your First Form")

Next, note down the ID numbers of your form and fields. You’ll need them for the code snippet. If you’re not sure how to find these IDs, [review out guide on finding form and field IDs](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/ "How to Locate Form ID and Field ID").

![you will need to record the form and field ID since we will need these in the next step](https://wpforms.com/wp-content/uploads/2022/05/wpforms-anchor-link-population-field-id.jpg)## Setting Up the Form Notifications

In this step, we’ll make our **Subject** field automatically populate the **Subject** field in the **Notifications** tab of the form builder.

Simply go to the **Notifications** tab, and in the **Subject** field, type the text you want along with the field ID, just like you use Smart Tags elsewhere in the form builder.

For more details on using field IDs this way, check out our detailed guide on [using smart tags](https://wpforms.com/docs/how-to-use-smart-tags-in-wpforms/#fieldid).

In our example, our field ID is **3**, so our Subject line will be: **“I’m interested in {field\_id=”3″} cleaning for my company”.**

![the field ID Smart Tag will now also populate the subject line of the email notifications](https://wpforms.com/wp-content/uploads/2022/05/wpforms-anchor-link-population-notifications.jpg)## Creating Anchor Links

Next, let’s create a new page on our site with anchor links and the form we just made.

If you need help understanding anchor links or creating them, [check out this tutorial from WPBeginner](https://www.wpbeginner.com/beginners-guide/how-to-easily-add-anchor-links-in-wordpress-step-by-step/ "How to “Easily” Add Anchor Links in WordPress (Step by Step)").

To create anchor links, simply type up your page content and use Headings in WordPress. In the Block Editor, select a Heading, go to the Advanced tab, and add the text you want to use for the anchor link. WordPress recommends keeping it short, with no spaces, or using hyphens for multiple words. For example, “about-us” for an About Us section.

For our tutorial, we’ll have sections for Daily, Weekly, Monthly, and Quarterly.

![create the anchor link inside WordPress by adding this to the heading, next we'll create the link.](https://wpforms.com/wp-content/uploads/2021/05/wpforms-add-anchor-links.jpg)For each heading, we’ll insert a one-word anchor link. For example, the Daily section will have the anchor link **daily**.

Once we’ve added the anchor links, we’ll select text in the content that will jump to each section when clicked and populate our form’s **Subject** field.

To link text to the anchor links, we’ll add a link as usual in WordPress. Select the text, click the chain icon, and instead of a full URL, add a pound sign and then the anchor link word. For example, **\#daily**.

![select your text to add your internal link to the anchor link on the same page](https://wpforms.com/wp-content/uploads/2021/05/wpforms-add-internal-link.jpg)WordPress will automatically assign each link a unique data-id based on the link name. So **\#daily** will have a data-id of **\#daily**.

We’ll do the same for the **\#weekly**, **\#monthly**, and **\#quarterly** sections of our page.

## Populating the Form With the Anchor Link Text

Now it’s time to add the snippet that will pull this all together. If you need any help in adding snippets to your site, [please see this tutorial](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "How to Add Custom PHP or JavaScript for WPForms").

You’ll need to update the snippet to match the same name of the internal links as well as the form ID (**378**) and the field ID (**-field\_3**).

![now you can easily populate field from anchor link](https://wpforms.com/wp-content/uploads/2021/05/wpforms-populate-field-from-anchor-link.gif)And that’s it! Did you know you can do something very similar just inside the form itself? Take a look at our tutorial on [How to Add a Table of Contents for Long Forms](https://wpforms.com/developers/how-to-add-a-table-of-contents-for-long-forms/ "How to Add a Table of Contents for Long Forms").

## Reference Action

[wpforms\_wp\_footer\_end](https://wpforms.com/developers/wpforms_wp_footer_end/ "Using the wpforms_wp_footer_end action")

## Frequently Asked Questions

#### Q: Can I also use a CSS classname or ID?

**A:** Absolutely! If you would rather trigger the JavaScript by a CSS class or ID, you would just change the script. For example, if your CSS class names were **daily-link**, **weekly-link**, **monthly-link**, and **quarterly-link**, the snippet would be this.

```

/**
 * Populate field from anchor link.
 *
 * @link https://wpforms.com/developers/how-to-populate-a-form-field-from-an-anchor-link/
 */
 
function wpf_dev_autofill_field() {
?>

**Categories:** Extending

**Tags:** Javascript, jQuery, JS

---