Custom CSS for the File Upload field

  • realtouchimaging
    Asked on September 15, 2017 at 6:36 AM

    Hi,

     

    I would like to inject custom CSS to my File Upload Form and have it look and operate like this link.

    I have linked my dropbox to the file upload for delivery of files and this feature is fantastic. Its now just the look i want to change ;-)

    I will be using my form on squarespace. 

    Thank you in advance

     

  • Jan
    Replied on September 15, 2017 at 10:39 AM

    I suggest you use the Drag and Drop Upload widget. This widget allows the form user to drag a file from any location on his or her computer, and then drop it on the form.

    In the Widget Settings, you can insert a CSS code in the Custom CSS tab.

    Custom CSS for the File Upload field Image 1 Screenshot 20

    Here's a guide on How-to-Add-a-Widget-to-your-Form.

    If you do not want this widget, then you can still use the regular file upload field. Here's a guide on How-to-Inject-Custom-CSS-Codes.

    Hope that helps. Thank you.

  • realtouchimaging
    Replied on September 15, 2017 at 11:07 AM

    Thank you Jan, very helpful.

    Im not to sure how to copy the code for it to work correctly. Is this something you can do for me within my account? 

  • Jan
    Replied on September 15, 2017 at 12:41 PM

    May I verify if you are going to use the regular File Upload field or the Drag and Drop Upload widget?

    This is how they looks like in the Live mode:

    Custom CSS for the File Upload field Image 1 Screenshot 20

    Please try to check them first in your form. We can assist you in changing the font color, background color, positioning and alignment using custom CSS.

    We will wait for your response. Thank you.

     

  • Realtouchimaging
    Replied on September 16, 2017 at 2:58 AM

    Im using the regular file upload because I need my uploads to be user friendly on mobile devices so drag and drop isn't my main concern. I want the ability to have both options. 

    I currently have the regular file upload emended and working well within my workflow and back end linked to drop box is very, very convenient. 

    My next steps is to further enhance the users experience UI and design. 

    I will look into some further changes such as font colour etc as noted above and get back to you very shortly. 

    Once again, thank you for the prompt assistance. I will be in touch shortly. I am wanting this live within the next few days. 

    Thank you Jan