[bakParticipant]

Hi there

I know you do not support 3rd party plugins but my question is more related to CSS styling than to the form itself.

I am looking to create a horizontal aligned form with 3 input fields next to each other and the button to the right of it

[ChristopherModerator]

Hi there,

Please provide us with URL of page in question.

Thanks.

[bakParticipant]

This reply has been marked as private.

[bakParticipant]

This reply has been marked as private.

[ThaiModerator]

Hi There,

Please change your CSS from:

#fourth {
    width: 20%;
    float: left;
    margin-right: 6%;
}

To:

#fourth {
    width: 20%;
    float: left;
    margin-right: 0;
}

After that add the following CSS:

#fourth input.wpcf7-form-control.wpcf7-submit {
    margin-top: 20px;
}

Let us know how it goes!

[bakParticipant]

Awsome, thanks. It looks already much better

– What do I need to do for responsiveness? I thought using % should help it
– How can I center the whole form
– Is it possible to align height of input fields with height of button

[ThaiModerator]

Hi There,

Please try adding the following CSS:

/* fields height */
#x-section-24 input.wpcf7-form-control.wpcf7-text {
    height: 44px;
}
/* center form */
#x-section-24 form.wpcf7-form {
    width: 100%;
    display: block;
    max-width: 900px;
    margin: 0 auto;
}
/* responsive */
@media (max-width: 767px){
    #first,
    #second,
    #third,
    #fourth {
        width: 100%;
    }
    #fourth {
        text-align: center;
    }
}

And also change this CSS:

#fourth input.wpcf7-form-control.wpcf7-submit {
    margin-top: 20px;
}

To:

#fourth input.wpcf7-form-control.wpcf7-submit {
    margin-top: 25px;
}

Hope it helps 🙂

[bakParticipant]

thats really great. thanks so much

A few more questions
– How can I make the submit button in the same oval shape than the input boxes
– Is it possible to display the “received message” after you submit in one line starting under the Name field? At the moment it is spread over two lines and starts under the submit button.
– the “received message” (here in german: Ihre Nachricht wurde erfolgreich gesendet. Vielen Dank) is also shown on top of the form and is redundant, can I remove this?
– Once the message is received, there is a green frame around the form. Is it possible to remove this or the other option would be to have it but centered (at the moment it is left aligned) and in a semi-transparent color. If this is complicated, simply removing works for me.

An unrelated question: is it possible to have background color with two different colors. Lets say you have a horizontal color change where the top is in a dark blue and then gradually goes to a slightly ligher blue?

[ChristopherModerator]

Hi there,

#1 Please add the following code in Customize -> Custom -> CSS :

input.wpcf7-form-control.wpcf7-submit {
    border-radius: 4px;
}

#2 & #3 Please update both theme and cornerstone.

#4

.wpcf7-response-output.wpcf7-display-none.wpcf7-mail-sent-ok {
    display: none !important;
}

#5 Yes, it’s possible, check this link :

http://www.colorzilla.com/gradient-editor/

Hope that helps.

[bakParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Provide us with generated background color code and let us know on which page and section you would like to add it, so we can help you.

Remove all those CSS and instead add this one :

.wpcf7-form input[type="email"],.wpcf7-form input[type="text"],.wpcf7-form input[type="tel"],.wpcf7-form textarea {
background-color: #f3f3f2;
}

.wpcf7-form textarea {
height:80px;
}

Hope it helps.

[bakParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

You mean how do we get the CSS? It’s actually too complex to explain, but you should study basic CSS and browser developer tools 🙂

Please check this out http://webdesign.tutsplus.com/articles/faster-htmlcss-workflow-with-chrome-developer-tools–webdesign-8314

And we simply compose or copy the CSS and applied it on .wpcf7-form‘s elements

1. Add this too,

.wpcf7-form .x-btn, .wpcf7-form .button, .wpcf7-form [type="submit"] {
    padding: 0.4em 1.125em 0.4em;
}

2. Add this too,

.wpcf7-form  #fourth {
    width: auto;
    float: right;
    margin-right: 0;
}

But it looks odd since there a lot of spacing, how about we clean it up. Add this instead of CSS from #1 and #2:

#first, #second, #third {
    width: 25%;
    float: left;
    margin-right: 1%;
}
#fourth {
    width: 22.002%;
    float: right;
    margin-right: 0;
}
#fourth input.wpcf7-form-control.wpcf7-submit {
    margin-top: 27px;
    width: 100%;
    padding: 0.4em 1.125em 0.3em;
}

Cheers!

[bakParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

Thanks for writing back.

1. Okay sure 🙂

2. In that case, you can scale down the form’s container,

#wpcf7-f4176-p539-o1 {
width: 50%;
margin: 0 auto;
}

And please remove the line breaks before your form shortcode, it creates <p><br></p>.

3. In a column structure, if you wish to increase the width of an element, you need to decrease the other. Or if you wish to decrease the button’s size, then you need to increase the other.

For example,

#first, #second, #third {
    width: 27.6%;
    float: left;
    margin-right: 1%;
}
#fourth {
    width: 14.002%;
    float: right;
    margin-right: 0;
}

4. It’s inline on my end.

This is what you’ll get if you apply the suggested CSS. Though, even without these changes, your button is still in line.

Thanks for sharing that tool 🙂 , do you wish to apply the gradient background somwhere?

Thanks!

[Author]

Posts