Adding a hover is easy.
All you need is the hover state on the submit button ID. So for example on the default form the CSS would be:
.qcf-style.default #submit:hover{color:red;}
To remove the margins add the style:
.qcf-style input[type=”text”] {margin: 0 0 0 0;}
I could probably add this as a styling option. I didn’t bother with the hover on the submit button because nobody asked for it and it doesn’t work on a touch screen.
If you send me an email I’ll send you an update to test.
Hello,
I will be happy to have a try and test your update.
My e-mail address: pevu2020(at)gmail.com
Just sent you an update to test.
You can see the results here: http://testblog.co.uk/contact-forms/
Hi there,
Just tested new updated version. It looks great.
All the best mate š
Hello Aerin,
I can not make it work on my page. I have used code lines you sent me:
.qcf-style input[type=”text”] {margin: 0 0 0 0;}
.qcf-style.default #submit:hover{color:red;}
in Styling -> Custom CSS -> Use Custom CSS
and it does not work.
It works nice on your test page u sent me. But that is pretty much it.
Am I doing something wrong mate ?
All the best š
You shouldn’t need the custom CSS. There is now an option to add the hover colour in the Submit button styles.
But if you want to use the custom CSS, just change .default to the name of your form.
HI mate.
I think that I have lost my mind. Your plugin didn’t update – at least doesn’t look like.
I cant seem to find any update from you, apart from link you sent me for testing.
When I check your plugin on wordpress plugin page – version didn’t change and I cant update it from my wordpress plugin menu as well.
I should let you know that I am no expert in that field just started wordpress adventure š
Please advise
All the best mate
I sent it to the email address you published 2 weeks ago.
However, here’s a link to the download: https://quick-plugins.com/wp-content/uploads/quick-contact-form.zip
I haven’t published it yet as I’m waiting for a sponsor to fix their site.
Hello,
That is why š I didn’t get zip file last time.
Thank you for the link. Will play around with new features š
All the best mate
HI mate,
It looks like that even when margins are set to 0 there is a small gap between fields and line overlap between “Subject” and “Message” and even bigger gap on Error Messages. Additionally how to remove gap between button and fields so to achieve one solid block. One more thing for the future, maybe it would be nice to have an option to change border and text for hover button.
All the best mate
Links to my style settings:
https://dl.dropboxusercontent.com/u/5531443/Screen%20Shot%202016-04-06%20at%2013.01.19.png
Links to contact form:
https://dl.dropboxusercontent.com/u/5531443/Screen%20Shot%202016-04-06%20at%2012.56.27.png
https://dl.dropboxusercontent.com/u/5531443/Screen%20Shot%202016-04-06%20at%2012.56.32.png
Try setting the top margin to -2px.
It’s always going to be a bit iffy getting the solid block you want as each field will overlap the next. And it’s quite possible your theme is overriding the plugin settings which is why there is are odd gaps.
I really need to inspect the code to find out what’s happening. Can you email me a link to the live site?
Hello,
Website is not live yet. I have it on my MAMP server so far. The last bit I am working on is that contact form and after its finished I will go live with it.
If you will have any ideas how to solve it let me know š
Any advice how to move button up to the “message” field ?
All the best mate.
Hello again š
It looks like I have manage to make it work with this settings:
margin: -2px 0px -8px 0px; padding: 10px;
Links below, but only thing that bothers me is that I had to change padding and this actually changed displaying of a text in the fields from centred to bottom aligned – which is not that big concern but it looks odd. It seems that I can not make padding bigger than 10. Everything above 10 makes top line from “Name” field not visible or changing its appearance.
Any ideas ?
All the best mate
This is what happens when you start fiddling with margins and padding. What you have done with your settings is layer the fields on top of each other which is why they don’t line up properly.
The only way to fix this is to inspect the code. Go live with the site but put the contact form on an orphan page. Send me the link and I can’t the browser code inspector to find the problem.
Or you can use the code inspector on your browser. It’s not something I can fix without access to the code.
