Horizontal Mailchimp Opt-in? (Mail)

Support
#1

I would like to make my email opt-in form horizontal and not vertical. All the CSS I have tried doesn’t work.

I’ll attach a link in a new comment :slight_smile:

#2

Hi There,

Please add the following CSS under X > Theme Options > CSS:

#tco-subscribe-form-781 {
    width: 80% !important;
    max-width: 100% !important;
}
#tco-subscribe-form-781 fieldset {
    width: 45%;
    float: left;
}

#tco-subscribe-form-781 input[type="submit"] {
    margin-top: 0;
    margin-left: 4%;
}

Let us know how it goes!

1 Like
#3

You da man. Works, thanks!

#4

You’re welcome.

#5

Sorry one more thing. I made the width of the button to 65% but on mobile it cuts off. Is that due to the same CSS?

#6

and it doesn’t seem to want to align left either with:

text-align: center;

the entire form within a column

#7

Hi there,

Yes it is, please wrap your CSS with @media query like this

@media ( min-width: 768px ) {
#tco-subscribe-form-781 {
    width: 80% !important;
    max-width: 100% !important;
}
#tco-subscribe-form-781 fieldset {
    width: 45%;
    float: left;
}

#tco-subscribe-form-781 input[type="submit"] {
    margin-top: 0;
    margin-left: 4%;
}
}

Hope this helps.

#8

Hey Rad,

This actually broke the form on mobile making it go back to vertical and didn’t align left…

The button is still at 65% too. As you scale it down to mobile the text becomes cut off.

#9

Hi there,

Ah, you mean it’s intentional to have inline fields in mobile? In that case, your button will stay cut off since it needs to fill the inline width.

But you may try adding min-width like this

width: 65%;
min-width: 120px;

Thanks!

#10

Master Rad… I added this sorcery of CSS yet have fallen short once again.

Ideally, I would like the email field and submit button to stay horizontal to each other on Desktop and mobile.

Along with the placeholder text not cutting off on mobile. I added all the CSS that I believe should have achieved this but still nothing.

#11

Hi There,

Here is the updated css.

@media ( min-width: 768px ) {
 .tco-subscribe-form {
 max-width: 100%;
}
.tco-subscribe-form fieldset {
 width: 50%;
float: left;
}

#tco-subscribe-form-781 input[type="submit"] {
    margin-top: 0;
    width: 90%;
    margin-left: 4%;
}
}

Please let us know how it works.

Thanks

#12

Hey Basanta,

This distorted the form into a sideways vertical. Perhaps I can provide our login.

#13

Hi there,

Given with the remaining width of your mobile, cutting/clipping is unavoidable. That’s the same reason why layout on smaller devices is stacked instead in columns.

But please try replacing this entire CSS

/* Custom email forms */ 


@media ( min-width: 768px ) {
#tco-subscribe-form-781 {
    width: 80% !important;
    max-width: 100% !important;
}
#tco-subscribe-form-781 fieldset {
    width: 45%;
    float: left;
}

#tco-subscribe-form-781 input[type="submit"] {
    margin-top: 0;
    margin-left: 4%;
}
}

#tco-subscribe-form-781 input[type="submit"] {
   background-color: #796eff; 
  border: 2px solid #796eff; 
  color: #fff;
  line-height: 25px;
  vertical-align: top;
  text-shadow: none;
  text-align: center !important;
  width: 65%;
  min-width: 120px!important;
}

#tco-subscribe-form-781 input[type="submit"]:hover {
    background-color: #695BCB;
  border: 2px solid #695BCB;
  color: #fff; 
  line-height: 25px;
   vertical-align: top;
  text-shadow: none;
  text-align: center !important;
  width: 65%;
  min-width: 120px !important;
}

.tco-subscribe-form input[type="email"] {
  width:100%;
  height: 2.9em;
  border: 2px solid #ddd;
  box-shadow: none !important;
}

.tco-subscribe-form input[type="email"]:hover {
  border: 2px solid #A59AF7 !important;
}

.tco-subscribe-form input[type="email"] {
  -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

with this

/* Custom email forms */ 

#tco-subscribe-form-781 {
    width: 80% !important;
    max-width: 100% !important;
}
#tco-subscribe-form-781 fieldset {
    width: 45%;
    float: left;
}

#tco-subscribe-form-781 input[type="submit"] {
    margin-top: 0;
    margin-left: 4%;
}


#tco-subscribe-form-781 input[type="submit"] {
   background-color: #796eff; 
  border: 2px solid #796eff; 
  color: #fff;
  line-height: 25px;
  vertical-align: top;
  text-shadow: none;
  text-align: center !important;
  width: 100%;
}

#tco-subscribe-form-781 input[type="submit"]:hover {
    background-color: #695BCB;
  border: 2px solid #695BCB;
  color: #fff; 
  line-height: 25px;
   vertical-align: top;
  text-shadow: none;
  text-align: center !important;
}

.tco-subscribe-form input[type="email"] {
  width:100%;
  height: 2.9em;
  border: 2px solid #ddd;
  box-shadow: none !important;
}

.tco-subscribe-form input[type="email"]:hover {
  border: 2px solid #A59AF7 !important;
}

.tco-subscribe-form input[type="email"] {
  -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
@media ( max-width: 767px ) {
#tco-subscribe-form-781 {
width: 100% !important;
}
}

Thanks!

#14

Thank you Master Rad. That worked :grin:

Am I able to align the whole form to the left with this css along with making the button 65%?

#15

Hi again,

To do this please add the following code in your Customizer as well:

#tco-subscribe-form-781 {
    width: 100% !important;
}

Let us know how this goes!

#16

Hey Nabeel,

This did widen the form and force itself to appear left. I was able to replicate the look I’m going for with a contact form 7 field as seen below the Mailchimp form in the link I’m about to attach as private note

#17

Hi again,

To do this, add this code in your Customizer:

.wpcf7-form .Email input, .wpcf7-form .wpcf7-submit {
    width: 45% !important;
    margin-right: 5px;
}

Hope this helps!

#18

Nabeel,

I already have this CSS.

#19

Hi there,

I am sure you will understand that we did our best to help you out regarding the customization and I want to mention that the customization is out of our support scope. The changes to your last request will be this:

/* Custom email forms */ 

#tco-subscribe-form-781 {
    width: 80% !important;
    max-width: 100% !important;
}
#tco-subscribe-form-781 fieldset {
    width: 45%;
    float: left;
}

#tco-subscribe-form-781 input[type="submit"] {
    margin-top: 0;
    margin-left: 4%;
}


#tco-subscribe-form-781 input[type="submit"] {
   background-color: #796eff; 
  border: 2px solid #796eff; 
  color: #fff;
  line-height: 25px;
  vertical-align: top;
  text-shadow: none;
  text-align: center !important;
  width: 100% !important;
}

#tco-subscribe-form-781 input[type="submit"]:hover {
    background-color: #695BCB;
  border: 2px solid #695BCB;
  color: #fff; 
  line-height: 25px;
   vertical-align: top;
  text-shadow: none;
  text-align: center !important;
  width: 100% !important;
}

.tco-subscribe-form input[type="email"] {
  width:100%;
  height: 2.9em;
  border: 2px solid #ddd;
  box-shadow: none !important;
}

.tco-subscribe-form input[type="email"]:hover {
  border: 2px solid #A59AF7 !important;
}

.tco-subscribe-form input[type="email"] {
  -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
@media ( max-width: 767px ) {
#tco-subscribe-form-781 {
width: 100% !important;
}
}

#tco-subscribe-form-781 {
    width: 100% !important;
}

Unfortunately, further assistance is not possible and you will need to continue it yourself or seek a paid help from freelance developers of the X Facebook Users Group.

Thank you for your undertsaing.

#20

This has been resolved. Sorry for the troubles Christopher!