[ZerotoOneParticipant]

hey there I’d like to align my button http://prntscr.com/dcdyuz on zerotoone.de. to look like this http://prntscr.com/dce00n. thanks for your help!

[ZerotoOneParticipant]

This reply has been marked as private.

[RupokMember]

Hi there,

Thanks for writing in! I have updated your form code to following :

<p class="form-input">[tel* your-number minlength:6 maxlength:20 placeholder "Ihre Telefonnummer"]</p>
<p class="form-submit">[submit "Rückruf anfordern"]</p>

Now let’s add this under Custom > CSS in the Customizer.

.wpcf7 .form-input {
  float: left;
}

.wpcf7 .form-input .wpcf7-form-control.wpcf7-text {
  border-color: #333;
  border-style: none none solid;
  border-width: medium medium 1px;
}
.wpcf7-form .form-submit {
  float: left;
  margin-left: 5px;
  margin-top: 5px;
}

Hope this helps.

[ZerotoOneParticipant]

thanks that was perfect! is it possible so close the gap and align the line with the text? like this http://prntscr.com/dcgb99. thank you 🙂

[RupokMember]

Hi there,

You just need to update the code a bit :

.wpcf7-form .form-submit {
  float: left;
  margin-left: 5px;
  margin-top: 5px;
}

to

.wpcf7-form .form-submit {
  float: left;
  margin-left: 5px;
  margin-top: 10px;
}

Cheers!

[ZerotoOneParticipant]

thank you looks perfect now! but I got problems with my notifications as you can see here http://prntscr.com/ddmkbn

[LelyModerator]

Hi There,

You’re welcome!
Please also add this:

.wpcf7-response-output {
    clear: left;
}

Hope this helps.

[ZerotoOneParticipant]

This reply has been marked as private.

[JadeModerator]

Hi there,

Would you mind posting the direct link of the URL in question?

I tried checking your site but I can’t seem to find your contact page that you’re working on.

Thank you.

[ZerotoOneParticipant]

This reply has been marked as private.

[JoaoModerator]

HI There,

Everything seems aligned and working.

Please clean your browser cache and test it again, if that doesnt solve.

Could you clarify?

Thanks!

[ZerotoOneParticipant]

what I’d like to achieve is, that my blue button is set as the submit button of my form and aligned with the input line http://prntscr.com/epxxk1
In the end I want to achieve something like this http://prnt.sc/epfufx
thank you!

[FriechModerator]

Hi There,

I tried to work on the webdesign rueckruf form, but it seems someone is working on it simultaneously.

This image is not necessary, you can style the current red button just like that with class and custom CSS.

Add this 3 classes on the button shortcode.

class:x-btn class:x-btn-flat class:x-btn-square

Then use this → as the button label.

Since you want the field the the button to be inline, wrap them on the same <p> tag. Do not separate them.

We might need additional custom css after you added those classes above, let us know how it goes.

Cheers!

[ZerotoOneParticipant]

thank you very much! where do I add the 3 classes to the button shortcode?

since this is an older thread, I dont have the custom css above applied

[LelyModerator]

Hi There,

We can add it using the class parameter. See this:https://contactform7.com/submit-button/

Hope this helps.

[Author]

Posts