FormAssembly allows users to Save and Resume a previous form by checking a box in the form settings. However, the feature is not user friendly and the styling is basic. To save the form, a user must click a Save checkbox at the top-right of the form, which then displays a Resume Later section. This section is not defaulted to being visible.
We wanted to get rid of the checkbox and just default the Resume Later section on. We also didn't want the Resume Later section at the top of the page, but at the bottom. Finally, we wanted to get rid of the form borders and make the styling better for Save/Resume components to the page. None of this is out of the box.
This took a while to get, as the debug tools on FormAssembly are lacking. The code below can be copied and pasted directly into the Custom Code section under Builder/Properties tab to get the desired affect.
<style type="text/css">
html .wForm form .wfCurrentPage {
padding-top:20px;
}
.wFormWebPage {
background-color: white !important;
}
.wFormContainer .wForm{
display:block;
padding:0;
border-radius:0em;
background-color:white !important;
-webkit-box-shadow:0px 0px 0px 0 rgba(0, 0, 0, 0);
box-shadow:0px 0px 0px 0 rgba(0, 0, 0, 0)
}
</style>
<script type="text/javascript">
setTimeout(function () {
var form = document.querySelector('.wForm');
var formElement = form.querySelector('form');
var totalPages = document.querySelectorAll('.wfPage').length
var lastPage = document.querySelector('.wfCurrentPage').id === 'wfPgIndex-' + totalPages
// Remove top section
formElement.firstElementChild.style.display = 'none';
// Remove bottom links
formElement.lastElementChild.style.display = 'none';
// Add class to stylize and move resume form
formElement.querySelector('.offstate').classList.add('resume-form');
var resumeForm = document.querySelector('.resume-form');
formElement.appendChild(resumeForm);
// Allow form to be saved
document.getElementById('tfa_saveForLater').click()
document.addEventListener('click', function (event) {
// If the clicked element doesn't have the right selector, bail
if (!event.target.matches('.wfPageNextButton')) return;
// If the element ID is the last page, disable the save for later field.
if (event.target.id === 'wfPageNextId' + totalPages) {
// Turn off Save so that Submit can happen
document.getElementById('tfa_saveForLater').click()
}
}, false);
}, 200);
</script>
To get started with Cloud Pacific, go here to complete a simple form. A Cloud Pacific Account Manager will collaborate with you to clarify your needs and goals, and customize a service package and roadmap that will help your business grow and thrive on Salesforce. Reach out to us here!