Hello @roonz,
The styling of the form found in the footer of the Crafty demo site is using custom CSS. It may not be used with other form plugins. as they may not have the same form element layout structure. If you are familiar with coding and how the structure the form, you may be able to reuse the styling code. It is using this CSS code by the way;
/* Form Base
// --------- */
.is-site-footer-form {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: stretch;
width: 100%;
max-width: 100%;
}
/* Input
// ----- */
.is-site-footer-form input[type="text"] {
flex: 1 1 0%;
display: block;
width: auto;
min-width: 0px;
height: 48px;
margin: 0;
border-radius: 0;
border: 1px solid #333333;
padding-left: 1em;
padding-right: 1em;
color: #ffffff;
background-color: transparent;
}
.is-site-footer-form input[type="text"]::placeholder {
color: #ffffff;
opacity: 0.11;
}
.is-site-footer-form input[type="text"]::-webkit-placeholder {
color: #ffffff;
opacity: 0.11;
}
/* Submit
// ------ */
.is-site-footer-form button[type="submit"] {
flex: 0 0 auto;
min-width: 0px;
height: 48px;
padding: 0 calc(2em - 0.15em) 0 2em;
border: 0;
font-size: 1rem;
letter-spacing: 0.15em;
text-transform: uppercase;
white-space: nowrap;
color: #ffffff;
background-color: #000000;
box-shadow: none;
}
The code above is the actual code of the form styling. Feel free to modify the code, make adjustments as you need. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:
Best Regards.