Save for Later in Experience Cloud Forms – Formstack

Save for Later is a useful feature for end-users when being asked to fill out lengthy forms that may require multiple interactions, such as student applications, grant applications, health intake forms, legal intake forms and financial services onboarding. Forms for Salesforce offers different configuration options as described in this article.

Native Plans

To enable Save For Later, simply open the 'Form Settings' of your Experience Cloud Form(Formerly known as Community Form) in the form editor.

save for later1.png

Next, you will scroll until you see the 'Save for Later' checkbox. You will check this box if you would like to allow your users the option to 'Save for Later'. This will also present you with the option of customizing the text of the save and discard buttons that will be available in your form.

When filling out your experience cloud form with 'Save For Later' enabled, your users can click 'Save' at any time to save their progress.

When accessing the form, the saved progress will automatically be displayed to your experience cloud user.

Note: Save for Later is not available for unauthenticated users. An error message will be displayed to the user when clicking on the save button.

To monitor your saved submissions, you can browse to your Forms for Salesforce Submission Dashboard and click on the “Saved Submissions” tab.

This gives you the ability to view these partial submissions insights and get an understanding of where users are stopping in the process.

Note: The Saved Submissions dashboard will display all saved submissions, including those from non-experience cloud forms. The partial submission insights are available for all new saved submissions.

Pro

Experience Cloud Forms in our Pro edition do not yet support built-in Save-for-Later functionality. If you are approaching a new project with “Save for Later” requirements, we recommend our 100% Native Plans due to the no-code configuration. Check out this article for more information on moving a Native plan.

However, we can collect partially completed submissions by saving data in Salesforce and using prefill functionality. Follow the steps below and review the video to learn how this can be accomplished.

🔺The best way to use this guide is to read through it first and plan how your form will be prefilled before implementation. Code snippets are provided throughout and can be pieced together for what is needed.

Video Walk-through

Here is a video walk-through using a combination of the methods described in this article.

1. Create a Experience Cloud Form

Review the article here on creating a Experience Cloud Form.

2. Setup Prefill on your Experience Cloud Form

There are a few ways to prefill your form.

Prefill based on Logged-in user
Prefill from a Record List or Record Detail page
Specify prefill criteria

💡You can choose to prefill fields from 1 or more objects on your form. A good example is if you want to show or allow update of existing data like user details but allow for submission of new records for other data (like a support case).

3. Populate Required Fields or Fields with Validation Rules

This method relies on submitting records into Salesforce so we have to make sure the underlying records can be successfully created. Salesforce fields can be marked as required or have validation rules configured. We have to make sure that the form has valid data in these fields when a partial submission is saved.

The data you use to populate these fields will depend on your use case but it should be considered intermediate or invalid by your business processes.

There are a few ways to populate these fields.

Specify default values in field settings.
Use rules to set the value of these fields conditionally based on other field values.
Use URL parameters to prefill these fields on form load.
Write JavaScript to set these field values prior to submission.

4. Add a “Save” button

We need to add a button that end-users can click to temporarily save their progress. This button will submit the form and calls the same submission endpoint. This button is added in the JavaScript editor in the form settings.

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);

};

 

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);

};

5. Add conditions to prevent prefill of your form or remove access to it

Since we are using prefill as the mechanism to show partially saved forms, we would need to prevent prefill when there is no partially completed submission available. This is done slightly differently depending on which prefill mechanism you are using.

First: A Helper field: Use a “Completed” status field

While not absolutely necessary, it helps to have a way to identify which records are partially completed submissions. We need a field to hold the status of the submission. In some of the methods explained below, we will rely on this field to tell us if the submission is still in progress or if it is completed and should not be considered a partial submission. The easiest way to do this is to add a checkbox field to your primary object called “completed” that is not checked by default. For more complex use cases involving workflows you can use a drop-down that includes all the stages of your process.

You should add this “completed” checkbox to your form as a hidden editable field if it is going to be set during submission (most common). If you plan to set it using a flow after submission then it does not need to be on the form.

How we use the “completed” status field depends on how the form is being prefilled. The goal is to prefill the form if there is a partial submission in progress and to not prefill the form if there isn’t - so that a blank form is loaded and a new submission/partial submission can be created.

Prefill Methods:

Prefill using criteria
If the form is prefilled using criteria in-app then we would simply add the “completed” checkbox into the criteria to make sure it is false. This means that we will not prefill a form with data from a record that has “completed” set to true. A blank form will be loaded.
Prefill from a Record List or Record Detail page
This prefill method relies on a user clicking on a record from a list of records. The Lightning Record List uses a List View and the criteria of this list view is what is important for us. There are 2 ways to go about this.

If you decided to use the “completed” status field:
- If we want to show a list of incomplete submissions then we will want to make sure the underlying List View criteria includes only records that have “completed” set to false.
- If we want to include only completed submissions then we will want to make sure the underlying List View criteria includes only records that have “completed” set to true.

This image shows the use of a completed checkbox to find the record from which to prefill the form.

If you decided not to use a “completed” status field or there are other criteria for what records should be available for the user to click and complete then make sure to include any other criteria that is relevant for your use case.
Prefill based on Logged-in user
There are 2 ways to prefill the form based on logged-in user. You can prefill a Contact or User object on your form by identifying that contact as the logged in user. This prefill method is available out-of-the box in the app. The second method is to use prefill criteria to identify a contact/user lookup field on any object as the logged-in user. Under the hood, the first method is just a short-cut to doing the second method that we added as a convenience. The most common lookup field identified as such is the standard owner field on any object.

The idea here is that since we are prefilling the form based on one of the fields being set to the logged-in user, then we want to change what that field is post submission.

If the user/contact field is a field on the form then you can
- use conditional rules on the form to set it to someone else.
- use process builder to change the owner or other user field on the record to someone else.
- use JavaScript after submission to change the owner or other user field.

This image uses a combination of completed checkbox as well as the logged-in user being the owner of the record to use for prefill.

This image shows the Logged-in User prefill method being used to find the Contact record of the logged-in user. It is most commonly used for profile updates or forms that contain profile fields.

6. Set the completed state on submit

Depending on how you chose to identify partially completed submissions, you will want to make sure the state is set when the submit button is clicked.

As a reminder here are the methods to do this:

Use conditional rules on the form to set form field values to indicate that the submission is completed. One option is to use a "completed" helper field, and use Rules to set the field to true when certain conditions are met..
Use JavaScript on submit to set fields or “completed” checkbox to true.
You can use the JavaScript snippet in the next section to set the “completed” field once the submit button is clicked.
Use process builder to validate submission contents and set fields we depend on to prevent prefill. The field can be the “submitted” checkbox, the owner field, or any other combination of fields. You can also send out emails or create other records using this method so it is preferred for complex workflows.

7. Update submit message vs. Redirect to a different page.

The last thing we do is change the submission message to differentiate it from partial saves.

function  FF_OnAfterSave()

{   

    //Retrieve the helper field from the page

    var helperField = document.getElementById('Contact.Completed__c');

    //Check if the helper field has been checked, indicating that the form is completed

    var formCompleted = helperField.checked;

 

    if(formCompleted == true){

        //Show a "Completed" message

        setTimeout(function() {

            var dlg = document.getElementById('dialog');

            dlg.innerText = "Thanks for submitting!";

        }, 10);

    }

    else{

        //Show a "Saved" message

        setTimeout(function() {

            var dlg = document.getElementById('dialog');

            dlg.innerText = "Your progress has been saved.";

        }, 10);

    }

}

We can also redirect to a different page after submission. By default we redirect to a blank form if prefill is not possible.

function  FF_OnAfterSave()

{   

    //Retrieve the helper field from the page

    var helperField = document.getElementById('Contact.Completed__c');

    //Check if the helper field has been checked, indicating that the form is completed

    var formCompleted = helperField.checked;

 

    if(formCompleted == true){     

        //Redirect to "form completed" page

        window.location = "URL ON FORM COMPLETE"

    }

    else{

        //Redirect to "form saved" page

        window.location = "URL FOR FORM SAVING"

    }

}