Navigation
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • #1425053

    ZerotoOne
    Participant

    ok I added the classes, what should I do next?

    #1425062

    Friech
    Moderator

    Hi There,

    I can’t login to your site anymore? I already clear my cookies (http://prnt.sc/eq8boc)

    Can you replace the label “senden”, and confirm if the changes is applied?

    Thanks,

    #1425263

    ZerotoOne
    Participant

    please try again, you should be able to login now

    #1425749

    Rue Nel
    Moderator

    Hello There,

    I have logged in and it seems that in order to resolve your issue, you must place your field and button in a column. To put your contact form 7 fields in columns, please check out this thread. https://community.theme.co/forums/topic/contact-form-7-2-column-form/

    In you case, you will need to edit your form and have this form contents:

    <div class="x-column x-sm x-3-4">
    <p class="form-input">[tel* your-number minlength:6 maxlength:20 placeholder "Ihre Telefonnummer"]</p>
    </div>
    
    <div class="x-column x-sm x-1-4 last">
    <p class="form-submit">[submit "→"]</p>
    </div>

    Hope this helps. Kindly let us know.

    #1426858

    ZerotoOne
    Participant

    thank you a lot. as you can see the button is now aligned with the text field, but besides the css customization that has to be done. how do I get an arrow that looks like the one I edited into my svg file above the contact form?

    #1427057

    Rad
    Moderator

    Hi there,

    I went ahead and change your button to your preferred SVG.

    Thanks!

    #1427210

    ZerotoOne
    Participant

    thank you! How do I make the svg’s hight fit to the hight of my text field? Is there a way I can make to svg resize automatically to the text field’s size? thanks for your help!

    #1427213

    Rad
    Moderator

    Hi there,

    Please add this CSS as well,

    .form-submit input[type="image"] {
    width: 33px;
    }

    And id you don’t wish to have space between input field and the button, then don’t add them in the columns.

    Thanks!

    #1427216

    ZerotoOne
    Participant

    thank you! could you give me a hint on how to apply my hover effect to the svg?

    /*submit-arrow*/
    a svg:hover #submit-arrow,{
      fill: #111;
    }
    #1427219

    Rad
    Moderator

    Hi there,

    It’s not possible through SVG button (that uses SRC url). SVG CSS is only applicable to in-page embedded SVG. Please check it here https://css-tricks.com/cascading-svg-fill-color/

    Instead, please try this one

    .form-submit input[type="image"]:hover {
    filter: grayscale(100%) brightness(20%);
    }

    Thanks!

    #1427238

    ZerotoOne
    Participant

    thank you! 😀 thats awesome, just edited the code you gave me to my needs. Now there is only the gap between textfield and button, that I have to get rid of. how do remove the column layout as you said a view posts before?

    #1427591

    Rad
    Moderator

    Hi there,

    Instead of removing the columns, I added margin-right:0; to your form columns.

    Cheers!

    #1427614

    ZerotoOne
    Participant

    thank you, looks good 🙂 is there a way to fix the issue on mobile? http://prntscr.com/ero8w4
    thanks for your help!

    #1427817

    Christopher
    Moderator

    Hi there,

    Please add following code in Customize -> Custom -> Global CSS :

    .wpcf7 .x-column.x-3-4 {
        float: left;
        width: 74%;
    }
    .wpcf7 .x-column.x-1-4 {
        float: left;
        width: 22%;
    }

    Hope that helps.

    #1427920

    ZerotoOne
    Participant

    you are awesome! now there is still one little display issue http://prntscr.com/eruixh
    thank you! 🙂