Aligning Form Input boxes and button next to each other

Site URL: https://www.locallocalfoods.com/

Hello! 

I'm trying to align the form fields next to each other and also make the "first name + last name" boxes into one "name" box. See attached mockup photo for reference. Any help or code input would be greatly appreciated. Thanks!

Password: LLF

1 hour ago, megan05 said:

Site URL: https://www.locallocalfoods.com/

Hello! 

I'm trying to align the form fields next to each other and also make the "first name + last name" boxes into one "name" box. See attached mockup photo for reference. Any help or code input would be greatly appreciated. Thanks!

 

Password: LLF

Instead of using the Name form field you can use a Text field and apply a placeholder value of name

you can use below code with the first name and last name inputs.

 

@media (min-width: 768px) {
  [data-form-id="60df7f0994f5130f65de1b70"] {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    .field-list {
      display: flex !important;

      fieldset {
        display: flex !important;
        justify-content: space-between !important;
        margin: 0 2% 0 0 !important;
        flex-basis: 46% !important;
        .field {
          float: none !important;
          margin-left: 0 !important;
        }
      }
    }
    .form-button-wrapper {
      margin-left: 2% !important;
      input {
        margin-top: -3vw !important;
      }
    }
  }
}
 

Thank you! exactly what I was looking for. Much appreciated!

Hello! My site http://rebeccaholt.co - on my footer I've added a form for people to put in their phone number but cannot seem to center those form fields. Is there CSS I can get to center the phone number form fields? Thanks! @tuanphan

On 3/3/2022 at 12:19 AM, RebeccaHoltdotco said:

Hello! My site http://rebeccaholt.co - on my footer I've added a form for people to put in their phone number but cannot seem to center those form fields. Is there CSS I can get to center the phone number form fields? Thanks! @tuanphan

Add this to Design > Custom CSS

/* center phone */
div#page-section-60f9b4747ed19c3548e4ce5f {
.form-wrapper .field-list .fields {
    display: flex;
    justify-content: center;
}
legend.title {
    width: 100%;
    text-align: center;
    margin-left: 0 !important;
}}

Hi!  This code didn't work for me 😞. Basically I just want the field list NEXT to the submit button...hoping you can assist!  Also I don't know how to locate the form ID...only the block ID?  Didn't seem to work

site: www.breakpointbranding.com/shop-1

PW: ChickenNuggets

Thanks!!

15 hours ago, DevonHarris said:

Hi!  This code didn't work for me 😞. Basically I just want the field list NEXT to the submit button...hoping you can assist!  Also I don't know how to locate the form ID...only the block ID?  Didn't seem to work

site: www.breakpointbranding.com/shop-1

PW: ChickenNuggets

Thanks!!

You mean this?

@tuanphan Looking for something similar but having a hard time finding the right code. I had them lined up but then one day POOF ... they were misaligned again!

https://decagon-caribou-s63f.squarespace.com/

PW; blackpanther

On 5/3/2023 at 4:19 AM, AJeans said:

@tuanphan Looking for something similar but having a hard time finding the right code. I had them lined up but then one day POOF ... they were misaligned again!

https://decagon-caribou-s63f.squarespace.com/

PW; blackpanther

 

 

Add to Design > Custom CSS

div#block-yui_3_17_2_1_1682367382850_43463 label {
    display: none;
}

Thank you!!

@tuanphan any idea why my placeholder text isn't appearing? It should say "EMAIL ADDRESS" in the input area.

On 5/5/2023 at 12:52 AM, AJeans said:

@tuanphan any idea why my placeholder text isn't appearing? It should say "EMAIL ADDRESS" in the input area.

Settings > Circle Labs > Enable this option

@tuanphan I am not a circle member and I won't qualify I suppose. I only manage 2 websites at this point. Is there anything else I can do?

On 8/10/2023 at 1:57 AM, LeoEchero said:

@tuanphan I am not a circle member and I won't qualify I suppose. I only manage 2 websites at this point. Is there anything else I can do?

You can add me as a contributor, I can do this for you. Or you can ask a Circle Member do it for you