Form broken when in page with a Map

  • I have multiple contact form on my site, 6 on product pages for enquiries about the product that work perfectly, and 1 on a contact page for just general stuff.

    All the forms are identically built, save for a line in the email that tells you which page it was from.

    The 6 on the product pages work perfectly.

    The 1 on the contact page is broken, but only when a Map is present. Removing the map element fixes the issue, but any sort of map, as an element or shortcode from the multiple plugins I have tired causes an issue.

    The issue isn’t huge, but when typing in the first three fields of the form (Name, email, subject) the field does not show anything until you click away from it. You can still type in them, but you can’t see what you have typed while you are selected on it.

    It’s not site breaking, but it doesn’t look very good. I really don’t want to sacrifice the map, and I’d rather not use a more complex contact form plugin.

    Any help is greatly appreciated.

    https://www.ads-software.com/plugins/contact-form-7/

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter Andyevoo

    (@andyevoo)

    Further testing:

    In Safari, it seems to work fine.

    In Chrome, it only seems to break while the map is at it’s full width. Making the window smaller so the map shrinks makes it all work fine.

    Lowering the width of the map doesn’t help, until it is shrinked manually with window size.

    Although making the map a tiny width, and then making the window smaller helps, even when the map isnt manually shrinked because it already so small. (Which confuses me to no end ><)

    Raising the width of the map doesn’t help, it just make the page look silly.

    Please include a link to your Contact Form 7 form where you are having problems so we can examine your form in detail.

    Thread Starter Andyevoo

    (@andyevoo)

    Woops, can’t believe I forgot to post a link.

    https://www.t4csecuresolutions.co.uk/contact/

    Again, thanks for any advice you can give!

    Form works prefectly in Firefox but not in Chrome.

    Problem could be due to CSS styling – use Firebug or Chrome Dev Tools to examine the HTML and CSS of your CF7 form in detail.
    ?
    However?? I expect the issue is due to a JavaScript conflict with your Google Map plugin – see Contact Form 7 Email Issues – there is a link there that covers JavaScript Conflicts.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Form broken when in page with a Map’ is closed to new replies.

Tags