[Two10Participant]

Hi there,

I’ve looked up and found a couple of answers to this question, but the code provided didn’t help in my case.

I want a simple form – just email address and Subscribe button, to sit in the topbar section, alongside the text that is there at the moment.

When I create it using the Mailchimp plugin, it puts the 2 boxes underneath, and then underneath each other.

Thanks,
Cathy

[ThaiModerator]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Two10Participant]

Hi there,

Sorry, the website is http://www.twotensolutions.com

Thanks,
Cathy

[John EzraMember]

Hi Cathy,

Thanks for the link, but where is your form at? We need to see the form to get the specific form ID for the CSS. However, here’s what you need to do first.

When you create your form, set the Name Field to None so that you only have an email and button.

You can also turn on Custom Styling that will give you more styling options. This is so we limit the CSS to just making the form inline.

If you know how to find the form ID via inspect element, the CSS would look like this example:

You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

form#x-subscribe-form-7093 {
    max-width: 100%!important;
}
form#x-subscribe-form-7093 
fieldset {
    float:left;  
}

input.submit.x-btn.x-btn-real.x-btn-rounded {
    margin-left:20px;
    margin-top:-2px;
}

Note: Look for the form#x-subscribe-form-7093 type of ID, the number will be different. If you have any difficulty, create or edit the form removing the name field and then point us to where the form is on your site so we can provide a tailored solution. Hope this helps – thanks!

[Two10Participant]

Hi,

I’ve put the form in for you to take a look (and placed the above code). The 2 boxes are on a single line, but I would like them to sit up next to the text at the top if possible.

Thanks for all your help!
Cathy

[DarshanaModerator]

Hi there,

Could you please try adding the following CSS rules into your Customizer, Custom > CSS section.

form#x-subscribe-form-6148 fieldset {
    float: left;
    margin-right: 5px;
}

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    height: 3.4em;
}

Hope that helps.

[Two10Participant]

Hi there,

Thanks for that code, but it hasn’t quite worked 🙂

[NicoModerator]

Hi There,

Adjust your forms inline css by increasing its max-width to max-width: 218px.

Or add this in your customizer’s custom CSS:

.x-subscribe-form-6148{
max-width: 218px;
}

Hope it helps.

Thanks.

[Two10Participant]

Hi,

That code has put the forms on one line, but I would like it to sit up between the text and social media icons. Is that possible?

Thanks,

[Paul RModerator]

Hi,

Yes, it’s possible.

You can add this under Custom > CSS in the Customizer.

.x-topbar .x-section {
  float: right;
  max-width: 215px;
  width: auto;
  padding: 0;
  margin: 0 55px 0 0;
}

Thanks

[Two10Participant]

Thank you so much! Sorry…just one final tweak – can the boxes be the same height, and vertically aligned? I’ve tried adjusting the custom CSS in the email plugin section, but haven’t had much luck.

Thanks again for all your help 🙂

[FriechModerator]

Hi There,

The button has bit of top margin, to remove that add this on your custom CSS.

.x-topbar .x-subscribe-form input[type="submit"] {margin-top: 0;}

Awesome site design, bye the way.

Hope it helps, Cheers!

[Two10Participant]

Great, that’s done it! Thanks so much. And thanks for the feedback on the design.:)

Slightly off topic, does the Customizer automatically feed into the child theme? Is that how it works? Or…if it’s starting to get full should I move the code into the Child theme?

Cheers!

[ChristopherModerator]

Hi there,

Not sure if I understood your question, are you taking about CSS code which you can add in both Customizer or Cornestone -> CSS ?
If so note that CSS in customizer assign to all existing target class or ID in your site while CSS codes in Cornerstone only add to class or ID in that specific page.

Hope that helps.

[Two10Participant]

It was more about where the code is stored. So when I upgrade my theme version, will any CSS changes be lost?

[Author]

Posts