Display Single Line Optin Form With MailChimp

Hi there,

where on the front page do you want it displayed?

I am trying right now at a simple test page - https://www.friedcoffee.com/test/ If talking about the front page, it's just after the header.
I exactly need something like that - https://joshhall.co/how-to-create-a-sleek-mailchimp-signup-in-divi/.
Tried this code but their are some overlapping problems showing up.

Try this

1. Create a new Hook Element:
https://docs.generatepress.com/article/hooks-element-overview/

1.1 Add this HTML to the hook with your Mailchimp script inside it:

<div class="mailchimp-container">
<!-- Optional add your Title or other text here -->
<!-- Add your mailchimp script here -->
</div>

1.2 Select the after_header hook
1.3 Set your Display Rules

2. Add this CSS to your Site:

.mailchimp-container {
    background-color: #ccc; /* Add background color here */
    padding: 80px; /* Space around form */
    display: flex;
}

.mc4wp-form-fields {
    display: flex;

}

.mailchimp-container .mc4wp-form {
    margin-left: auto;
    margin-right: auto;
}

.mailchimp-container .mc4wp-form input {
    border-radius: 4px;
    margin: 1%;
    flex: 1;
}

@media(max-width: 860px) {
    .mc4wp-form-fields {
        display: flex;
        flex-wrap: wrap;
    }
}

Thanks David for the code. Unfortunately, some things worked but after some tweak, it was figured out.
The Display:block; is working fine to stay correct at mobile and tablets. I added some space between fields too.
Now, one problem that remains is the alignment at the front page. The fields are more aligned to the left side whereas the same form is in the posts page, but it's all good there.
Now what I need is to squeeze or short the input boxes (only in the front page at desktop) so that they look more beautiful and the proper alignment at the center.

That form on your front page is not the mailchimp form ?

It is MC4WP, by plugin ...

If you Right Click and Inspect the form you will see it doesn't have any of the MailChimp markup - also if you try and use the form it doesn't do anything. Something isn't right - best to fix that first then we can fix the CSS issues.

Which form code should I embed - Classic or Unstyled?

Unstyled would probably be easier for us to make it look the way you want it

Done, please check this link https://www.friedcoffee.com/test/

I need - Name - Email - Subscribe button in one line and on tablet Name- Email on one and Subscribe button on second. On Mobile - Each element on a separate line. Each element should have a space of 10 px from each other, especially when on mobile and tablet.

I am not seeing it on your test page ?
There is a very badly formatted from on your home page though....

I have nothing on the front page. It's only on the test page...I am now really getting sick of this change. We are not even getting to the start of the thing properly...
Where it is coming from, I too checked it's weird and I can't find out were it's called...

Yep Now check, I guess it was some cache issue. Anyways, I created a new hook for the test page and now that bad formatted form is at test page.