WordPress › Support » getting text fields to line up

tangerine3
Member
Posted 10 months ago #

i have installed the plug in Contact Form 7 and need to know how to line up the text fields. This is how it is coded now and what it looks like:

First Name [text* firstname 30/60]
Last Name [text* lastname 30/60]
Address [text* address 30/60]
City [text* city 30/60]
http://www.chromehorserentals.com/wordpresstestsite/reservations/

This is how I want it to look with the text fields all lined up (please scroll down page). https://www.chromehorserentals.com/rentals/reservation.html

Where and what code should i put in, thank you.
stvwlf
Member
Posted 10 months ago #
wrap all your titles in span tags like this
```
First Name [text* firstname 30/60]
Last Name [text* lastname 30/60]
```
Then add this to the bottom of your stylesheet - style.css.
span.title { width: 150px; display: block; float: left; }

You can adjust the width of 150px to whatever width you need to accommodate the widest title
tangerine3
Member
Posted 10 months ago #

well it almost worked it did move the box over but the code shows
http://www.chromehorserentals.com/wordpresstestsite/reservations/

First Name [text* firstname 30/60]

I must be missing something
stvwlf
Member
Posted 10 months ago #

please paste all the code from your contact form 7 form into a pastebin
http://pastebin.com/
and post the URL here
tangerine3
Member
Posted 10 months ago #

ugh, i have been to pastebin before but could not figure out how to use it! posted a help questions but never got a response. anyways is there a way to add a screenshot here? or another alternative. . .
stvwlf
Member
Posted 10 months ago #

I want to see your form code so I can work with it and accomplish what you are after. Screen shot will not do as I'm not going to type all of that in.

Open the pastebin screen in one browser tab and open the Contact form7 form admin page in another.

Highlight all the Contact form 7 code on your form and copy it.

then switch to the pastebin screen.
put the cursor in the field that says New Paste and paste what you copied into it.
Then scroll down and click the Submit button.
Then put your cursor in the browser address bar, highlight the URL that appears there, copy it, and paste it into a reply to this post. That's all you need to do.
tangerine3
Member
Posted 10 months ago #

well that was weird had to scroll down the screen before it would allow me to paste, anyway here you go thank you.

http://pastebin.com/e6QLJ3PK
stvwlf
Member
Posted 10 months ago #

OK...

I just put a considerable amount of time into getting your form fields all lined up. I did this on an install of the twentyten theme.

I can assure you that on my computer your form is perfectly lined up with this code and the CSS I made. It is quite likely it may not look like that on your theme on the first attempt. Please do not give up on what I posted if that happens. It will just need some tweaks to work with your theme.

You will find the revised code in this pastebin
http://pastebin.com/6aP2k88S

The pastebin contains revised Contact Form 7 code at the top, and
the necessary CSS at the bottom. The CSS must be added to you stylesheet. I suggest putting it at the bottom.

I suggest you create a new Contact Form 7 form and use my code in the new form. That way you still have your original code in a different form. You will of course change the shortcode that calls the form on the page on which you are displaying the form.

The reason you were seeing my original attempt as
text here
is because somehow your WordPress was running an html character encode on the code I sent you. What was actually in the browser was
& l t ; span class="title"& l t;text here& g t ;/span & g t ;
The HTML was seen by the browser as text, not as HTML, and so was not interpreted correctly. (had to space those apart to get the forum software to display them as characters and not as the < and > symbols)

I can assure you on my computer that is not happening. If it happens again on your computer it probably means your theme is incorrectly doing those conversions. That would need to be tracked down and modified.

Hope this works for you.
tangerine3
Member
Posted 10 months ago #

Hey actually it worked pretty good except there are little green arrows before every line and the text is white. This also happens when I select the bulleted style in my text editor. So somehow something is telling the lines to be bulleted items when <li> is used. Is that what the code <li> means? Is there another line break code I could use instead.

http://www.chromehorserentals.com/wordpresstestsite/reservations1/

other than that I think it is going to work, thank you.

stvwlf
Member
Posted 10 months ago #

add these lines to the section of CSS I added that starts with ul.reservations li and you should be all set

ul.reservations li {
    background-image: none;  ===> add this line to get rid of green arrows
    color: #000000;  ==> add this to make text black - change to your color choice
    padding-left: 0; ==> add this to move entire form over to the left where green arrows were
    clear: left;
    list-style-type: none;
}

tangerine3
Member
Posted 10 months ago #
this is what I have now under "ul.reservations li" at the beginning of the new code
```
ul.reservations li {
         background-image: none;
         color: #888888;
         padding-left: 0;
         clear: left;
         list-style-type: none;
}
```
The only thing it did fix was get rid of the green arrows? was i supposed to put it at the top?

http://www.chromehorserentals.com/wordpresstestsite/reservations1/
stvwlf
Member
Posted 10 months ago #

Hi

I don't see color: #888888 - it still says color: #000000
starts on line 1979 in style.css
All the rest looks right to me. The arrows are gone and the form starts more over to the left, which is what the padding-left: 0 was supposed to do - it did.

What else is not right?
tangerine3
Member
Posted 10 months ago #

ok yeah the #000000 was still there, so I did change it to #888888 and now it is a lighter gray than when I just type regular text using the text editor. I assumed my gray text throughout the site was #888888 because when I change to that using the text editor it comes out that darker gray. I guess it is something else built into the text editor that came with the theme, i don't know what it is now.

Also how do i get the font size of the form to match the size that is like the top and bottom paragraphs. And the Insurance options run to the next line. Again thanks for your time.
tangerine3
Member
Posted 10 months ago #

well one thing i just found out is that after i change my css file and update it and then hit view page it won't show any changes unless i hit refresh page in my browser . . ..is that normal?
stvwlf
Member
Posted 10 months ago #
well one thing i just found out is that after i change my css file and update it and then hit view page it won't show any changes unless i hit refresh page in my browser . . ..is that normal?

Yes. The browser doesn't know that you just updated the page it is open to. Thus you must refresh each time.

#888888 is what is displaying on your page. Pick a darker color. #666666 and #333333 are common lighter shades of black and gray colors.

increase font size
```
ul.reservations li span {
  display: block;
  float: left;
  font-size: 16px;  ==> add this line
  width: 210px;
}
```
I don't have time right now to work out getting the insurance checkboxes all on one line. I will try to get back to that some time today.

stvwlf
Member
Posted 10 months ago #

try adding this additional CSS:

ul.reservations li.insurance .wpcf7-checkbox input,
ul.reservations li.insurance .wpcf7-list-item,
ul.reservations li.insurance p {
   float: left;
}
ul.reservations li.insurance p { margin: 5px 0; }
ul.reservations li.insurance .wpcf7-list-item {
   margin-left: 0;
}
ul.reservations li.insurance span.wpcf7-checkbox {
   width: 380px;
}

Reply

You must log in to post.

WordPress.org

Forums

getting text fields to line up (16 posts)

Reply

About this Topic

Tags

Code is Poetry