Suggestions for Better Design of Email Form

Design help General
1

I’m in need of some very basic guidance on design. This is my very first website so be gentle!

I am having some issues with the size and spacing of the input field and submit button of my email form on my landing page. So that they sit next to each other I have both elements sitting in a div block, and then I floated the input field left and the submit button right.

On desktop I made the input field 60% width and the submit button auto width so it contains the full text.

On tablet it seemed to work better to have the input field at 50% and the submit button at a fixed width of 229px.

Then you can see I haven’t been able to make it work on mobile at all. In horizontal mode the elements are staggered and similarly in portrait mode they don’t sit either next to each other or one on top of the other (which might make more sense so that you can see all the text of both elements).

Am I going about this completely the wrong way? It feels like I am! I think I maybe haven’t understood something fundamental about how elements relate to each other and how to achieve clean and consistent positioning across different devices.

Help please!

https://preview.webflow.com/preview/gander?preview=66e94cacc751bf5160515b246db32406

2

The simplest method is to stack them.

Make the input field width 100% and the button width 100%, make both elements with no floating at all.

http://puu.sh/kQZKs/251a78d77b.png

Then on Mobile Portrait, change the submit button font to like 16px size and 18pix line height. Looks good then.

3

I’d probably use two individual divs or more likely a column inside a form block. So the structure would be container, form block and inside the form block either two columns or two divs depending on your needs. If divs give them each 50% width on desktop and then 100% at whatever breakpoint like @DragonDon mentioned.

For your design, I’d probably stick with a radius of around 2px instead of making them rounded. It would be a nice balance to the logo font and icon in the circle. Use an inner glow matching with a color a few shades darker than the color of the box so a dark pink and light grey. All just opinion though…

749×122 13 KB

4

Thank you both so much! This was incredibly helpful. I have played around with it, including changing rounding of the buttons and adding the inner glow, and it looks much better (I think!).