FormStack Save on Next hack

FormStack for Salesforce, as the name suggests, integrates very nicely with Salesforce. Within this app, there are two different types of forms you can create - stand-alone forms and Community Forms.

Community Forms are forms that you can build in the FormStack app and then drop into your Community as a component. There are, however, some limitations to these forms.

The first issue to address is that the ability to save your progress while filling out the form is not possible on a Community Form. Instead, you have to leverage the form's ability to prefill based on the logged-in user and the selection of the most recently created record as the prefill. This solution is a very good one, and it’s great that they provide the JavaScript snippet for public consumption. However, it relies on the user actually clicking the Save Progress button. What if you want to force them to save their progress as they traverse through a very large, multi-page form?

Which brings me to shortcoming number two. Salesforce records are not created when a new form is started. However, they are created if the user saves their progress or submits a form. A multi-page form could have the power to leverage Salesforce’s Process Builder on the backend to prefill fields further along on the form if only a record was created immediately upon starting a form, or at least very close to the beginning.

I reached out to FormStack support to see if they had a solution to forcing the form to save upon clicking the Next or Back buttons. They suggested I submit it as a suggestion for future enhancements. So, as the title of this blog suggests, here is the hack.

Using the code that FormStack already provides to create a Save for Later button, we are going to just add in the two lines that are in bold:

var fs_SaveButtonClicked = false;

window.FF_OnAfterRender = function()
{
var savebtn = document.createElement("input");
savebtn.type = "button";
savebtn.className = "sectionHeader ff-btn-submit"; // set the CSS class
savebtn.id = "save_btn";
savebtn.value = "Save for Later";
fs('.btnDiv').prepend(savebtn);
fs("#save_btn").click(SetStateToSaveAndSubmit);
fs("#btnnext").click(SetStateToSaveAndSubmit);
fs("#btnprev").click(SetStateToSaveAndSubmit);
};

window.FF_OnAfterSave = function() {
var MESSAGE_ON_SAVE = "Your progress has been saved.";
var MESSAGE_ON_SUBMIT = "Thanks for submitting!";

if (fs_SaveButtonClicked) {
fs_SaveButtonClicked = false;
setTimeout(function() {
var dlg = document.getElementById('dialog');
dlg.innerText = MESSAGE_ON_SAVE;
}, 10);
} else {
setTimeout(function() {
var dlg = document.getElementById('dialog');
dlg.innerText = MESSAGE_ON_SUBMIT;
}, 10);
}
};

var SetStateToSaveAndSubmit = function(e) {
fs_SaveButtonClicked = true;
SubmitData(e);
};

Those two additional lines of code come from pulling the Id of the button type from the webpage that the form is on (bolded below) and replicating the JavaScript that tells the Save button to "SetStateToSaveAndSubmit":

<div class="btnDiv">
<input type="button" class="sectionHeader ff-btn-submit" id="save_btn" value="Save for Later" data-id="save_btn">
<input id="btnsubmit" class="sectionHeader ff-btn-submit" type="button" value="Submit" data-btnmessage="Thank you for your submission!" data-btnurl="" data-id="btnsubmit" style="display: none;">
<input id="btnprev" class="sectionHeader ff-btn-submit ff-btn-prev" type="button" value="Back" style="display: inline-block;" data-id="btnprev">
<input id="btnnext" class="sectionHeader ff-btn-submit ff-btn-next" type="button" value="Next" style="display: inline-block;" data-id="btnnext"></div>

A couple of considerations when implementing this:

1. Do this on a form with lengthy pages. If there are just a couple of fields per page and a lot of clicking forward and back, you will drive your user insane with the "Your progress has been saved" pop-up.

   1. Alternative: get rid of the pop-up by removing the MESSAGE_ON_SAVE part of the above code.

2. Because of the order in which functions are being processed, if there are any required fields on the next page the user will immediately receive a required field warning. I believe this is because the funtion to move forward is processed slightly before the funtion to save.

   1. Solution 1: have no required fields on your form

   2. Solution 2: leverage the Edit Rules section of the form to require fields when other conditions are met. For example, I created a checkbox at the end of the form that asks the user if the form is complete. It's called "Are you sure?" and if the response is "yes I am sure" and a field that I want to be required is blank, then that field suddenly becomes required and they are sent back to fill that out. If there are required fields on multiple pages then they are sent back to the first required field that they missed. Creating multiple rules can be a little painful if you have several required fields, but it's the price of a hacky yet seemless experience.

That is it. It's a pretty quick fix that allows you to both give the users a seemless expereince and create processes on the backend upon creation of a record in Salesforce.