APIs & Integrations

Not applicable

Change submit button text on embedded forms

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?

13 Replies 13
Not applicable

Change submit button text on embedded forms

Thanks. I need to implement and see.

0 Upvotes
Not applicable

Change submit button text on embedded forms

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

0 Upvotes
Not applicable

Change submit button text on embedded forms

0 Upvotes
Not applicable

Change submit button text on embedded forms

Hi,

Do you have any update on this?

0 Upvotes
3PETE
HubSpot Employee
HubSpot Employee

Change submit button text on embedded forms

@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.

0 Upvotes
3PETE
HubSpot Employee
HubSpot Employee

Change submit button text on embedded forms

@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.

0 Upvotes
Not applicable

Change submit button text on embedded forms

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

0 Upvotes
3PETE
HubSpot Employee
HubSpot Employee

Change submit button text on embedded forms

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

0 Upvotes
3PETE
HubSpot Employee
HubSpot Employee

Change submit button text on embedded forms

@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?

0 Upvotes
Not applicable

Change submit button text on embedded forms

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.

0 Upvotes
Not applicable

Change submit button text on embedded forms

If I do -

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

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

0 Upvotes
JamiesonC
Participant

Change submit button text on embedded forms

@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!

0 Upvotes
3PETE
HubSpot Employee
HubSpot Employee

Change submit button text on embedded forms

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

0 Upvotes