Single Line Elementor Forms

Recommendation

Learn why I switched to WPCodeBox for managing code snippets for myself and for my clients.

Instructions

Snippet Type: CSS

  1. Copy the snippet.
  2. Add the snippet using WPCodeBox.
  3. Follow any customization notes provided.
  4. Save the snippet.
  5. Enable the snippet.
  6. Test.

Snippet

This overall snippet also includes a bonus snippet for fixing field border-radius issues that comes with Elementor Pro forms.

				
					/**** ELEMENTOR FORMS  ****/
/** FORM FIELD RADIUS AND PADDING FIX **/
.elementor-field-group:not(.elementor-field-type-upload) .elementor-field:not(.elementor-select-wrapper) {
    border-radius: 25px !important;
}
/** SINGLE LINE FORMS **/
#single-line-form-button {
    margin-left: -50px;
    z-index: 100;
}
@media only screen and (max-width: 768px) {
#single-line-form-button {
    margin-left: -45px;
}
}
@media only screen and (max-width: 414px) {
#single-line-form-button {
    margin-left: 0px;
    margin-top: 5px;
}
}
@media only screen and (max-width: 414px) {
.elementor-widget-form .elementor-field-group .elementor-field {
    text-align: center !important;
}
}