Crafty - CSS for Mail Form in Footer

[surfersteve1970]

Hi,

I\m developing a website based on the Crafty demo and have added the following CSS to the Gobal Footer CSS:

.tco-subscribe-form {
text-align:left;
width: auto !important;
max-width: 100% !important;
}

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

.tco-subscribe-form fieldset input[type]{
margin:0 !important;
}

.tco-section .x-subscribe-form fieldset {
margin-bottom: 0px;
width: 100%;
}

The CSS isn’t quite working as I would like the layout to keep the current colours, wording etc… but match your demo input fields which are above so:

1. Email input box to be longer ending in the same place as the demo input box.

2. Submit button to be on the same line as is, but to start and end as per the demo submit button.

Thanks

[christian]

Hey @surfersteve1970,

Thanks for writing in.

Our demos only showcase a design idea. We can’t customize our extension to replicate the demo as part of our theme support.

With that said, I’ll provide a sample code to give you a starting point to customize further.

Please just note that all custom codes including the codes given here in our forum only serves as a guide. We do not maintain nor support them that means if you’re not a coder, you should consult with a developer for issues that will arise from the use of custom codes and further enhancing them.

Please add the following code in Theme Options > CSS.

.tco-subscribe-form fieldset:nth-child(3) {
    width: 73.5% !important;
}

Provided there’s no conflict with other codes in your site, you should get the following display. It’s pretty close but not exactly as the demo.

If you need to replicate the exact layout, you need to find an email forms builder. Regretfully, I don’t know if such a plugin exists so it’s best to consult with a developer.

Hope that helps and thank you for understanding.

[surfersteve1970]

@christian

.tco-subscribe-form fieldset:nth-child(3) {
    width: 73.5% !important;
}

Thanks that’s all I needed a little help with the CSS

[tristup]

Hi @surfersteve1970,

We are glad to help you.

Thanks