Tip 26: How to hide the "Submit" button from a form

Tip 26: How to hide the "Submit" button from a form

Hi everyone,

Hope you're staying safe and working from home. We are, too. By now, we at Zoho are all very much accustomed to the new normal—working remotely.

Today, we're back with yet another simple but interesting tip--how to hide the Submit button from your forms. In certain scenarios, you may want to hide the submit button from a form until all the fields are filled in. 

Use case
In this tip, we'll show you how to hide the Submit button while the user is entering data into the form, and then show it On User Input of any field of the form. For example, you can hide the Submit button and have it appear only when all the data required has been input.

Application flow
  1. Create an Employee Contact form, where employees enter their details.
  2. Hide the Submit button until all the fields are filled.
  3. Show the Submit button On User Input of the decision box field at the bottom of the form.
Step 1: Create the Employee Contact form, with all the required fields.
  • Add notes field
  • Name (Single Line field)
  • Email (Email field)
  • DOB (Date field)
  • Contact number (Phone field)
  • Address (Address field)
  • Terms and Conditions (Decision Box field)


Step 2: Add the script below to the On Load event of the form to hide the Submit button as soon as the form loads. 


  1. input.Add_notes _field = "<style>input.zc-live-primary-btn { display: none;}</style>";


Note: Please refer to the screenshots below to configure the workflow.












As you can see in the screenshot below, the Submit button is hidden once the user accesses the form.



Step 3: Show the Submit button on the form, after the user fills in the "Terms and Conditions" field.

Once the user checks the Terms and Conditions (Decision Box field), you can display the Submit button. To achieve this, you need to configure a workflow On User Input of the Terms and Conditions field. Please refer to the screenshots below to configure it.

  1. input.Add_notes _field = "<style>input.zc-live-primary-btn { } </style>";









As you can see, once the user has checked the decision box, the Submit button is displayed.



That wasn't so hard, was it? You should give it a try! If you run into any difficulties with the process, please comment below and we'll be happy to assist you.

Note: The above-suggested workaround only works in the new live UI of Zoho Creator. If you'd like to achieve the same result with the old live UI, please refer to this link.





                            Zoho Desk Resources

                            • Desk Community Learning Series


                            • Digest


                            • Functions


                            • Meetups


                            • Kbase


                            • Resources


                            • Glossary


                            • Desk Marketplace


                            • MVP Corner


                            • Word of the Day



                                Zoho Marketing Automation


                                        Manage your brands on social media



                                              Zoho TeamInbox Resources

                                                Zoho DataPrep Resources



                                                  Zoho CRM Plus Resources

                                                    Zoho Books Resources


                                                      Zoho Subscriptions Resources

                                                        Zoho Projects Resources


                                                          Zoho Sprints Resources


                                                            Qntrl Resources


                                                              Zoho Creator Resources


                                                                Zoho WorkDrive Resources



                                                                  Zoho Campaigns Resources

                                                                    Zoho CRM Resources

                                                                    • CRM Community Learning Series

                                                                      CRM Community Learning Series


                                                                    • Tips

                                                                      Tips

                                                                    • Functions

                                                                      Functions

                                                                    • Meetups

                                                                      Meetups

                                                                    • Kbase

                                                                      Kbase

                                                                    • Resources

                                                                      Resources

                                                                    • Digest

                                                                      Digest

                                                                    • CRM Marketplace

                                                                      CRM Marketplace

                                                                    • MVP Corner

                                                                      MVP Corner

                                                                    





                                                                    




                                                                        Design. Discuss. Deliver.

                                                                        Create visually engaging stories with Zoho Show.

                                                                        Get Started Now