Form layout problem with images

Good morning all,

I am appealing to you for help on a layout of a contact page.

I’m trying to replicate the template below:

But I find myself facing several problems.

  • The fields don’t line up perfectly because of the images, and I don’t know how to fix that.
  • The first image at the top right is displayed incorrectly when I try to adjust its size.
    -The responsive is catastrophic, and likewise I can’t fix it.

I put the link of the site below. It’s possible that the configuration is catastrophic, I struggled so much that with fatigue and a lot of tweaking it’s a big mess.

Thank you in advance, your help will surely help me avoid tearing the little hair I have left.

PS: Sorry for my english, i’m french :))


Here is my site Read-Only: link

The last thing you want to do when someone is trying to fill out a form is to distract them. How does this design help the user achieve that goal? Short answer; It doesn’t. No matter how you approach this on different breakpoints, you are going to be dealing with issues. Yes, plain forms are boring but users know how to fill them out. So I recommend you abandon this path. At least that’s my honest opinion after 20+ years of UX. Just don’t take what I am saying personally. It’s not meant as a criticism, just a reality check for you.

1 Like

Hello,

Thank you for your honest response!

Unfortunately, I completely agree with you, but this template is not mine and I am supposed to reproduce it identically.

Believe me, nothing would relieve me more than making a distraction-free form, but I can’t :frowning:

Do you still think that this is impossible, and that I will still have problems, at the technical level?

No. I would just create a structure that looks like Bootstrap’s media object for desktops. https://getbootstrap.com/docs/5.1/utilities/flex/#media-object

How you approach responsiveness is up to you. I don’t see grid as a fit so I would stick with flexbox if I was building it.