Inline Email Form

[chrisjdavies]

Hi, I have created an Email Form using Email Forms and embedded it into my staging site using Raw Content but I can’t get it to become inline using any of the CSS recommended in various posts on this forum.

.tco-subscribe-form {
   width:100%;
}

.tco-subscribe-form fieldset {
min-width: 0;  
display: inline-block;
vertical-align:middle;
}

.tco-subscribe-form select, .tco-subscribe-form input[type="text"], .tco-subscribe-form input[type="email"] {
   margin-bottom:0;
}

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

This code and any variants just seems to bring the Name/Email/Button containers closer together, not Inline.

.tco-subscribe-form fieldset {
    display: inline-block !important;
}

.tco-subscribe-form input[type="email"] {
    margin-bottom: 0;
}

.tco-subscribe-form {
    display: contents;
}

.tco-subscribe-form input[type="submit"] {
    text-shadow: none;
    box-shadow: none;
}

This almost works but all the boxes are very close together and don’t quite line up (see below). I’d prefer them more spaced and centred to the column.

Could you please suggest some CSS that will work?

[marc_a]

Hi @chrisjdavies,

Thanks for reaching out!

I check your account but I couldn’t find the right page URL where you add the subscribe form. Would you mind sharing the site URL so that we can check and give you the right CSS code? You can add the link in a Secure Note.

Thank you.

[friech]

Hi @chrisjdavies.

Try using the CSS Flexbox method:

form.tco-subscribe-form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
}
.tco-subscribe-form fieldset {
	flex-grow: 1;
}
.tco-subscribe-form select,
.tco-subscribe-form input[type="text"],
.tco-subscribe-form input[type="email"] {
    margin-bottom: 0;
}

Please note that custom CSS is served only as your guide, it’s your responsibility to expand, modify, and maintain it in case it causes issues.

Hope it helps,
Cheers,

[chrisjdavies]

Thank you! That has worked perfectly

[marc_a]

Hi @chrisjdavies,

You’re welcome and it’s our pleasure to help you! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.

[chrisjdavies]

hi Marc

Quick question, I am now bringing this over onto my live site and the CSS that worked on the staging site doesn’t seem to work on the live site. Any ideas?

Thanks

[chrisjdavies]

Hi Marc, sorry! I missed one setting in the setting up and now it is ok.
Thanks again

[tristup]

Hi @chrisjdavies,

Great that it resolved now.

Thanks