Forums

Form Builder - anchor link to form on error?

Permalink 1 user found helpful
Hello

Is it possible to create an anchor redirect to a Form Builder form when an error occurs?

I have a contact form at the bottom of a long page of content. But I noticed, if there is a data entry error, that the page reloads with the focus at the top of page, rather at the bottom where the form and thus error message is.

Is there a way to make the form jump to the bottom of the page where the form is with an anchor? I noticed there is a #00000 number in the URL, but it refers to a hidden variable and not a form ID.

Because of how this works, I think people are thinking they have submitted a question and not received a response (a few people have called to follow up on enquiries we have not received).

Meanwhile, I will try to add some JS validation to keep the page from submitting...

Thanks in advance!
- Mal
webporter
 
jordanlev replied on at Permalink Reply
jordanlev
Try using the ajax_form template:
https://github.com/jordanlev/c5_ajax_form...

(or if you're on an older version of C5, use the free "Ajax Form" addon in the marketplace --http://www.concrete5.org/marketplace/addons/ajax-form... ).

Edit the /blocks/form/view.php file, find the section that starts with "//This js code happens after form is rejected due to validation errors...", and add in some javascript that scrolls to the proper place there.
Responsive replied on at Permalink Reply
Responsive
In the view.php on the standard form i used the following which seems to work, although am not sure if correct practice. 

<?php   if( $_GET['surveySuccess'] && $_GET['qsid']==intval($survey->questionSetId) ){ ?>
      <div id="msg"><?php  echo $survey->thankyouMsg ?></div> 
         <script type="text/javascript">
            $('html, body').animate({ scrollTop: 2300 }, 'slow');
            </script>
   <?php   }elseif(strlen($formResponse)){ ?>
      <div id="msg">
         <script type="text/javascript">
            $('html, body').animate({ scrollTop: 2300 }, 'slow');
            </script>
         <?php  echo $formResponse ?>
         <?php  
         if(is_array($errors) && count($errors)) foreach($errors as $error){
            echo '<div class="error">'.$error.'</div>';
         } ?>
Viewing 15 lines of 16 lines. View entire code block.
malkau replied on at Permalink Best Answer Reply
malkau
I did this recently in my own form...

You can add a DIV around your FORM and set the ID to the value of "qsID" (this is the same ID as the #anchor you get after form submit)

So, on submit, the form should auto jump down to where your form is.

e.g.
<div id="<?php  echo $qsID; ?>">
<form ...>
</form>
</div>


UPDATE: Sorry, I should clarify that this code needs to go within a custom template for the form block. I always start with the "Form Tableless Layout" addon's custom template then tweak to match my template.
AlfonsoSanchez replied on at Permalink Reply
I like it! it's simple and elegant. Unfortunately it does not work for me. Are you sure this is the way you did it?
malkau replied on at Permalink Reply 1 Attachment
malkau
I actually put the ID on a fieldset I had within the form, but thought a DIV would work too.

I've attach my code for you to check out. It's based on the "Form Tableless Layout" add-on's custom template with a few extra bits added to make it work with Bootstrap Framework.

You should be able to drop the unzipped file straight into this folder on your site and test it out:
/public_html/blocks/form/templates

Then on your form block, click on it, go to custom templates and choose "Bootstrap Form"

The styles will all be different for your site, of course, but the anchor link part should work ;)