Create Side by Side Email Forms

[PhrasingInc]

I am working with the TCO Email Forms and trying to make the fields side-by-side instead of vertically stacked.

I saw the 2019 post here but that CSS did not work with the current forms. I also tried the methodology here that was outlined without success.

Is there a new CSS for identifying and setting these fields to be side-by-side on desktop and then stack on mobile?

Below is a picture AFTER implementing the CSS from the 2019 post. I was wondering if the Pro updates made this a different process.

[prakash_s]

Hello Tim,

Thanks for writing to us.

I checked the given custom CSS code on my local test site it seems that is working fine at my end. It might be a syntax error in your custom CSS code. I would suggest you check your custom CSS code through the CSSLINT.

If it doesn’t work for you we need to check your settings, please share your details in a secure note. Please provide the following details

• WordPress Login URL
• Admin level username and password
• Exact page URL

You can find the Secure Note button at the bottom of your posts

Thanks

[PhrasingInc]

I have added the secure note.

[prakash_s]

Hello Tim,

Thanks for sharing the login details, I went ahead and checked your custom CSS code, it seems that you have added an unexpected symbol in your Footer CSS box that is “-”. I would suggest you remove that symbol from the CSS code. Please have a look at the given screenshot in the secure note.

To align the form field side by side only for a larger screen you need to keep these codes in media query CSS.

Complete code with media query

@media(min-width:767px){
.tco-subscribe-form 
{
    display: flex;
    flex-direction: row;
    justify-content: center;
    max-width: 100% !important;
}
.tco-subscribe-form input[type="text"], .tco-subscribe-form input[type="email"] 
{
    margin: 0 5px;
    display: block;
    clear: both;
}

.tco-subscribe-form input[type="submit"] 
{
    margin-top: 0;
    padding-bottom: 0.5em;
}

.tco-subscribe-form fieldset:empty 
{
    display: none;
}

.tco-subscribe-form fieldset 
{
    margin: 0 10px;
}

}

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks

[PhrasingInc]

Thank you! That worked out nicely!

[friech]

You’re most welcome,

Cheers!