Rearrange fields in form block

Hey community,

is there a way to adjust the fields in the form block so that instead "First Name" and "Last Name" there is just one "Name" field and "E-mail address" field is moved up in place of the former "Last Name field." I find the default design really clunky.

In case that's of relevance: the form is in the footer.

Thank you!

Best,

Nikolas

You don't have to use the name field for names, a text field will work fine if you just want a single field for collecting names.

If you want to put the second field next to the first one taking up 50% of the width each, that can be done with CSS, it's been shared numerous times on the forum:

Thanks for the hint with the name!

The code by @tuanphan, though, seems to be adjusted to the particular form of that forum post. And that by @paul2009 doesn't work for me because it won't leave a space between the name and email field and seems to clash with my "Sign up for news and updates"  box ( see pic below) . Could someone help me adjust it accordingly?

Best,

Nikolas

10 minutes ago, Nikolas361 said:

Could someone help me adjust it accordingly?

Can you share your website URL, this page, and the code you've added so far?

This URL leads straight to the footer with the form:

https://www.bieleit-medicus.com/#block-63aca4fcf177ecc1ea38

The code I tried was Paul's:

.form-item.field.email, .form-item.field.text {
 display: inline-block;
 min-width: 48.8%;
}

.form-item.field.email {
 margin-right: 1.4%;
}

I can't see that taking effect, but you may want to make this tweak:

.form-item.field.email, .form-item.field.text {
 display: inline-block;
 min-width: 48.8%;
}

.form-item.field.text {
 margin-right: 1.2%;
}

Makes the unwanted gaps to the left of "Name" and right of "Email" disappear but it still does not create a padding between the two and the Email field is still not in line with the name.

Can you put this on a temporary page that I can see so I can help you adjust it? Hard to do without seeing it on a website.

I put it on my website now. Fine for me to edit on the live website for an hour

.form-item.field.email, .form-item.field.text {
 display: inline-block;
 min-width: 48.8%;
}

.form-item.field.text {
 margin-right: 1.2%;
}

also, if we could do for desktop only, that would be great! On mobile having the fields below each other words quite well.

A few changes:

@media only screen and (min-width:1000px) {
  .form-item.field.email, .form-item.field.text {
    display: inline-block;
    vertical-align: top;
    min-width: 48.8%;
  }
  .form-item.field.text {
    margin-right: 2.4% !important;
  }
}

1 minute ago, Nikolas361 said:

also, if we could do for desktop only, that would be great! On mobile having the fields below each other words quite well.

That's one of the additions I just posted.

Nearly got it! The Name field is slightly above now, as you can see on the website. And the margin between the two fields (name and email) and the message field seems quite large

thanks lots for your help by the way

Getting there! fields are in line, only the "Email" tag is slightly elevated and the gap between the upper two fields and the Message field is still quite large^^

Looks perfect to me:

the two fields are in line but for some reason, the "Email" title is slightly above the "Name" title. But if that has no easy fix, it's gonna be fine as it is 🙂

Thank you!

You can adjust this value up or down a few pixels to see if that helps your view.

margin-top: 13px !important;