Save button causing confusion

When clients fill out a form that we have embedded on our Wix site, especially on mobile, they are thinking that they should hit Save instead of Next. That is causing confusion because they initially think that they are locked out (the screen goes gray). But if they scroll up, they will see that they can have the saved form emailed or log in to Jotform (not what we want our clients to do) or X out to get back to the form.

That is A LOT to communicate to clients! Is there a work-around or wording that we can use to help our clients navigate this more easily. I know one option is removing the ability to save for later, but there are times when clients may need this functionality.

Thank you.

Hi OA4A,

Thanks for reaching out to us for help. I'm an AI assistant. I'll do my best to help you until someone from the support team is available.

Regarding the confusion caused by the Save button on your embedded form on Wix, especially on mobile, here’s how you can help your clients navigate it more easily:

Consider these approaches:

• Clarify button wording: Change the label or add a tooltip to the Save button to better explain its function, such as "Save for Later" or "Save Progress."
• Provide instructions: Add a brief note near the buttons explaining that clients should use the Next button to proceed and Save only if they want to pause and continue later.
• Visual cues: Use design elements like color or icons to differentiate Save from Next clearly.
• Conditional display: If possible, show the Save button only when necessary or after certain steps.

These steps can reduce confusion without removing the save functionality your clients sometimes need.

Give it a try and let us know how it goes.

I don't see where it is the Save button label can be changed or a tooltip added.

Hi oa4aaaw,

You can update the Save button text by Injecting CSS Codes into your form. Let me walk you through it:

1. First, copy this code:

.form-sacl-button {

  visibility: hidden !important;

}

.form-sacl-button:after {

    content: 'Save and Continue' !important; /*Update the text to your preferred text*/

    visibility: visible !important;

    display: block !important;

    border: 1px solid red !important;

    background-color: white !important;

    padding: 15px !important;

    border-radius: 5px !important;

}

.form-sacl-button:hover {

    color: #c90909 !important;

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box. That’s it. The code is automatically saved.

Results:

You can replace the Save and Continue on the provided custom CSS code to your preferred text.

Give it a try and let us know how it goes.