Forums

Hi

I've only just started using chronoforms so i don't know if i'm missing something but I put my form into a module at the bottom of the page.

When i press submit the form changes to the thank you message which is fine, but it is at the bottom of the page and i have to scroll down.

the anchor i want to use is essentially

<a href="#contactus" data-uk-smooth-scroll="">Contact Us</a>

how do i use this in conjunction with the submit button to go to the bottom of the page where the form was once submitted?

http://cwav.salesxchange.co.uk is my site, its on the home page

I've seen another post which is directed to an FAQ but i have no idea how to adapt that code

Hi nigelmaine,

Please see this FAQ

Bob

Hi

Thanks for your quick reply.

However, as mentioned at the bottom of my post i dont know how to modify the code its only the two second lines that determine when the scroll needs to be actioned (i'm guessing) but i've never dealt with js before so i don't know what to change it to.

What would i replace those two lines with?

Thank you for your help

Hi nigelmaine,

Which two lines are you referring to? The version at the end of the FAQ from OzNeilAu will probably work best for you.

Bob

Well i understand the red i think, but i dont understand the blue

window.addEvent('domready', function() {


//////  var error = $$('#recaptcha_container_div div.error-message')[0];
//////  if ( error.get('html') !== '' ) {



    $('chonoform_contact_us').scrollIntoView();
  }
});

Also where do i put this? in the "other" tab under js/css?


(sorry i didnt know the colour doesnt work in code)

Hi Nigelmaine,

This line looks for an element with the id 'recaptcha_container_div'; then looks for any divs with the class 'error-message' inside that; then picks the first one (usually there will only be one):

$$('#recaptcha_container_div div.error-message')[0]

This line checks to see if there is an error message inside the selected div:

if ( error.get('html') !== '' ) {

If there is, then this line would scroll to focus to the error message:

error.scrollIntoView()

But the last solution uses this line

$('chonoform_contact_us').scrollIntoView();

which will scroll the page to the element with the id 'chonoform_contact_us' where contact_us is the name of the form in that case. This is the id that ChronoForms gives to the <form> tag.

Bob

Ah right ok😀

So, if i'm not basing the scroll on the event of an error message and just want it to action when the form submits, what do i replace those two lines with? do I need those two lines at all?

Thanks for your help!

Hi Nigelmaine,

Please try it with just this in a Load JS action in the On Submit event. Not tested but I think it should work OK.

window.addEvent('domready', function() {
   $('chonoform_form_name').scrollIntoView();
});

NB: Replace form_name with the name of your form.

Bob

Ok i will try this out and let you know!

I used the easy wizard, i'm going to have to use the normal one now i'm guessing?

Thank you again!

Hi Nigelmaine,

That's probably the best way to go, you can do it from the Easy Wizard but the code gets more complex :-(

Please see this FAQ

Bob

Well i've put the code in but nothing has changed, the page doesn't scroll down the email sends and the thank you displays but once the page reloads it doesn't scroll down.

Could it be because the form disappears and changes to the thank you page so i need to give the thankyou page an ID then tell the JS to look for that ID?

Hi nigelmaine,

Yes, could well be. Add something like this to the Thank You page code:

<div id='chonoform_form_name' > . . . </div>

The id needs to match the JavaScript.

Bob

Still no change, i dont think the js is running at all after form is submitted.

both the IDs are the same.

Should i make the js a dynamic file?

I've just followed the FAQ about the thank you message that i completely missed (sorry about that)but nothing is different to what i am doing at the moment, still no scroll down after the form is submitted and the page reloads

I'm not sure if this is an issue but i'm using "Modules Anywhere" to display my form because when i try to just use the module manager chronoform and put it in a module it doesnt load, but when i am calling it from modules anywhere it works.

having it within that won't effect it right?

Hi nigelmaine,

Please post a link to the form so I can take a quick look.

Bob

http://cwav.salesxchange.co.uk/

Its on the home page at the bottom

what isn't happening for the js to not load?

Hi nigelmaine,

Your site isn't loading the MooTools library as a default. The code needs to load the library or to be re-written in jQuery (or at least so it doesn't use MooTools).

Bob

So is that some more custom code i need to put into the "On Load" section of my form? or is it do do with joomla?

What code will i need to use?

Thanks for your help, especially at this time of night

Hi nigelmaine,

According to the Joomla! docs this code will load MooTools (both core and more) in Joomla! 3

<?php
JHtml::_('behavior.framework', true);
?>

Bob

BRILLIANT! Thank you!

Where abouts would that go? in joomla or in the chronoforms custom code on load section?

Hi nigelmaine,

This will be enough for ChronoForms:

in the chronoforms custom code on load section

Bob

Ok, i've added the custom code section and inserted that code.

Still no change though, any ideas? could there be a conflict somewhere or is it not running mootools still?

I don't know how to check otherwise I would see for myself.

Thank you for your help

Hi nigelmaine,

You can use your browser Web Developer tools (click F12 in most browser) to see what is being loaded. In this case you can look at the page header on the HTML tab or check files on the Source tab (warning, your browser may differ).

Bob