Keeping 'custom forms' clean in WP

wordpress

#1

Hi team,

I’m wondering how to keep forms created in pages/posts using ‘add a custom form’ clean/aligned.

ie: scribblegraph.me/contact/

On original creation, the form was aligned with text/objects in their expected places, but has since gone amock, as you see it now. I have tried removing this object and re-inserting it; no joy.

Is this potentially something to do with the object it is in? (ie page/post width etc) being <pixels width than the default “add field” width?

Not urgent, thanks kindly:)


#2

It’s all the magic of CSS in that one :slight_smile:

You should be able to edit that in your theme to override the defaults.

Look in wp-content/plugins/jetpack/modules/contact-form/css/grunion.css for the default CSS for the contact form :slight_smile:


#3

OK Thanks Ipstenu - making coffee, getting hands dirty:) Thankfully I’m a lot more comfortable in CSS than .php :wink:


#4

hi Ipstenu,

below is the content (will be default) for:
jetpack/modules/contact-form/css/grunion.css

This looks fine to me - and originally each contact form loaded/appeared fine.

Is the issue that .clear-form { clear: both; } isn’t being called? How do I force this?

[quote].textwidget input[type=‘text’], .textwidget input[type=‘email’], .textwidget textarea { width: 100% !important; }
.contact-form .clear-form { clear: both; }
.contact-form input[type=‘text’], .contact-form input[type=‘email’] { width: 300px; margin-bottom: 13px; }
.contact-form select { margin-bottom: 13px; }
.contact-form textarea { height: 200px; width: 80%; float: none; margin-bottom: 13px; }
.contact-form input[type=‘radio’], .contact-form input[type=‘checkbox’] { float: none; margin-bottom: 13px; }
.contact-form label { margin-bottom: 3px; float: none; font-weight: bold; display: block; }
.contact-form label.checkbox, .contact-form label.radio { margin-bottom: 3px; float: none; font-weight: bold; display: inline-block; }
.contact-form label span { color: #AAA; margin-left: 4px; font-weight: normal; }
.form-errors .form-error-message { color: red; }[/quote]


#5

I actually have the same problem all the time with contact forms. One thing to remember is that plugins are overwritten by your theme’s style.css (I forget that as often as I do the TTL shenanigans with DNS changes).

This is the CSS I used to make it look better on my site:

label.grunion-field-label span {padding-left:5px;}
#contact-form-6 input,
#contact-form-6 select,
#contact-form-6 textarea {
	-moz-box-shadow: 0 0 5px #bbb inset;
	-webkit-box-shadow: 0 0 5px #bbb inset;
	background-color: #fff;
	box-shadow: 0 0 5px #bbb inset;
	box-sizing: border-box !important;
	font-size: 14px !important;
	padding: 4px 5px !important;
	width: 100%;
}

#contact-form-6 input.pushbutton-wide {
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	color: #fff;
	padding: 8px 15px !important;
	width: 25%;
}