inline Newsletter Form

Thank You very much Sir, for your reply. I really appreciate.

Now, concerning my request, I also contacted you through your Chatbot and dropped the same question there.

Someone responded to me with this CSS that works:

form#evf-form-3347 {
    display: block;

    width: 60%;

    margin: 0 auto;

}


form#evf-form-3347 .evf-field-container,

.evf-submit-container {

    display: inline-block;

    width: 50%;

}


form#evf-form-3347 button#evf-submit-3347 {

    width: 100%;

    background: #1282f6;

    color: #fff;

    border-radius: 8px;

}


input#evf-3347-field_VB2yYaRYg7-1 {
    height: 45px;

    border-radius: 8px;

}


form#evf-form-3347 label.evf-field-label {

    display: none;

}


@media screen and (max-width: 768px) {

    form#evf-form-3347 {

        width: 100%;

        margin: 0 auto;

    }

}

Like I said, the code works, but it feels rigid and not fluid.

Here is the Page where I have the Form — Everest Newsletter – Dorlbee Group

THE ISSUES

a.) I need the “Submit” button to be auto width in this inline arrangement, so that the “Submit” button only takes up the width of its content, while the Email field takes up the whole width of the container that holds them both.

OR
There should be flex 3 and flex 1 — where Email field takes 75% width and Submit button takes up 25% width.

This flex 3 and flex 1 should also ensure that there is no gap, so that the fields (Email and Submit button) reach end to end of the screen as full width.

b.) On Mobile, the fields (Email and Submit button) should be vertically stacked, each taking up 100% width.

This is necessary because the current code feels cramped on Mobile view.

c.) For my Contact Form, I want to have a First Name and Last Name field which are inline (arranged side by side ) on the same one line.

Is this an in-built feature of Everest Forms ?

OR

Do I still need Custom CSS for this to happen ?

I do hope you understand everything I am talking about ?

Needing to hear from you soon.

Regards.

Thanks for the replies.

Now, I have been able to get the Form to be as I want, as You can see here — https://prnt.sc/zInPomxUnO8Y

The only thing is that I don’t like the process that got me there: after receiving your first CSS code, and understanding your class naming, I also used the Inspect Tool of Chrome browser to inspect the Forms’ HTML and CSS.

All those knowledge put together, sent me to DeepSeek AI, and with tinkering here and tinkering there, I was able to get the Form to look the way I want.

Now, I feel that you can make the process easier for us, without CSS: You see, in all my WordPress life, I have always used Forminator Form for all my Form needs.

It is this inline requirement that sent me looking for something else, because this inline requirement is not yet possible in Forminator Form.

It is possible in Fluent Form without Code, but I need image upload and that is in Fluent Form Pro — which I don’t have the budget for.

Nonetheless, I learnt a lesson from Fluent Form, which I believe you can implement in Everest Form and it will make this inline feature possible without code:

You see, Fluent Form has this Field called “Custom Submit Button” and when you add it to your Form, the default submit button disappears.

So I believe you should do the same thing: have a “Custom Submit Button” which we can drag into any column we like.

And when we have dragged it into any column we like, there should be a feature that says “disable default submit button” and if checked, the “default submit button” is removed from the Form, while the “Custom Submit Button” still performs the function of “submit“.

In that way without code, we can have our inline Form with Submit button without too much CSS hassle.

Needing to hear from you soon.

Regards.