Is it possible to personalize the Submit Button text in WFFM.
Our requirement is to display the different Button text based on the User type logged-in. We have a rule to identify the person type
Or do we need to duplicate the form just for changing the button text.
It is not possible to personalize the Submit button text using the out-of-the-box module. Unlike the form fields which allows you to set Rules against the element, the Submit button only allows you to set a single value.
You need to create a duplicate of the form and use personalization to switch the form out.
One possible solution might be to create a rendering with some Javascript which sets the text of the button, and calling the script immediately should minimize any noticeable flicker of the text being changed on page load.
@model RenderingModel
<script>
var buttonText = @Html.Sitecore().Field("Button Text", new { DisableWebEdit = true });
var $submitBtn = $(document.body.lastChild).prev('form').find(':submit');
$submitBtn.prop('value', buttonText);
</script>
Create a new template with a field to hold Button Text and then create an item as the datasource of your rendering. You can then insert this rendering immediately following your WFFM Rendering.
The script uses the jQuery prev() selector to find the form, select submit element and then set the text of the element. You can then use Personalization Rules to hide the rendering (when you want default text from the form to be shown) or switch the datasource to a different item for variations of the button text.
You can see an example in this Codepen demo
A slight variation of the above would be to add a placeholder to the FormViewModel rendering and change the code to use the closest() selector rather than prev(). It accomplishes the same thing but you can then use placeholder restrictions to only allow this new rendering in that placeholder.
