function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
WminWmin 

How to deal with long Community Portal forms?

Our Community Portal form has around 130 fields; some of those are required, some have validation. 

It takes at least thirty minutes to fill in the form, and unless all validation is passed and the required fields are completed, the form can't be saved. Because of the length, it can be challenging to track missed fields or bad input and can lead to form abandonment or loss of information due to browser crash other factors.

Unfortunately, the form has to be so long for compliance reasons; all information is stored in a single custom object. 

Is there a way to break down this form into multiple pages yet keeping everything in a single object, or give users an opportunity to save without instant validation until the form is ready for submission?

What is the best way to deal with this problem?
Ramesh DRamesh D
Hi Wmin,
You can divide your form into sections and then display them using Next/Back button on the same form 
Here is the example i've made three different section on the same form and display them once they complete the form using next/back button 

Component:  
<aura:component description="Contacts"
                implements="force:appHostable"
                access="global"> 
    <aura:attribute name="Prevtab" type="string" default="" />
    <aura:attribute name="Currenttab" type="string" default="Tab1" />
    <aura:attribute name="Nexttab" type="string" default="Tab2" />
    //Show Tab1 by default
    <div aura:id="Tab1">
        <div class="slds-form-element">
            <div class="slds-form-element__control">
                <lightning:input label="First Name"
                                 aura:id="user-details"
                                 name="first-name"
                                 required="true"
                                 value="{!v.userDetails.FirstName}" />
            </div>
        </div>
        <div class="slds-form-element">
            <div class="slds-form-element__control">
                <lightning:input label="Middle Name"
                                 name="middle-name"
                                 aura:id="user-details"
                                 value="{!v.userDetails.MiddleName}" />
            </div>
        </div>
    </div>
     //Show Tab2 once tab1 filled by clicking next
    <div aura:id="Tab2" class="Tab">
        <div class="slds-form-element">
            <div class="slds-form-element__control">
                <lightning:input label="Country"
                                 aura:id="user-details"
                                 name="Country"
                                 required="true"
                                 value="{!v.userDetails.country}" />
            </div>
        </div>
        <div class="slds-form-element">
            <div class="slds-form-element__control">
                <lightning:input label="PhoneNumber"
                                 name="PhoneNumber"
                                 aura:id="user-details"
                                 value="{!v.userDetails.PhoneNumber}" />
            </div>
        </div>
    </div>

     //Show Tab3 once tab1/Tab2 filled by clicking next
    <div aura:id="Tab3" class="Tab">
        <div class="slds-form-element">
            <div class="slds-form-element__control">
                <lightning:input label="Address"
                                 aura:id="user-details"
                                 name="address"
                                 required="true"
                                 value="{!v.userDetails.address}" />
            </div>
        </div>
        <div class="slds-form-element">
            <div class="slds-form-element__control">
                <lightning:input label="comments"
                                 name="comments"
                                 aura:id="user-details"
                                 value="{!v.userDetails.comments}" />
            </div>
        </div>
    </div>
    <div aura:id="card-footer" class="slds-card__footer card-dock-footer">
        <lightning:button class="h-btn h-btn-primary slds-m-left--small"
                          label="Back"
                          onclick="{!c.goback}"
                          variant="brand"
                          disabled="{!if(v.Prevtab=='',true,false)}"
                          aura:id="savePersonal" />
        <aura:if isTrue="{!v.Currenttab=='Tab3'}">
            <lightning:button class="h-btn h-btn-primary slds-m-left--small"
                              label="Save"
                              onclick="{!c.saveData}"
                              variant="brand"
                              aura:id="savePersonal" />
            <aura:set attribute="else">
                <lightning:button class="h-btn h-btn-primary slds-m-left--small"
                                  label="Next"
                                  onclick="{!c.moveNext}"
                                  variant="brand"
                                  aura:id="savePersonal" />
            </aura:set>
            
        </aura:if>
    </div>
</aura:component>

 JS Controller: 
({
    moveNext : function(component, event, helper) {
        var currentTab=component.get('v.Currenttab');
        if(currentTab=='Tab1')
        {
            var cmpTarget1 = component.find('Tab1'); 
            var cmpTarget2 = component.find('Tab2');
            $A.util.addClass(cmpTarget1, 'Tab');
            $A.util.removeClass(cmpTarget2, 'Tab');
            component.set('v.Currenttab','Tab2');
            component.set('v.Prevtab','Tab1');
            component.set('v.Nexttab','Tab3');
        }
        else if(currentTab=='Tab2')
        {
            var cmpTarget1 = component.find('Tab2'); 
            var cmpTarget2 = component.find('Tab3');
            $A.util.addClass(cmpTarget1, 'Tab');
            $A.util.removeClass(cmpTarget2, 'Tab');
            component.set('v.Currenttab','Tab3');
            component.set('v.Prevtab','Tab2');
            component.set('v.Nexttab','');
        }
    },
    goback: function(component, event, helper) {
        var prevTab=component.get('v.Prevtab');
        var currentTab=component.get('v.Currenttab');
        if(prevTab=='Tab1')
        {
            var cmpTarget1 = component.find('Tab1'); 
            var cmpTarget2 = component.find(currentTab);
            $A.util.addClass(cmpTarget2, 'Tab');
            $A.util.removeClass(cmpTarget1, 'Tab');
            component.set('v.Currenttab','Tab1');
            component.set('v.Prevtab','');
            component.set('v.Nexttab','Tab2');
        }
        else if(prevTab=='Tab2')
        {
            var cmpTarget1 = component.find('Tab2'); 
            var cmpTarget2 = component.find(currentTab);
            $A.util.addClass(cmpTarget2, 'Tab');
            $A.util.removeClass(cmpTarget1, 'Tab');
            component.set('v.Currenttab','Tab2');
            component.set('v.Prevtab','Tab1');
            component.set('v.Nexttab','Tab3');
        }
    },
    saveData: function(component, event, helper) {
        //do your save logic
    }
})
Style: 
.THIS.Tab{
    display:none;
}
Output:
User-added image
User-added image
User-added image

I hope you find the above solution helpful. If it does mark as best answer to help others too.
Thanks,
Ramesh D