Auto populate form fields on a Anchor Tag button click

[gra-benjamin]

I have a button on a page that is not a CTA button. When a user clicks the button I have an anchor tag set to move the person down the page to fill out a form. This is working correctly as intended but I am also looking to see if I can also auto-populate one of the dropdown fields in the form with a predetermined selected record.

To be more clear I am looking for this to happen WITHOUT a page submission and WITHOUT using a query string. I just want the button to be clicked, the user moves down to the form, and the form field auto-populated on click.

Here on the page, you can see my three buttons on the pricing section.

masterlawninc-4899056.hs-sites.com

Lawn Care Pricing | Master Lawn | Memphis, TN & Olive Branch, MS

Looking for lawn care services in and around Memphis, TN and Olive Branch, MS? Here is our lawn care pricing at Master Lawn.

I have seen this work on other sites and I am wondering what I need to do to make it happen. Thanks for any help in advance.

[impulsekring]

How would you modify this to populate a hidden single-line text field?

[cbarley]

Hi Benjamin, it looks like you've got this working on your own as I see Gold, Silver and Platinum show up in the form on click. Still need help here?

[gra-benjamin · Accepted solution]

Yes I actually got the help of the original template developer to solve this for me.

Here is what we did:

1. I gave the Form module this class: pricing-form

2. I added these IDs to the pricing tables:

pricing-table-silver
pricing-table-gold
pricing-table-platinum

3. I added this class to the pricing button modules: pricing-table-button

4. I added a HTML module at the bottom of the page (Page Custom JavaScript) containing the JS script:

$(function() {
    $('.pricing-form select[name="select_lawn_care_program"]').initialize(function() {
        var input = $(this);
        $('#pricing-table-silver .pricing-table-button a').on('click', function() {
            input.find('option[value="Silver Program"]').prop('selected', true);
        });
        $('#pricing-table-gold .pricing-table-button a').on('click', function() {
            input.find('option[value="Gold Program"]').prop('selected', true);
        });
        $('#pricing-table-platinum .pricing-table-button a').on('click', function() {
            input.find('option[value="Platinum Program"]').prop('selected', true);
        });
    });
});
</script>

As long as you keep the Select Lawn Care Program* selector that way it will work, otherwise you may need to update the script as well. Unfortunately, there is no other way I'm aware of in HubSpot. Adding custom IDs or classes to form fields would be ideal, but AFAIK that's not possible in HubSpot.

---

I hope this helps anyone who follows up on this post.

[cbarley]

Hi @Benjamin_Bachman, what exactly are you looking to have populate on the form? Which field should be populated after clicking, and what information should be included? This should be possible with JS/HubL combination but I'll just need more info