Dropdown pre-select value from specific page

  • kingsleytth

    (@kingsleytth)


    5 years, 7 months ago

    Hi team,

    I have a silly question for the CF7.

    I would like to pre-select the value from the dropdown menu in my contact form when the users browsing the specific page.

    Example:
    Pages: Product A, B & C pages
    Dropdown menu in the form: Product A, B & C

    If user browsing Product A, the dropdown will auto select “Product A” from the form.

    If user browsing Product B, the dropdown will auto select “Product B” from the form…etc

    I not a devloper and have no clue on how to do it.

    Any advice?

Viewing 3 replies - 1 through 3 (of 3 total)
  • robrandell

    (@robrandell)

    5 years, 7 months ago

    You will need jQuery/JS to add the ‘selected’ attribute to the dropdown so the correct option is selected dependant on the page being viewed. It may well need another hidden field to be populated with that value on the page load so the JS can get that value then apply the change to the dropdown.

    .pid is the class of the hidden field or hidden HTML element with the value required.
    .interestedin is the class of the dropdown.

    if( $( '.pid' ).length > 0 && $( '.interestedin' ).length > 0 ) {
    var id = parseInt( $( '.pid' ).text() );
        $( '.interestedin > option' ).each( function() {
            if( id === parseInt( this.value ) ) {
                $( this ).attr( 'selected', 'selected' );
            }
        });
    }

    Either that or simply strip the dropdown out altogether and have the field auto populate with the correct value when the page loads and prevent the user of changing it, i.e. disable the field.

    sjsbaker

    (@sjsbaker)

    5 years, 7 months ago

    I am trying to do something similar, except just auto-populate the name of a course using the course-id of the page that the form is completed in.

    This is a first for me, too.

    I tried inserting a shortcode on the eval form that works on all course pages, but it doesn’t seem to work in CF7 even though I have the eval form embedded on a course page.

    Any advice is greatly appreciated.

    Thread Starter kingsleytth

    (@kingsleytth)

    5 years, 7 months ago

    Hi @robrandell,

    Thank you so much for your solution. I just wonder do you think you can help me create this form? If yes, do let me know how can I get your service.

    Thank you.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Dropdown pre-select value from specific page’ is closed to new replies.