APIs & Integrations

matttunney
Top colaborador(a)

Customise selected option in a form embed based on previous page

resolver

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

0 Avaliação positiva
1 Solução aceita
matttunney
Solução
Top colaborador(a)

Customise selected option in a form embed based on previous page

resolver

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) {
    }
})

Exibir solução no post original

0 Avaliação positiva
2 Respostas 2
matttunney
Solução
Top colaborador(a)

Customise selected option in a form embed based on previous page

resolver

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) {
    }
})
0 Avaliação positiva
dianalcont
Top colaborador(a) | Parceiro Diamante
Top colaborador(a) | Parceiro Diamante

Customise selected option in a form embed based on previous page

resolver

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

Did this post help solve your problem? Help the community and mark it as a solution.
Diana Contreras
Helping B2Bs grow faster with a systematic inbound marketing framework.
HubSpot Diamond Partner BadgeA Diamond Solutions Partner
Book 30 Minutes with Diana »
0 Avaliação positiva