Navigation
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • #1272124

    ZerotoOne
    Participant

    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!

    #1272125

    ZerotoOne
    Participant
    This reply has been marked as private.
    #1272141

    Rupok
    Member

    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.

    #1272291

    ZerotoOne
    Participant

    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 🙂

    #1272299

    Rupok
    Member

    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!

    #1275994

    ZerotoOne
    Participant

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

    #1276085

    Lely
    Moderator

    Hi There,

    You’re welcome!
    Please also add this:

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

    Hope this helps.

    #1422896

    ZerotoOne
    Participant
    This reply has been marked as private.
    #1423230

    Jade
    Moderator

    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.

    #1423902

    ZerotoOne
    Participant
    This reply has been marked as private.
    #1424210

    Joao
    Moderator

    HI There,

    Everything seems aligned and working.

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

    Could you clarify?

    Thanks!

    #1424230

    ZerotoOne
    Participant

    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!

    #1424716

    Friech
    Moderator

    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!

    #1424995

    ZerotoOne
    Participant

    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

    #1425029

    Lely
    Moderator

    Hi There,

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

    Hope this helps.