Email Form Style

[jayvly]

Hi. I am trying to style the Email Form as a horizontal form in my footer
The site is https://dogwoodretreat.ca/5381155E/.

I have it done for the most part but I want it to look and act more like the one I downloaded from Design Cloud. I want it to stretch right across and be as responsive as the one I downloaded.

This is the code I have used so far.

     .tco-subscribe-form {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
}

    .tco-subscribe-form fieldset input {
        margin: 5px !important;
    }

.tco-subscribe-form fieldset {
  	margin-right: 5px !important;
  	margin-left: 5px !important
}	

.x-btn.x-btn-flat, .x-btn.x-btn-flat:hover {
    text-shadow: none;
}

As you can see in the pictures the one on top is the design Cloud version which I want the Email Form to look like.

Thanks,

Jonathan

[tristup]

Hi Jonathan,

Thanks for reaching out.
If you check the Design Cloud URL, it look exactly same what you are getting in your site. If you want that to be in same as the image shown in the Desgin Cloud you need to change the settings.

Mail by Themeco

Step 1: Enable Global Container for the Bar.

Step 2: Set Flexbox > Direction to Column to get the container in different lines. As shown in the above screenshot.

Step 3: Set width 25% to all the container.

Step 4: Change the Self Flex > Bassis value to 4rem to reduce the gap between the container.

Hope it helps.
Thanks

[jayvly]

Hi. I also want it to stretch on desktop the same. I tried the settings you gave and it didn’t respond at all the same.

[tristup]

Hi Jonathan,

If you want different layout structure for desktop and the mobile you need to create two different Bar one will be visible only in the Desktop and another one in the other breakpoints. In the Mobile bar you need to set the settings I have shown. I would suggest you duplicate the Bar and change the settings and set the Customize > Hide During Breakpoints to show in the specific screensize.
If that does not help, please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[jayvly]

Hi. Thank you. I am trying to replicate the exact look of the bar that is in design cloud for both desktop and mobile if this is possible. It’s a pity the design cloud version cannot be used for email subscriptions!

Please find login details below to the staging site:

[tristup]

Hi Jonathan,

The form design is already same as you are expecting. I would suggest you check the website in the different devices and let us know if you are having any problem.

Thanks

[jayvly]

Hi. Sorry but I think I may have confused you.
The form that you now see on the page (Bar 2) is the one that was downloaded form design cloud but it is my understanding that this is not a functional form?
I made a new one (the one that you hid in breakpoint) to replicate the one that is now visible on desktop (Bar 2) from the Email Form Plugin so I can have a functional form.

I want the form I built (Mailchimp Bar) to look and be as responsive as the one from design cloud (Bar 2). Sorry if this is confusing.

[ruenel]

Hello @jayvly,

You will have to remove the 5 pixel left and right margins of your fieldset. Set the flex-grow: 1; flex-shrink: 0; for the fieldset.

Have the .tco-section set the width to 100%.

And then use @media CSS block to set the different width for the fieldset in different screen size. For example:

@media(max-width: 979px){
  .my-fieldset-element {
  	width: 33%;
  }		
}

@media(max-width: 767px){
  .my-fieldset-element {
  	width: 49%;
  }		
}

@media(max-width: 480px){
  .my-fieldset-element {
  	width: 100%;
  }		
}

Be advised that this code will not work out of the box. This will only serve as a demonstration. Be also advised that this is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Kindly let us know how it goes.

[jayvly]

Thank you so much for your help. This works perfectly!

[prakash_s]

Hello @jayvly,

Glad that we were able to help you. Please feel free to open a new thread if you have any more concerns.

Thanks