0

I'm a website designer completely lost on why my contact form 7 forms are not displaying at all in wordpress:

https://ahaproperties.com/wp/summerhill-woods-apartments/summerhill-woods-contact-us/

I've tried forcing IE 7 compatibility mode (which I learned from another post) by placing this in the head: ''

But then IE gave me this error: Unable to get property 'prototype' of undefined or null reference.

I can see the form in the source code...but what is the solution to make it display in the browser? Everything looks fine in all other browsers. Thanks in advance.

Curious
  • 1
  • 7
  • Just checked your site using IE11 (on Windows 10) and I can see a Contact form there. – cabrerahector May 16 '18 at 18:31
  • I think you might have been looking at a wordpress default theme - both the client and myself are still seeing just a blank after clearing cache and history :( Does the page you see look like this? https://ahaproperties.com/wp/wp-content/uploads/2018/05/Capture.jpg – Curious May 16 '18 at 18:40
  • It does appear to be an issue, as IE 11 shots are 2nd, 3rd and last here: https://ahaproperties.com/wp/wp-content/uploads/2018/05/browser_shots.jpg – Curious May 16 '18 at 18:52
  • In my first post, I used the wrong 'tick' - sorry about that - This is what I tried to put in header.php. `` Sorry about that. It didn't work unfortunately - I think I need a super hero ;) – Curious May 16 '18 at 19:01
  • Check my answer below, I tested it on IE 11 and it fixed the issue for me :) – cabrerahector May 16 '18 at 19:07

2 Answers2

0

In the stylesheet named g1-screen.css, line 378, you have this:

/* ----->>> FORMS <<<--------------------------------------------------------------------------- */
fieldset { display: table-column; min-width: inherit; }

Internet Explorer 11 doesn't support display: table-column (nor do IE 10, IE 9 or IE 8 according to this answer).

Change that to:

/* ----->>> FORMS <<<--------------------------------------------------------------------------- */
fieldset { display: table-cell; min-width: inherit; }

or:

/* ----->>> FORMS <<<--------------------------------------------------------------------------- */
fieldset { display: block; min-width: inherit; }

and it'll work.

Alternatively, you can also add the following CSS snippet to your theme's stylesheet to change only how CF7's fieldsets are displayed:

.wpcf7-form fieldset {
    display: table-cell;
}
cabrerahector
  • 3,653
  • 4
  • 16
  • 27
  • OMG I owe you a fruit basket if this works. Checking now! – Curious May 16 '18 at 19:21
  • Bless you - I have success :) I went for the last solution to avoid theme update overwrites. I don't suppose you have a magic snippet to make the checkboxes/radio buttons sit on the baseline, do you? They are hanging too high for some reason. – Curious May 16 '18 at 19:32
  • I'm restarting my laptop now (damn Windows updates...) so I can't have a look at the moment. And you should open a new question for that, too :P Please accept this answer and I'll go have a look at the new one as soon as I can. – cabrerahector May 16 '18 at 19:35
  • 1
    Pls Disregard my checkbox question as I found the proper css for this on another post - Thanks so much again. I will inform the theme developer of your finding. – Curious May 16 '18 at 19:40
0

The below worked immediately. I put this under "Customize" and "Additional CSS" in Wordpress:

...you can also add the following CSS snippet to your theme's stylesheet to change only how CF7's fieldsets are displayed:

.wpcf7-form fieldset {
display: table-cell;
}
Curious
  • 1
  • 7