Personalizar o widget de visualização de upload de imagem em um estilo de avatar de perfil usando código CSS personalizado e configure um preenchim

Hi Filipe,

Thanks for reaching out to Jotform Support. Unfortunately, our Portuguese Support agents are busy helping other Jotform users at the moment. I'll try to help you in English using Google Translate, but you can reply in whichever language you feel comfortable using. Or, if you'd rather have support in Portuguese, let us know and we can have them do that. But, keep in mind that you'd have to wait until they're available again.

As for your question, I’ll need a bit of time to look into it. I’ll get back to you as soon as I can.

Hi Filipe,

You can use the Image Upload Preview widget on your form and use a custom CSS code on Custom CSS field on the Image Upload Preview widget to customize it into a profile avatar style. You can clone my demo form, or you can do it on your end. Let me show you how to do it:

1. Copy the custom CSS code below:

/*To customize the Image Upload Preview widget into a profile avatar style*/

.buttonContainer {

    min-height: 2.3in !important;

    width: 2.3in !important;

}

#preview {

    border-radius: 50% !important;

}

/*Ends here*/



2. In Form Builder, click on Add Element on the upper-left part of the screen.

3. Click on the Widgets tab next to the Payments tab.
4. Type Image Upload Preview on Search field.
5. Drag and drop the Image Upload Preview widget to your form.

6. Type Upload Your Profile Avatar on the Image Upload Preview widget.
7. Click on the Wand icon on the Image Upload Preview widget.

8. Type Upload Profile Photo on Button Select Text field.

9. Click on the Custom CSS tab next to the General tab.
10. Paste the custom CSS code on Custom CSS field.
11. Click on Update Widget on the lower-right part of the screen.

12. Click on the Gear icon on the Image Upload Preview widget.

13. Click on the Advanced tab next to the General tab.
14. Toggle ON the Shrink field.

That's it. Also, you can use the Date Picker element on your form and set its default date settings to current. Let me show you how to do it:

1. In Form Builder, click on Add Element on the upper-left part of the screen.

2. Drag and drop the Date Picker element to your form.

3. Click on the Gear icon on Date Picker field.

4. Click on the Options tab next to the General tab.
5. Click on Current option on Default Date field.

That's it. Give it a try and let us know if you have any other questions.

Obrigado por sua ajuda.

Usei a primeira opção, funcionou corretamente.

Hi Filipe,

I’ll need a bit of time to look into this. I’ll get back to you as soon as I can.

Hi Filipe,

As for your other question or concern, to avoid confusion, I've moved and answered that in a new thread. You can check that out here.

Let us know if there’s anything else we can help you with.