redhillcrea.tv
Member
Hi,
This is a question on how to position the input elements of a form.
I have a VERY basic understanding of css and have been able to style the basic elements of the form.
But now I need help in positioning the elements, and am hoping that the forums here could help.
Here is the form that I am trying to replicate: http://designtutorials4u.com/wp-content/uploads/2011/02/14_contact_form.jpg
Could somebody help?. Much appreciated
Here is the idea that I am trying to replicate.
Do you have a link to your form? We can't help with CSS issues without seeing the CSS of your theme that you'll potentially have to override.
We do have some ready made classes that might help. Check out the following:
http://www.gravityhelp.com/documentation/page/CSS_Ready_Classes
redhillcrea.tv
Member
@David Peralty,
ooops, here is the link: http://sharetel.com.au/contact-us/
As I mentioned, I have a VERY basic understanding of css and have been able to style the basic elements of the form. But now I need help in positioning the elements as in the screenshot.
Thanks again for any help
Let's set some ground work first. You will want to set your label placement to "Top Label Alignment" in the form's settings in the formbuilder tool. Let me know when you have done that.
Drop this into your theme's stylesheet and it should get you close:
[css]
#input_2_1_6_container {
float: none;
clear: both;
width: 50%;
}
#field_2_3 {
width: 45%;
float: right;
margin: -262px 20px 0 0;
}
#input_2_3 {
height: 205px;
}
redhillcrea.tv
Member
@Rob,
You are a legend!! Thank you very much!
I am still learning how css effects positioning, and you have saved me heaps of tinkering time!!.
I just have one more question if i may?
I have 2 more changes that I need to make.
1- remove the Field labels ( as they are already in the input box )
2- move the description box up and place the submit button below to the right.
Something like this :http://postimage.org/image/4oha6pztv/
Are you able to assist me further?
Thanks
redhillcrea.tv
Member
I just wanted to add that all of the input boxes themselves look different and resize weirdly when the are on other pages.
Could you please help me to give them all the same look? I am trying to get them to look like the "first name" last name" input boxes
Thanks again for all you help!!
Do you have a specific link or links to share?
redhillcrea.tv
Member
Sorry mate,
The original contact page is : http://sharetel.com.au/contact-us/
A screenshot of what I am trying to accomplish is here: http://postimage.org/image/4oha6pztv/
The changes that I need help with are:
1- remove the Field labels ( as they are already in the input box )
2- move the description box up and place the submit button below it to the right.
3- resize the Input box lengths evenly.
Sorry for the confusion, and thanks a stack for any help
Try this out first:
[css]
#gform_wrapper_2 .gfield_label {
display: none;
}After you do that you'll need to make adjustments to that description box (#field_2_3) because the label spacing is going to alter it. So edit the top margin necessarily, as well as the height of the textarea (#input_2_3).
Then we will take a look at the submit button.
Hello - I'm in need of assistance positioning elements inside the form body. See form above map: http://184.173.196.201/~hostccl/property/townhouse-condo/. So I have an issue with positioning the input fields and copy - would like them all indented 11px from left. And would also like to be able to control the vertical size of the tan field so that is looks something like this: http://184.173.196.201/~hostccl/wp-content/uploads/2013/03/form.jpg. There will be several of these forms which all will be specific to a certain property - so there will be a different form ID for each - so the styling will need to be form ID specific. I was able to locate the code for most of this - but it seems to be all over the place. What I need to accomplish seems quite straightforward, but . . . Thanks, for you help. MM
This text is not part of the form, so we're not going to be able to get it in the text box.
<h2>Would you like additional information about this property?</h2>
<p>Please supply your name and email address, and you will automatically receive an email with a link to the information.</p>To style the elements which are part of the form, you can use this CSS (add to your theme's stylesheet):
[css]
body #gform_wrapper_5 {
padding: 0px 11px;
}
body #gform_wrapper_5 label {
padding-top: 11px;
}
body #gform_wrapper_5 .gform_footer {
padding:0px;
}Those styles will apply only to form 5. You can use .gform_wrapper if you want to apply the same style to all forms.
Screenshot: http://minus.com/lKQjJmbtM5Jaz
Excellent - perfect - thank you Chris! MM
You're welcome.