How to customize and display file upload button for a Contact Form 7 plugin using CSS and jQuery
https://www.zyxware.com/sites/default/files/styles/user_image/public/default_images/index.png?itok=2YmREnrP
BY thomas.john
5 years ago
Technical-Solution
4 comments comment

While working on a wordpress site I came across a problem to customize the file upload button in Contact Form 7 plugin. I tried a few tweaks using CSS to customize the button but no luck. Later I found a trick using CSS and jQuery which is explained below. In my previous article "How to display location of an user in a mail send using Contact Form 7 plugin by passing the IP address in a Wordpress Site?", I have explained about Contact Form 7 plugin.

Problems I faced using file upload buttons are not able to customize the design as required and for different browsers file upload button is displaying differently. So what I did is, generated a File Upload Button, Textfield and a Button for the contact form. In-order to get this goto path 'wp-admin/admin.php?page=wpcf7'. Here in Form section on right side you could see a dropdown menu named "Generate Tag". In this select required fields.

1. File Upload

When you select a file upload, following code will be generated place this in your form


 [file file-265]

Here I have added an ID, Class, What type of files to be uploaded and Size


 [file file-265 id:fileuploadfield class:fileuploadfield limit:120000 filetypes:.doc 1/]

Add the following code in File Attachments in mail part so that uploaded file will be attached along with the mail.


 [file-672]

2. Text Field

Now generate a text field and add an ID and class for it.


 [text uploadtextfield id:uploadtextfield class:uploadtextfield]

3. Button

Enter the following code to display a button.


 <input type="button" id="uploadbrowsebutton" value="Browse">

Its better to give this in a div, for feasibility.


  <div class="uploadfieldtrick">
    Upload Resume:
    [file file-265 id:fileuploadfield class:fileuploadfield limit:120000 filetypes:.doc 1/]
    [text uploadtextfield id:uploadtextfield class:uploadtextfield]
    <input type="button" id="uploadbrowsebutton" value="Browse">
  </div>

Now using css I have hidden the fileupload button and customized the text field and button as per requirement. See the code below.



#sideUpload #fileuploadfield {
    display:none;
}

#sideUpload #uploadtextfield {
  height:18px;
  width:139px;
}

#sideUpload #uploadbrowsebutton {
  height:27px;
  width:147px;
  margin-top:5px;
  text-align:center;
}

See the two images below, which shows how the file upload button looked before and after

UploadBefore.png

UploadAfter.png

Now to get the functionality of the file upload button for the text field and button, i.e, when the fields are clicked they should perform as file upload button. In-order to implement this functionality we used jQuery.



(function($) {
  /*Brought click function of fileupload button when text field is clicked*/
	$("#uploadtextfield").click(function() {
		$('#fileuploadfield').click()
	});

  /*Brought click function of fileupload button when browse button is clicked*/
	$("#uploadbrowsebutton").click(function() {
		$('#fileuploadfield').click()
	});

  /*To bring the selected file value in text field*/	
	$('#fileuploadfield').change(function() {
    $('#uploadtextfield').val($(this).val());
  });

})(jQuery);

In jQuery "To bring the selected file value in text field", here in file upload button when we select a file there is a change in id for the button, in that changed id only the selected file details are stored. So to get the corresponding details we used the following code.



  /*To bring the selected file value in text field*/	
	$('#fileuploadfield').change(function() {
    $('#uploadtextfield').val($(this).val());
  });

Hope you find this article help full. Contact Us via comment box below regarding any doubts and sugggestions regarding this article.


RELATED ARTICLE

/themes/custom/zyxpro_light/images/placeholder.png
close

on 04th April 2007 / by webmaster
Linux is the epitome of the FLOSS model. Technical Solution Linux installation Leave a reply Your email address will not be published. Required fields are marked * Dewey J. Corl (not verified) access_time 27 Sep 2020 - 04:05 Linux is not ready for the general public! (I am a Ubuntu user). For proof, 1. try to simply print labels on a Dymo label printer. It takes a LOT of work to get to the ease of label printing already available in Windows and Mac. 2. try syncing a modern Palm based PDA. Yes, jpilot and others will sync the main data, but pictures and midi files do not get transferred without a lot of extra setup. These are examples of applications that are not ready for the general public. Since an operating system only supports applications, Linux is not ready to be a common desktop for the general public. While we are waiting for the applications to catch up, keep up the good work!! Anoop John (not verified) access_time 27 Sep 2020 - 04:05 Dewey Yes you may be right. But these are not applications that a common man would use. A common man would use one of these applications - Internet browser, Chat Client, Email Client, Document Writer, Presentation Creator, Spreadsheet Editor, Movie Viewer, Music Player, CD/DVD Writer. Both examples you cited are more specific applications that only a small percentage of the whole population uses. It will take time before those hardware vendors identify the need from their perspective to address the Linux community. Krishnadas (not verified) access_time 27 Sep 2020 - 04:05 Dear Mr Anoop, Thank you very much for the free installation of LINUX done in my PC. I am getting immersed in the LINUX and seeing the versatility. To my surprise, I am able to read one of my old backup CD(wherein lot of my valuable file exist) done in DIRECT CD wizard (a custom cd writing software of Easy Cd creator in WIN98) which could not be read in XP. Installation of old version of easycd creator/direct cd program was not possible in XP. I thought that possible i lost all data. Very pleasant start! Srikanth N. S. (not verified) access_time 27 Sep 2020 - 04:05 Hi Anoop, My friend is thrilled with Ubuntu. One of his grouses with windows was that after OS installation, everything else is to be installed separately which is a real headache. WHereas if u install Linux, everything is installed as a package and he is thrilled to bits! Let linux installation spread in Trivandrum and your service in this direction is highly appreciated. Kepp up the good work Regards. PDA Freak (not verified) access_time 27 Sep 2020 - 04:05 Is it possible to install linux on a packardbell notebook ? Add new comment
Leave a reply
Your email address will not be published. Required fields are marked *

Filtered HTML

  • Web page addresses and email addresses turn into links automatically.
  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type='1 A I'> <li> <dl> <dt> <dd> <h2 id='jump-*'> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
The content of this field is kept private and will not be shown publicly.
CAPTCHA This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.

author-image
Nicole (not verified)
access_time 27 Sep 2020 - 06:10

thanks for your article.
I was searching for something like this. But I couldnt get the jquery functionality running. I copied the code snippets into a js file. And enqued this file
wp_enqueue_script( 'diverse-miniscripte', get_bloginfo( 'stylesheet_directory' ) . '/js/diverses.js' , array( 'jquery' ), '1.0.0');
the html code shows:

I see the the jquery like this

but nothing happens, when I am clicking the beautyfull button. What am I doing wrong?


author-image
Francesco (not verified)
access_time 27 Sep 2020 - 06:10

Thanks, very helpful!


author-image
jack (not verified)
access_time 27 Sep 2020 - 06:10

Hi,

Your code is working fine in all browsers except Safari .
Can you give me any suggestion regarding this .

Thanks
Jack


author-image
Mario (not verified)
access_time 27 Sep 2020 - 06:10

I know this article is kind of old but

fixed by using:

jQuery(document).ready(function($){ ....

and using:

input#fileuploadfield {
display: none;
}