Form Success/Error Messages Display Offscreen of a Long Form

thebountifulboard

Greetings,

I've been working with JA Joomla Page Builder for awhile and it has been a great tool well worth the money. Thanks for creating such a useful product.

I have a specific issue with the form that I'm trying to fix and have found a temporary work around, but would like to understand where this is set.

Specifically, after submitting a form that is somewhat long, I'd like to display the "success" or "error" messages close to the submit button so that the users can see that the submit was successful. We've had several complaints that no message is received.

Instead, since the success message is at the top of the form (which is off screen), the user doesn't see the unhiding of the div section.

The work-around that I've found is to change the jabuilder_pages database and copy the <div class="alert alert-success jub-form-success"> and similar message to just above the </form> tag in the "content" portion of the table and then modify the entry. The problem is (as expected), every time I update the page, the content gets overwritten and I have to do the work around again.

Instead, can you point me to the template, view, html, etc code which contains the formatting of the table where I can simply change the layout of the form in general so that the model will save the new location of the alert boxes to the database "correctly"?

I can, of course, copy the site, debug it with netbeans and figure out where this is done, but I've not done that in awhile and it would be helpful to update the form so that it is a bit more user friendly without going into full blown debug mode.

There's likely a "form" template override or something similar that I can quickly modify the location of the alert box and solve the problem a bit more permanently.

Thanks again for the help and thanks for creating and supporting such a great tool.
Devon

saguaros

Hi Devon,

May I know which form are you using so I can check?

thebountifulboard

Sorry for the delay. The form is on the main page www.thebountifulboard.com. It's the only form.

Alternately you can find the html by inspecting elements and looking for "<jub-form"

Keep in mind that I've updated the page and modified the html to show two jub-form-success (and error, and warning, etc.) so you won't be able to see the problem.

What you will notice is that after you submit the form, the original box on the top of the form is shown and the new alert near the "submit" button is shown. Normally, the box at the bottom is not shown.

You can duplicate this on your own by creating a JA Joomla Page Builder Form with sufficient input elements (say 10-15) where you cannot see the top of the form and then hit submit. You'll notice that it doesn't appear that the form did anything, until you scroll up to the top of the form and you can see the alert box.

This UI paradigm is not very efficient because the user is not really alerted, unless they happen to scroll up in the page. A pop up would be "best", however the alert box unhidden by the submit action is reasonablly sufficient. It should however be in a place that the end user sees it immediately or is re-directed to a success page.

saguaros

thebountifulboard I got your point and will forward to development team for further checking.

thebountifulboard

Thanks. Really what im looking for is the file which determines the layout (template) of that form component. Usually that's part of a view in classic MVC architecture, but this tool is obviously more dynamic. The team need not update everything for everyone (although they may prefer to). I'm comfortable modifying it, especially if that can happen in a template override, but ok with a core hack as well to get the job done.

Thanks for the help,
Devon

saguaros

Hi Devon,

I will let you know when having update from the team.

Regards

saguaros

Hi Devon,

Pls try with this solution to show the messages just under the submit button:

<script>
jQuery(document).ready(function($){
 if($('.jub-element-form').find('.alert').length){
		$('.jub-element-form').find('.alert').insertAfter($('.jub-form-action'));
	}
});
</script>

Edit a page >> Custom code >> add above script:

thebountifulboard

Thanks Saguaros,

That worked like a charm. It effectively moved the notification from the top of the form to the bottom which is perfect. The user can now see the form was successfully submitted. That's a slick idea, thanks to you and the development team for finding that (and with a way that doesn't need a core hack).

In my testing of the form, the "please confirm you're not a robot" alert successfully displayed as well as the success message.

Also, in my testing of the form, I tested the checkbox required input and while the phone number field "required" input worked correctly, the checkbox list "required" did not. The form allowed me to submit the from without at least one checkbox selected.

Generally this is minor, because we can contact our customers to see what they wanted, but in the spirit of bug reporting and improving the product, I wanted to mention this.

Thanks,
Devon

saguaros

Hi Devon,

I can replicate the same issue and already reported to the dev team to get it fixed.

Thanks for your report.

Regards