Introduction
Would you like to populate a form field on your form with text from an anchor link on your page? An anchor link is an HTML link as it will accept the href (location) value, but what makes an anchor link special is the ability to link to different sections on your page.
In our tutorial, our page will have some anchor links, but we want that link to populate a form field on our form. We’ll walk through each step of setting up our form, our anchor links, and the JavaScript that’s used to trigger the capture of this text.
Creating the form
First, we’ll create our form. It’s a simple form that will only contain the Name, Email Address, Subject (Single Line Text), and a Message (Paragraph Text) field.
If you need help in creating your form, please see this documentation.
You’ll need to make a note of the form and field ID as you’ll be needing those ID numbers for the code snippet. If you need help in finding your form and field ID numbers, please see this tutorial.
Setting up the form notifications
In this step, we’re going to have our Subject field populate the Subject field on the Notifications tab of the form builer.
Just navigate to the Notifications tab and in the Subject field you can enter the text you’d like with the field ID just like we can use Smart Tags in other areas of the form builder.
For more information on using field IDs in this manner, please check out this documentation.
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.
Setting up the anchor links
Next, we’re going to create a new page on our site that will contain some anchor links and the form we just created.
If you need any help in understanding anchor links or how to create them, please check out this tutorial from WPBeginner.
All you need to do is type up the content for the page and then for each anchor link you want to have to break your page into sections, these should be created as Headings inside WordPress. When you select the Heading, you can open the Advanced tab of the Block Editor to add the text you need to make this heading part of the anchor link.
WordPress recommends that these are a single word or two and shouldn’t contain spaces. If you want to have more than one word, you should separate these with a hyphen. As an example, an anchor link for an About Us section on a website would be about-us.
For our tutorial, we’re going to have Daily, Weekly, Monthly, and Quarterly sections.
For each of our headings, we are going to have a one-word anchor link inserted. For example, our Daily section has the anchor link of daily.
Once you’ve added the anchor links to the headings, we now need to just select some text in the content that when clicked will jump to this section of our page but also will populate our form’s Subject form field.
To connect text to the heading anchor links, we’ll just need to add a link like you normally would in WordPress. Select the text and click the chain icon to add a link. Instead of a full URL, we’ll just need to add a pound sign and then the word for that particular anchor link.
In our first example, our Daily section has the anchor link text of daily so our link will simply be #daily.
When you create internal links like this, WordPress will automatically assign each link a unique data-id. WordPress will use the name of the link for the data-id. So in our example, our internal link that was added was #daily, so WordPress will automatically assign the data-id of #daily.
We’ll continue adding our internal links for the #weekly, #monthly, and #quarterly sections of our page.
Adding the snippet to populate field from anchor link
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.
/**
* 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() {
?>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery( 'a[data-id="#daily"]' ).click(function(){
document.getElementById( 'wpforms-378-field_3' ).value = "daily cleaning";
});
jQuery( 'a[data-id="#weekly"]' ).click(function(){
document.getElementById( 'wpforms-378-field_3' ).value = "weekly cleaning";
});
jQuery( 'a[data-id="#monthly"]' ).click(function(){
document.getElementById( 'wpforms-378-field_3' ).value = "monthly cleaning";
});
jQuery( 'a[data-id="#quarterly"]' ).click(function(){
document.getElementById( 'wpforms-378-field_3' ).value = "quarterly cleaning";
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_autofill_field', 10 );
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).
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.
Related
Action Reference: wpforms_wp_footer_end
FAQ
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() {
?>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery( 'a.daily-link' ).click(function(){
document.getElementById( 'wpforms-378-field_3' ).value = "daily cleaning";
});
jQuery( 'a.weekly-link' ).click(function(){
document.getElementById( 'wpforms-378-field_3' ).value = "weekly cleaning";
});
jQuery( 'a.monthly-link' ).click(function(){
document.getElementById( 'wpforms-378-field_3' ).value = "monthly cleaning";
});
jQuery( 'a.quarterly-link' ).click(function(){
document.getElementById( 'wpforms-378-field_3' ).value = "quarterly cleaning";
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_autofill_field', 10 );
If you were using an ID instead of a class, just replace the period with a pound sign in each of the links. Example: a#daily-link.