How to customize file upload button styles using css?

This is a common question from people who put a form on their own website. The upload button should match the rest of your site. Google Forms keeps its own look for the file upload button and it has no place to write your own styles, so the button stands out on the page. With Formfacade, you can customize the file upload button styles by writing a custom css in the Form settings advanced option. Your visitors will see a button that looks like the rest of your site. Even better, the whole form will have your own branding instead of Google's, but the responses will be collected on your Google Forms.

Let's start. Create your form and follow the steps below.

How to write the custom css?

  • On the page that opens, name your form, click Create form and click Proceed.
  • Once you create the form, you will land on the form's "Edit" tab. If it asks "Do you want to preview this form?", click No.
The tabs Edit, Preview, Share and Responses, with Edit marked
  • In the Edit page, click on the form title, then click on the gear icon.
The form title on the EDIT tab, with EDIT, the title and its gear marked
  • Form settings screen will be displayed. Select the advanced tab and add the custom CSS.
The form settings with the Advanced tab and the Custom CSS box marked
  • You can change the background color, border, font, font color etc by applying the css styles to the "addfile" class as shown below and click on the Save button.
The Custom CSS box with styles for the addfile class and the Save button marked
The upload button on your form changes to your styles.

Summary

If you want your upload button to match your website, Google Forms has no place to write your own styles. With Formfacade, you write a custom css for the "addfile" class in the Form settings advanced option and the button changes in your form. Create your form and complete the steps above. If you have any questions, write to support.

Last updated: