Make Contact Form Scalable

HTML & CSS
1

Hey Good Folks,

I’ve been working on making my contact form mobile friendly, and I’ve hit a snag. The page is here, and the markup and CSS follow.

              <form name="contactform" method="post" action="ddc.php" class = "contact">

                <legend> Tell Us About Your Case (Y recuerde, con mucho gusto hablamos Espa&ntilde;ol)</legend>

                <p> (Asterisks denote required fields) </p>

                <table class="formTable" summary = "Estimates of drum repairs">

                <!-- <caption> Tell Us About Your Case (Y recuerde, con mucho gusto hablamos Espa&ntilde;ol) </caption> -->

	      <!-- <thead>
	      </thead> -->

	      <tbody>
                    <tr>
                      <td valign="top">

                        <label for="name" class = "fixedwidth">Name *</label>

                        <input  type="text" name="name"/>

                      </td>
                    </tr>

                    <tr>
                      <td valign="top">

                        <label for="email" class = "fixedwidth">Email *</label>

                        <input  type="text" name="email"/>

                      </td>
                    </tr>

                    <tr>
                      <td valign="top">

                        <label for="telephone" class = "fixedwidth">Phone #</label>

                        <input  type="text" name="telephone"/>

                      </td>
                    </tr>

                    <tr>
                      <td valign="top">

                        <label for="comments" class = "fixedwidth">Comments *</label>

                        <textarea  name="comments" cols="40" rows="8"> </textarea>
                      </td>

                    </tr>
	      </tbody>
                </table>
                <div>
                  <p> If we need to call you back for any more info, what would be the best time to call you on the number 
                      provided?  Please be sure to provide a number where you can actually be reached - phone tag is a waste 
                      of everybody's time.
                  </p>

                  <input type = "radio" name= "timetocall" id = "morning" value = "In the morning" /> 
                  <label for = "morning"> In the morning </label>

                  <br/>

                  <input type = "radio" name = "timetocall" id = "afternoon" value = "In the afternoon" />
                  <label for = "afternoon"> In the afternoon </label>

                  <br/>

                  <input type = "radio" name = "timetocall" id = "evening" value ="In the evening" />
                  <label for = "evening"> In the evening </label>

                  <br/>

                  <input type = "radio" name = "timetocall" id = "never" value = "never" />
                  <label for = "never"> Never </label>

                  <br/>

                </div>

                <p> <div class = "buttonarea"> <input type="submit" name="send" value="Send Your Message"/> </div> </p>

              </form>


form.contact fieldset {
	border:0.14706em solid navy; /* 1px */
	padding:0.7353em; /* 10px */
}

form.contact legend {
	font-weight: bold;
	font-size: 1em;
	color: navy;
	padding: 0.3846em; /* 5px */
}

form.contact {
	padding: 0 0;
	margin-top: -1.10295em; /* -15px */
	marginheight: 150%;
	border:0.2em solid #FFF; /* 2px */
	-moz-box-shadow:0 0 0.58825em 0.294125em #048; /* 8px 4px */
	-webkit-box-shadow:0 0 0.58825em 0.294125em #048; /* 8px 4px */
	box-shadow:0 0 0.58825em 0.294125em #048; /* 8px 4px */
	float:left;
	margin:0 0 1.1765em 1.1765em; /* 16px 16px */
	background:#eae8f2;
}

form.contact label {
	font-weight: bold;
	font-size: 1em;
	color: blue;
}

form.contact label.fixedwidth {
	display: block;
	width: 100%; /* 34.485%; 240px */
	float: left;
}

form.contact .buttonarea {
	background: #bed8F3 url(Images/taglineBackground.png) repeat-y right;
	text-align: center;
	padding: 0.294125em; /* 4px */
}

form.contact .buttonarea input {
	background: navy;
	color: white;
	font-weight: bold;
	padding: 0.375em; /* 5px */
	border: 0.075em solid white; /* 1px */
}

I think what’s going on is the page scales down OK until it reaches the 40 columns I’ve assigned the text area for the input. How do I correct this?

I’d also like the font for the legend and labels to scale down. I’ve tried percentages and ems, but that’s had no effect. Will I have to use media queries or is there an easier way?

Thank you in advance.

2

What I’ve been trying most recently is to drop columns and add rows as the viewport narrows, but I seem to be failing to access the textarea. I’ve tried the following for example:

@media screen and (max-width:400px){
	table.formTable textarea[name="comments"] {
        	cols = "36";
		rows = "10";
	}
}

Suggestions?

3

Have you tried using overflow? Scrollbars might be unsightly but should “work”. I don’t know how hidden would behave. Maybe it would move to display the cursor, or maybe the cursor would “go behind”, but it’s worth a play.

4

That’s not real CSS. Is it supposed to be or is this just pseudo-code?

1 Like
5

Just set the width and height and forget about the attributes as you can’t change those in CSS.

6

Where would that apply? I’ve tried the textarea, the table and the form, all with no results.

7

Which part is not CSS?

8

I tried setting the width of the form and the table before I looked for help. I tried with % and em and had no luck, but I have to figure out something, so maybe I’ll revisit the approach.

That’s really what I’m trying to do with the query, but I just don’t know what selector/s to use.

9

S[quote=“jcmcobra, post:6, topic:255830”]
with no results.
[/quote]

TBH, I didn’t know if it would work, only that it would be worth a try.

“cols” and “rows” are attributes, not CSS styles.

1 Like
10

TBH, I didn’t know if it would work, only that it would be worth a try.

“cols” and “rows” are attributes, not CSS styles.
[/quote]

I understood and agree it was worth a try. Got it about the attributes and styles. Thanks. Still trying to learn the basics.

11 
        	cols = "36";
		rows = "10";

This is not css, css syntax looks like:-

selector {  property: value ; }

Also cols and rows are not css properties.

1 Like
12

We were talking about the textarea so why would you try changing something else?

As I mentioned above you need to change the width of the textarea in your media query.

e.g.

@media screen and (max-width:480px){
textarea#scalableInput{
width:95%;
}
}

Now it will scale as the window gets smaller once the media query kicks in. CSS will always over-ride presentational html attributes

1 Like
13

You probably know the answer to that already - I don’t know what I’m doing.

I didn’t know the syntax for setting the width to the textarea, though I could have sworn I’d tried something like your example already. I don’t know what changing the width of the table and/or form will do to the textarea, so I tried it to see what would happen.

I’ve built on your suggestion and the results seem OK:

/* Adjust contact form's textarea and some of the font. */
@media screen and (max-width:480px){
        textarea#scalableInput{
                 width:95%;
        }
        input#phone, input#mail, input#nombre{
                 width: 75%;
        }

        form.contact legend, form.contact p{
	         font-size: .95em;
        }
}

I’ve been trying to adjust h2 right above the form with the following , but it’s having no effect:

h2 {
	margin-top:2em;
	margin-bottom:1em;
	padding-bottom:.6em;
	font:bold 120%/140% verdana,helvetica,sans-serif;
	color:#000;
}

@media screen and (max-width:480px){
	h2 {
		font:bold 100%/120% 'Sonsie One', verdana,helvetica,sans-serif;
	}
}

I’ve tried much lesser and greater values, but the header won’t respond. Don’t get it.

14

Are you sure it’s in your CSS? I added it here and the font-family changed at 480px as expected.

15

Yes, everything was in it’s proper place. I very recently learned to set my proxy server in “Development Mode” so as to not have to constantly clear the cache. In this particular instance, I also needed to clear the browser’s history. I’ll bet there’s a “Development Mode” for browsers I haven’t yet figured out.

I feel much better about this page.

Thank you my Gurus, one and all.

Namaste

16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.