In-page button selecting a radio button within a Gravity Form

Get Help
1

Hi, I’ve been wrecking my brains trying to resolve this issue:

  1. I have a button on a page
  2. If a user clicks it it should scroll down to the form
  3. And also a specific radio button should be selected

Is there any way to do that? :frowning: I have tried a million Google searches but don’t know how to even frame this as a question.

Thank you so much in advance.

2

How about this: have the button in your page. Link the button to this URL (it includes a named anchor and also a query string parameter and value):

https://example.com/the-page/?myvar=rb1#formanchor

That would scroll the page down to the element with the ID of “formanchor” (you can use a div with that ID or another element in the page with that ID) and then the myvar=rb1 would pre-select the radio button choice with the value “rb1”. You have to set up that radio button field to allow dynamic population (that is a checkbox on the field under the Advanced tab) and you have to have a matching radio button label or value of rb1.

I created a demo for you here:
[SITE REMOVED]

Try the buttons and see how the radio button are pre-selected. This is not strictly scrolling down the page (it’s a page reload) but if this works then you are all set. If this does not work, you can attach jQuery to the button to scroll to the form and pre-select one of the radio button options. That will require more work :slight_smile:

2 Likes
3

You’re a genius. This is what I wanted. I know it’s a lot to ask but would the jQuery version be a lot more complicated? It would be a nicer experience if the page didn’t reload.

You are my hero.

4

Hello. I’m glad that is close to what you want. For someone with a little bit of time and jQuery skills I don’t think it would be too difficult. However, I was not able to come up with that in the amount of time I had for this one.

5

It’s not the prettiest code nor is it the most correct code in the world, but I thought I’d share my jQuery solution in case anyone is interested. It’s not very dynamic, i.e. if someone needs 4 choices instead of 3 they’d need to add more code and adapt to their liking.

function ChangeUrl(page, url) {
  if (typeof (history.pushState) != "undefined") {
    var obj = { Page: page, Url: url };
    history.pushState(obj, obj.Page, obj.Url);
  }
}

jQuery(function($) {
  // Give the first button this #id from the WordPress Admin.
  // Repeat this function for how many buttons you have.
  $("#careerChoice1").click(function () {
    
    // This prevents the browser refreshing on click.
     event.preventDefault();

    // Change the url to /careers/?careerchoice=1, 2, 3, etc.
    // so that if the user shares this url the form will be populated
    // with the right choice.
    ChangeUrl('Page1', '?careerchoice=1');

    // Select the right radio button
    $('#choice_2_14_0').trigger('click');

    // Scroll the page to the form #applynow
    $("html, body").animate({
       scrollTop: $('#applynow').offset().top 
    }, 400);
  });
});

The cool part is that if the visitor’s browser can’t run JavaScript the buttons can simply have the form ID in their href and it will gracefully degrade to a simple jump to the form.

Hope this helps anyone, at least get an idea.
If anyone has suggestions on how to make this code better please consider replying.

Thank you so much.

1 Like