How to Customize the Save Button in FormAssembly

Updated: Jun 9

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!

90 views0 comments