Text Input fields of varying length w/in same form?

[owlinargyle]

I’m sure this is possible, I’ve just never had to do it before because most requesters like consistency.

I need to have one input field a different length than the others in the same form. I’m assuming I could apply a class to the input field in question, but I’m just not having much success making it happen. Maybe my approach is all wrong.

I want to apply a longer length to the <label id="prefPharm"> input text field, making it as long as the textarea below it.

Can someone take a look at my codepen and let me know if they have any suggestions?

Much appreciated! Thanks!

[owlinargyle]

Thanks Mottie. I’ll have to play around with that.

In the meantime, I found some info on the Contact Form 7 plugin for WordPress site about manipulating their form. The site, specifically the bit about “Style Specific Fields”.

Based on their info and some guesswork, I discovered something by accident. I don’t think this is going to be my solution, but I thought I’d share in case anyone was familiar with why it works.

I created a .special class in the CSS, and added the Class and Type to the Input markup like so:

<input class="special" type="text class:special" name="prefPharm" value="<%=PHARMACY2%>" id="prefPharm" />

If I take out just the class=”special” tag, it doesn’t work. If I take out just the type=”text class:special” it doesn’t work.

You can see what I mean here: New Codepen

[owlinargyle]

Mottie, I hope you see this. I tried your suggestion, and it works great for text fields. But can it be applied to a Select field?

I added an attribute .chgform select#Q2 based on what we did for the text field, but it’s not working. Maybe you can take a look.

Do I need to do something differently? Thanks!

New codepen…

[owlinargyle]

DOH! My Name and ID attributes are usually the same, so I thought you were using the Name attribute earlier. Thanks!

[Author]

Posts