Change Form Button Text on Page Level

Status: Idea Submitted

When adding a form to a landing page, it is possible to edit, delete and rearrange fields on the page level, without impacting the original form.

However, if you change the Submit button, it does change it on every other place this form is used.

This means that if we want to change our form CTA, we have to duplicate the form - which makes managing workflows based on forms difficult. It would help us a lot if the button text could be changed on the page level just like the form fields.

I can’t believe this isn’t a feature already, considering the rest of the form is customisable in this way already, and all we’re asking to do is change one plain-text property..

@amber-square2 my temporary workaround is to use CSS to set the label text colour to be the same colour as the background, and then use :after to insert an absolute-positioned element over the top of it, with the pointer events set to null.

I did try to use JS to replace the label text itself, but it couldn’t seem to do so.

@JBlay CSS is not a good way to update button text. If you have to change button text in future then you have to update your code.

@amber-square2 Instead of it you can create one module and pass that module value in your template code.

Check the steps mentioned below.

<script>
 window.addEventListener('message', event => {
 if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
 document.querySelector('.hs-button').value = `{{ module.form_custom_button_text }}`;
 }
 });
</script>

Add above code in your template page HTML .

and then you can see option here. Check screenshot below.