Single Line Elementor Forms

Don't want to mess with code snippets? Request for this to be a feature of MyListing Pro.

Code Snippets, CSS
Forms

Instructions

Create a new CSS code snippet.
Copy the contents of code snippet below.
Paste the contents into your code snippet.
Review any notes that I’ve provided.
Save and enable the code snippet.
Test.

Snippet

This overall snippet also includes a bonus snippet for fixing field border-radius issues that come with Elementor Pro forms. Here are some examples.

/**** 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;
    }
}

MyListing Pro

One plugin. Endless possibilities.

Pro Community

Join for free today.

My Tech Stack

Trusted tools and resources.

Software Deals

Save on Premium Solutions.