Styling the email forms

[Petrie]

Hi there

I’m trying to style my email forms and I want to be able to make the input and subscribe fields the same size with gaps in between them. I would like it to look like the one on top which is just containers and text.
This is what I have so far and now I’m stuck

Thanks in advance

[rad]

Hi Petrie,

Thanks for reaching out.

May I know the URL where this form is? Is it standard form or from 3rd party plugins?

Thanks!

[Petrie]

Hi Rad

Thanks for getting back to me. I’m using the Email Forms plugin that comes with X Pro. The website isn’t launched yet but will be soon. I’ll add a secure note with login for you.

Thanks Chris

[jade]

Hi Chris,

Please let us know when you get the site online so that we can check it.

Thank you.

[ruenel]

Hello @Petrie,

I have logged in and check your form in the footer.
I am already seeing this:

Please keep in mind that since you have installed SG Optimizer, you must always clear your plugin cache first before testing your site. Caching are best to turn on when you are done building your site.

Hope this helps.

[Petrie]

Hi There

That is the footer that isn’t set up with email forms. If you go into the footers, it is the Copy of footer where you will see this.

The bottom email form is what I wish to look like the top none functioning form.

Thanks in advance
Chris

[nabeel]

Hi Chris,

Thank you for the screenshot, I went ahead and added the following code in your element’s CSS of your Content Area element

$el {
  width: 100%
}

$el .tco-section {
  padding: 0 !important;
}

$el .tco-section form {
  padding: 0 !important;
  display: block;
}

$el .tco-section form fieldset {
  display: inline-block;
  width: 24.5%;
}

$el .tco-section form fieldset:nth-child(6),
$el .tco-section form fieldset:nth-child(7) {
  display: none !important;
}

@media screen and (max-width: 870px) {
  $el .tco-section form fieldset {
    width: 32%;
    margin-bottom: 7px !important;
  }
  $el .tco-section form fieldset:nth-child(8) {
    width: 98%;
  }
}

This seems like has done the trick. Please check back your footer now and let us know if this is what you required.

Cheers!

[Petrie]

Thank you so much Nabeel. It works!!!

You Rock

[friech]

Your satisfaction is a great compliment for us.

Cheers!

[Petrie]

I have another css question if I could. I’d like the form to stack on mobile. Currently the 3 input fields are side by side and shortened and the subscribe button is underneath.

[christopher]

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you a better support which you deserve. Having a long thread makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

By the way, I could not login to your website. So in the new thread please kindly make sure that you give us the correct login information and which Footer to check.

Thank you.