Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

GeneratePress GenerateBlocks

Newsletter Form Layout

  • broto
    April 22, 2023 at 10:03 am

    Hello. I was wondering if you can help me with my newsletter sign up layout. The form consists of an email entry box and then the submit button. The two elements are currently stacked vertically on top of each other. I’d like the have the button horizontally aligned instead, basically side-by-side.

    Thank you for your help!

  • David
    April 23, 2023 at 2:02 am

    Hi there,

    try this CSS:

    .wpforms-container .wpforms-form {
    display: flex;
    align-items: flex-start;
    max-width: 600px;
    margin: auto;
}
.wpforms-container .wpforms-field-container {
    flex: 1;
}
.wpforms-container  .wpforms-form .wpforms-field,
.wpforms-container  .wpforms-form .wpforms-submit-container {
    --wpforms-button-size-margin-top: 0;
    margin: 0;
    padding: 0;
}

    Note – the max-width: 600px; can be adjusted to increase the width of the form

  • broto
    April 23, 2023 at 8:56 am

    Thanks, that worked well.

    One more quick, related follow-up: The button is a slightly different height from the form box. Can you point me to the correct CSS element to add a slight bit of padding to the button?

    I appreciate your help!

  • David
    April 23, 2023 at 11:36 am

    Try this CSS:

    div.wpforms-container-full button[type="submit"] {
    --wpforms-button-size-height: 43px;
 
}
  • broto
    April 23, 2023 at 1:39 pm

    Looks great. I appreciate your help!

  • David
    April 24, 2023 at 1:35 am

    You’re welcome

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.