Customise selected option in a form embed based on previous page

SOLVE
Esteemed Contributor

Hi,

 

I'm looking to auto select an option in a embedded form based on a where a user arrived at our form from.

I'm using a javascript function to check if the referral path matches the value the form select field.

What I can't figure out is how to set the correct option to selected.

 

Any help on this would be greatly appreciated.

 

Thanks

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Solution
Esteemed Contributor

So I have a fix for this that triggers on 'onformReady:'

The set_select_option tests the document referrer for a matching value and returns the appropriate value that should match the hubspot select value

 

function set_select_option() {

    if(document.referrer.length === 0) {
        return false ;
    }

    var ref = document.referrer,
    result = false;

    if(ref.includes('url-value')) {
        result = 'a matching value';
    } else if (ref.includes('another-url-value')) {
        result = 'a different value';
    } else {
        result = false;
    }

    return result;
}

hbspt.forms.create({
    portalId: '1111111',
    formId: '111111111-111111111-111111111-111111111',
    target: '#target',
    css: '',
    onFormReady: function($form) {
        (set_select_option() !== false) ? $('select[name="area_of_enquiry"]').val(set_select_option()) : '';
    },
    onBeforeFormInit: function($form) {
    },
    onFormSubmit: function($form) {
    }
})

View solution in original post

Reply
0 Upvotes
2 Replies 2
Top Contributor | Platinum Partner

Hi @matttunney 

 

I know that you can autopopulate forms using a query string in the page URL.

 

You can use a static string if you know where traffic is coming from (email campaign, ads, social post, etc.). Change the query for each channel to populate the right field in this use case. I love this because it works for hidden fieds as well.

 

Is this what you are using when you mentioned the function you have implemented to check referral path?

 

Here is a knowledge base article I like that helps as a starting point: https://knowledge.hubspot.com/forms/can-i-auto-populate-form-fields-through-a-query-string

 

Hopefully that solves for what you are looking for. If not, I'd love to see what you have set up and brainstorm some options from there.

 

Best,

 

Diana

Reply
0 Upvotes
Solution
Esteemed Contributor

So I have a fix for this that triggers on 'onformReady:'

The set_select_option tests the document referrer for a matching value and returns the appropriate value that should match the hubspot select value

 

function set_select_option() {

    if(document.referrer.length === 0) {
        return false ;
    }

    var ref = document.referrer,
    result = false;

    if(ref.includes('url-value')) {
        result = 'a matching value';
    } else if (ref.includes('another-url-value')) {
        result = 'a different value';
    } else {
        result = false;
    }

    return result;
}

hbspt.forms.create({
    portalId: '1111111',
    formId: '111111111-111111111-111111111-111111111',
    target: '#target',
    css: '',
    onFormReady: function($form) {
        (set_select_option() !== false) ? $('select[name="area_of_enquiry"]').val(set_select_option()) : '';
    },
    onBeforeFormInit: function($form) {
    },
    onFormSubmit: function($form) {
    }
})

View solution in original post

Reply
0 Upvotes