• Hello –

    I am having the same problem on two websites I recently launched for a nightmare client.

    The problem is that the upload button on the two sites’ forms has become hidden. The site is hosted on wpengine.com and when I was testing these sites I was having no problem. Then I deployed them and added Yoast at the request of my client and now the upload buttons are hidden. It’s the weirdest thing.

    Here are the pages in question.
    http://www.luciensmanor.com/employment-application/
    http://www.waterfallbanquets.com/application/
    (on the waterfall page you can actually see it load for a second then hide)

    At the bottom of the form you can see where the text says please upload your resume, under it is where the upload file button should be.
    If you inspect the element you’ll see a div tag that wraps around these fields and sets the height and width to 0px and the overflow to hidden. I cannot find how to remove or alter this style and since I’m inserting ‘contact form 7’s’ shortcode directly into the form and I have no control over this.

    Has anybody ever experienced this?
    Is there a way to strip out that excessive div tag from contact form 7?

    This is the very last step to washing my hands of two projects from the same client that have been nothing but a nightmare… it is almost comical at this point… almost.
    Can someone help me?

    https://wordpress.org/plugins/contact-form-7/

Viewing 8 replies - 1 through 8 (of 8 total)
  • You’re experiencing a style issue that’s causing it to be hidden. Both of the <div> tags have styling reducing the height and width to 0 and the visibility set to hidden (e.g. style="height: 0px; width: 0px; overflow: hidden;"). Remove that and you should be in business.

    Thread Starter drewpanckeri

    (@drewpanckeri)

    That’s what I’m confused about, I don’t know where to remove that from. I’m just putting the shortcode in CF7’s dialog box ( [file resume id:resume] ) and that div is being generated from somewhere I cannot locate.

    I even tried using the html code instead of the shortcode and the div is still generated around the field :
    <input type="file" name="resume" value="1" size="40" class="wpcf7-form-control wpcf7-file" aria-invalid="false">

    Any ideas?

    I don’t find that div tag to be inherent to CF7. Have you tried disabling other plugins and reverting to a default theme?

    Thread Starter drewpanckeri

    (@drewpanckeri)

    No I haven’t since the two sites were just approved and launched.
    I don’t want to have to backtrack and create more work.

    Is there a source file I could find that handles converting the shortcode to html? I’m a little inexperienced with jquery but it’s worth a shot. I figure it’s not a straight css style, since it’s inserting code around my upload button. I’ve tried hacking some css styles to put the input box absolute or to set the overflow to visible, but that unknown div tag around it is just hiding everything.

    Also, does the instance that is on http://www.waterfallbanquets.com/application/ give any clues? It looks as though it loads up fine and then is hidden, but for the life of me I cannot think of what would have loaded after the initial page load.

    The both are just having the bad/undesired style data attached.

    Instead of disabling everything, you could try just replacing the “file.php” CF7 file. It’s located in the Modules folder of the CF7 plugin. It’s what sets the HTML tag for the upload shortcode.

    Part of the issue we’re having is that whatever is being added is (by your assesment) happening on the server end, as additional and unrequest element data is being added. I doubt it’s in the ‘file.php’ but it’s a quick step. Just download the latest CF7 version from the wordpress.org site. Then, disable CF7 briefly while you use FTP or your hosting File Manager app to replace the ‘file.php’ on your server. Reactivate CF7 and see if it resolved the issue. If you get everything ready prior to deactivating, you can have CF7 downtime of about 30 seconds.

    BTW, we’re working with completely up-to-date WP and plugins, right?

    P.S. Sorry you’re having to deal with a nightmare client!

    Thread Starter drewpanckeri

    (@drewpanckeri)

    CF7 is up to date.

    I am copying the site to the staging server and I’m going to start disabling other plug-ins and see if that clears up the problem. There was a point when it was working so I may as well give it a shot. Thanks for your help, I’ll do some tests over the next day or two and come back when I’ve got it licked or need more help.

    Kylee, thank you for being generous with your time and brain power, it is appreciated.

    You’re welcome. =)

    I’ll try to keep an eye out for a response over the next couple days too. Good luck!

    Thread Starter drewpanckeri

    (@drewpanckeri)

    For posterity purposes : This issue has been hacked out of existence. Maybe not resolved, but for the purposes of having it functional it has been.

    I found out it was in the bootstrap core that was applying the hidden div around the upload button. I deactivated all plugins and when that didn’t fix it I changed themes, and then it worked again. So I troubleshooted the bootstrap core for a while with no luck, then decided to do a work around.

    I went with this custom coded upload button from here. The difference in the line for the upload allowed it to not have the applied style. I then fixed the fakepath goofiness with this. Last step was to put an instance of the hidden upload button in the form with the same name attribute so that the shortcode sending from Contact Form 7 would work.

    So there it is, resolved to the best of my ability.

    Thanks Kylee for the help.

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Upload Button Hidden’ is closed to new replies.