Captcha doesn't appear at the bottom or end of the form

Hi,

My website runs the Storefront template on Joomla version 3.7.2.
I'm using Joomla core Contact Form, and Captcha - ReCaptcha plugin.

Here's my website, the Captcha isn't showing at the right place: it appears just below the email field instead of at the end of the form (before the Send button).
http://mediagenesis.com.sg/trek3c/deale ... -singapore

I'm wondering if this has to do with the components override in the template area (I've made certain adjustments to the Contact override as I wanted the custom fields to appear on the left column and not below the Message textbox).
Both the Telephone and Country / City fields are newly created custom fields.

How do I move the Captcha plugin to the end of my form?

Thank you.

Hi

It's most likely because of those changes. Comparing it with my copy, captcha is in right place.

Try add script to move elements around:

Code: Select all

<script type="text/javascript">(function($) {$(document).ready(function() {
$('#contact-form dl:nth-child(3) dd:nth-child(4)').after( $('#contact-form dl:nth-child(2) dd:nth-child(9)') );
});})(jQuery)</script>


You can copy it to /layout/blocks/head.php

Hi Teitbite,

Thanks for your reply, I pasted the code you gave in /layouts/blocks/head.php file as suggested.

Unfortunately, the Captcha remains in the same place.

Hi

Please send me an access to ftp to my email: [email protected] so I'll try to make it for You.

Hi Teitbite,

I've emailed you the ftp access to my website as requested.
Do indicate to me what changes you made, so that I don’t accidentally override them.

Thank you again.

Hi

DONE. I've used this script instead:

Code: Select all

<script type="text/javascript">(function($) {$(document).ready(function() {
var item = 1;
$('#contact-form dl > dt, #contact-form dl > dd').each(function(){
    $(this).addClass('item'+item);
    item++;
});

$('#contact-form .item17').before( $('#contact-form .item5, #contact-form .item6') );
});})(jQuery)</script>


and this css in override.css:

Code: Select all

#contact-form .item5 {
    clear: both;
}


Thank you so much, Teitbite.

You are brilliant, as always.

Hi

Thank You It's just the fastest to do I could have think of. Glad it worked. Closing this thread now.