How to Fix - recaptcha?

[mirrixx]

Hi,

I have a Contact form set to three sizes: Mobile, Main and Wide.

The Main size Contact form works perfectly, however, the other two do not.

The site has been running for a few years with me just adding updates when required BUT not touching the Contact form page!

I have forgotten how I set this up in the first place (it is an age thing!! ) and do not know how to fix the other two page sizes.

I have tried copying the exact same contents to the other pages (including the Web Properties - HTML code (body)), but does not work.

Link is below, any advice would be appreciated thanks.

https://www.ulsterwoodturning.co.uk/contact.htm

Best Regards,

Mark

[Initiostar]

Hi,

I have a Contact form set to three sizes: Mobile, Main and Wide.

The Main size Contact form works perfectly, however, the other two do not.

The site has been running for a few years with me just adding updates when required BUT not touching the Contact form page!

I have forgotten how I set this up in the first place (it is an age thing!! ) and do not know how to fix the other two page sizes.

I have tried copying the exact same contents to the other pages (including the Web Properties - HTML code (body)), but does not work.

Link is below, any advice would be appreciated thanks.

https://www.ulsterwoodturning.co.uk/contact.htm

Best Regards,

Mark

This can be a common issue for all forms where there is a single ID for a form. Your form appears correct in the Tablet variant, but not in the mobile or desktop variants.

A while back Acorn created a workaround where one can have the same form appear and function across multiple variants: this is an example using Jotform, but the principles are the same: https://initiostar.co.uk/demo/formtest/

The link to this subject on TG is here: https://www.talkgraphics.com/showthr...ot-Solved-quot.

You may have found another workaround using different copies of the contact form (i.e. each with a different ID), but I have not checked that.

Not related, but you might want to consider using Scale-to-fit-Width to better transition between screen sizes.

[mirrixx]

Not related, but you might want to consider using Scale-to-fit-Width to better transition between screen sizes.

Many thanks for the quick reply, I will check it out and post back

Didn't know about the "transition" option...I do the web site as no one else can!!!...will check that out as well.

Many thanks,

Mark

[mirrixx]

Ok...fixed the easy part...now have the 'transition' between page sizes working (thanks to Initiostar)...didn't know about that.

The hard part of getting the recaptcha to work across all page sizes is not so easy (had a look at the link...didn't fully understand)

Perhaps someday there will be a 'wizard' that will do this?

Regards,

Mark

[Initiostar]

The hard part of getting the recaptcha to work across all page sizes is not so easy (had a look at the link...didn't fully understand)

I had assumed the contact form and its 'recpatcha' were inserted into your contact page using an iframe? In the example provided here: https://initiostar.co.uk/demo/formtest/, follow Step 1 and copy your iframe code into just one variant and delete it from the other variants. For ease, I would pick the wide/desktop variant.

Follow Step 2 to establish the mid-point width between each of your 3 variants and add the code to your site as shown. Follow Step 3, adding a placeholder on the mobile and tablet variants as shown in the example. You might have to rejig the placeholder size in the mobile and tablet variants to display the form correctly.

The principle here is that the code checks which variant is being viewed and displays the same single ID copy in each of the variants.


This is the XAR file for the demo which may help your explore what is needed > Jot Forms_Multiple Variants.xar

[mirrixx]

Ok, I have 'discovered' how I created the Contact Form...I used a template from XBuilder, from Michal Jarmoluk. So I tried to copy and paste from original to the other two page sixes, but it did not work. :-| I know it can work because I have another test site working perfectly, here:
https://customwoodcraft.uk/contact.htm 😊

I have tried to contact him but email address is returning (including from his website).


If anyone could advise that would be great! 👍

Many thanks,

Mark

[Acorn]

Mark in your working site, the Catchpas have different IDs:

<img src="index_htm_files/captcha.php?0.368664474837497" id="captcha"><br>
<a href="#" onclick="CapRefresh ();" id="change-image">Not readable? Change text.</a><br><br>
<input class="contact-input" type="text" name="captcha" id="captcha-form" autocomplete="off"><br>

versus

<img src="index_htm_files/captcha.php?0.368664474837497" id="captcha-m"><br>
<a href="#contact_form" onclick="CapRefresh ();" id="change-image">Not readable? Change text.</a><br><br>
<input class="contact-input" type="text" name="captcha" id="captcha-form-m" autocomplete="off"><br>

One of the form's wrappers has an additional ID - id="Xxr_v6_contact_form"

Do note if you input in one and switch to the other, the input disappears.

Acorn

[mirrixx]

Hi Acorn,
Many thanks for the reply. :-)

So if I replicate the code above into the other two non-working pages it will work? Can't try this at the moment I am preparing for hols - will def try at end of month :-)

Best Regards,

Mark

[Acorn]

Hi Acorn,
Many thanks for the reply. :-)
So if I replicate the code above into the other two non-working pages it will work? Can't try this at the moment I am preparing for hols - will def try at end of month :-)
Best Regards, Mark

Not having access to your design and thought processes, I genuinely cannot say.

Enjoy your hols.

Acorn