Change submit button text on embedded forms


#1

Hi,

I need to change the submit button text depending on some conditions.

I am using jQuery -

$(’.submit_button’).val(‘Some Text’).change();

inside “onFormReady” callback.

But the button text is still the default set on hubspot. What could be the reason?


#2

@sougata_bose What version of the tracking code are you using? The older HubSpot tracking code doesn’t support callback functions for the forms embed code. Are you hosted on the HubSpot COS?


#3

Hi,

I am using the latest version. I am able to change other stylings like input CSS, label CSS. But unable to change the button text.


#4

If I do -

$(’.submit_button’).attr(‘data-value’, ‘Some Text’).change();

the data-value gets set, but the value is not.


#5

@sougata_bose Can you paste the link to the page here so I can take a look at it?


#6

Hi,

You can check the code on https://www.sourcesecurity.com/notused/form-test.html


#7

Hi,

Do you have any update on this?


#8

@sougata_bose I was able to recreate the issue on my end last Friday. I have reached out internally to the specific engineering team to see if they have any insights they can provide me.


#9

@sougata_bose I have heard back from the dev team. This is not a supported use of the onFormReady callback and will not work. I’m not sure if this applies to your specific use case but you can always change the text of the submit button in the Forms tool in the UI.


#10

But we need the button text dynamic for the same form. We can not use the UI for this. Is there any work around?


#11

@sougata_bose The work around would be to create a custom form and then post the form submission data to HubSpot.


#12

Ok, we will do accordingly. Thank you! :slight_smile:


#13

@sougata_bose — You’ll find that it’s notoriously difficult to change the text of an <input type=“select”> from JQuery, for some reason. The problem is not unique to HubSpot forms.

After much agony trying to accomplish the same thing, I finally got this to work. It seems that the attribute change itself needs to be decoupled from the callback — possibly so that the DOM can finish processing the new elements created by the forms.create() call — so a setTimeout() is used.

Also, HubSpot has a tendency to reset the submit button text each time the user navigates from one field to another. The only way I could find to combat this was to modify the global HSFR object, which caches information about the form configuration. This technique relies on undocumented architectural features that are subject to change without notice. Use at your own risk.

onFormReady: function($form) {
	window.setTimeout(function(){
		$form.find('.hs_submit .hs-button').prop('value', 'New Submit Text');
		for (var i = 0; i < HSFR.FORM_COMPONENTS.length; ++i) {
			if (HSFR.FORM_COMPONENTS[i].getDOMNode().dataset.reactid == $form.get(0).dataset.reactid) {
				HSFR.FORM_COMPONENTS[i].props.submitText = 'New Submit Text';
			}
		}
	}, 10);
}

There might be a VERY brief moment where the original text is visible, but most users probably won’t even notice it.

Hope this works for you too!


#14

Thanks. I need to implement and see.