Need a box or a border or something to make forms "stand out". Any suggestions?

Gravity Support Forums » Plugin Support » Gravity Forms

pamsandall@gmail.com
Member

Disclaimer: New to GF...NOT a programmer. Help???

I have created several forms and have been able to make them FUNCTION properly, but they look awful. Most forms I have seen on other sites (including this one!!!) appear in boxes or with borders and/or a different background color to set them apart. Mine look like clunky lines of text and visually confusing and unattractive. I've tried changing the template from my purchased one to a more simplified wp basic, but it made no different. How do I get the forms aesthetically pleasing and noticed?

Here's one of the links that has a form: http://www.pamelasandalldesign.com/edecorating/

I feel like I am simply missing something obvious but after spending several hours reading documentation, I'm no closer to a solution. I've scoured the plug-ins, but it seems odd that I should be using a freebie third part plug-in to help boost a product I've paid for. Any suggestions? Links?

Appreciate the feedback.

Posted 11 years ago on Thursday June 27, 2013 | Permalink
Rob Harrell
Member

Pam,

Gravity Forms is set to inherit styles from your theme. So how your inputs look is being dictated by your theme. What specifically were you looking to do to your form inputs here and I can help provide you with some CSS to make it happen.

Posted 11 years ago on Thursday June 27, 2013 | Permalink
pamsandall@gmail.com
Member

SInce I don't really understand code and rely heavily on plug-ins and a good template, I'm not sure how best to answer that. I would like there to be at least a colored box or border. Ideally? I'd love to be able to change the layout, so it's not all in one row. Maybe??? Insert photographs :).

I don't want to exhaust the contributors here...is there a good couple of links? I'm not afraid of learning. Thanks.

Posted 11 years ago on Thursday June 27, 2013 | Permalink
Kevin Flahaut
Administrator
Pam,

I'm going to be honest. We can give you a snippet of CSS or two to implement, but your theme is going to cause some problems with your forms. Mostly I see lots of problem resulting from the CUFON (font replacement) script that replaces your fonts with images and looks like it's creating some spacing issues.

Adding a border to your forms and a few things is easy enough. You can simply add a HTML field to the very end of your form and add something like this.. be sure to copy the surrounding style tags too.
```
[css]<style type="text/css">

body .gform_wrapper {
    border: 3px solid #E08FAA;
    background-color: #F3F3F3;
    padding: 30px 30px 0 30px;
    margin: 20px 0;
    -webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}

body .gform_wrapper .gform_footer input.button.gform_button,
body .gform_wrapper .gform_footer input[type="submit"] {
    background-color: #E08FAA;
    font-size: .75em !important;
}

</style>
```
Once that's in there, you should get something more like these screenshots:

http://i.imgur.com/PABKJEC.jpg
http://i.imgur.com/rDsxj0o.jpg

Of course I just grabbed some colors from your theme and used those. You might want tot tweak the CSS to do something different. Now, to compact things, you could use some of the "ready classes" applied to the fields in the form admin.

http://www.gravityhelp.com/css-ready-classes-for-gravity-forms/

Using the "left half" and "right half" classes in some places will fill in the spaces to the right and give you a more compact layout. That's not too difficult to do without being a programmer or designer.

Honestly though, if you really want to change things up, it might be in your best interest to hire a competent designer/developer for at least a short stint to polish things up for you.

I would love to offer more design help but we don't do customizations or any type of contract work right now. We are a very small team and all of our resources are dedicated to improving our current products and developing new offerings.

One of these sites might be a good place to start looking for a qualified WordPress developer to help you out.

-----------------------------------------------------

http://wpcandy.com/pros/experienced/with-gravity-forms/
http://jobs.wordpress.net/
http://www.freelancer.com/hire/Wordpress
http://jobs.freelanceswitch.com/
http://www.wphired.com/
http://www.krop.com/
http://www.sensationaljobs.com/
http://premium.wpmudev.org/wpmu-jobs/
http://jobs.smashingmagazine.com/
http://build.codepoet.com/

-----------------------------------------------------

Best of luck.
Posted 11 years ago on Thursday June 27, 2013 | Permalink
pamsandall@gmail.com
Member

Hi Kevin,

Thanks so much for your helpful advice. I've actually been struggling with the template for a variety of reasons, but your comments have solidified my need to step it up a bit. I will look over the links you've sent and suggestions you've made. I SO appreciate you actually taking the time to look at my site and SEE the issue.

Just to clarify the issue, all (most?) of the things I want to do can be accomplished with a more compatible template (or custom installation) on my site?

Thanks again,

Pam

Posted 11 years ago on Friday June 28, 2013 | Permalink

This topic has been resolved and has been closed to new replies.