Tagged: x
-
AuthorPosts
-
March 30, 2017 at 2:53 am #1425053
ok I added the classes, what should I do next?
March 30, 2017 at 3:18 am #1425062Hi 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,
March 30, 2017 at 8:00 am #1425263please try again, you should be able to login now
March 30, 2017 at 7:36 pm #1425749Hello 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.
April 1, 2017 at 3:02 am #1426858thank 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?
April 1, 2017 at 4:07 pm #1427057Hi there,
I went ahead and change your button to your preferred SVG.
Thanks!
April 2, 2017 at 12:59 am #1427210thank 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!
April 2, 2017 at 1:17 am #1427213Hi 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!
April 2, 2017 at 1:23 am #1427216thank 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; }
April 2, 2017 at 1:49 am #1427219Hi 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!
April 2, 2017 at 3:03 am #1427238thank 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?
April 2, 2017 at 3:38 pm #1427591Hi there,
Instead of removing the columns, I added margin-right:0; to your form columns.
Cheers!
April 2, 2017 at 4:58 pm #1427614thank you, looks good 🙂 is there a way to fix the issue on mobile? http://prntscr.com/ero8w4
thanks for your help!April 3, 2017 at 12:16 am #1427817Hi 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.
April 3, 2017 at 5:45 am #1427920you are awesome! now there is still one little display issue http://prntscr.com/eruixh
thank you! 🙂 -
AuthorPosts