Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

We are using wordpress plugin contact form 7 and want to specify the width of the subject field (assume answer would apply to setting width of any field) and relocate the Your Email next to the Your Name field. Result would be Email and Name on one line, Subject full width underneath, Your Message underneath Subject. Thanks

share|improve this question

closed as off-topic by Pieter Goosen, birgire, toscho Jul 28 at 7:37

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

1  
Without further information this seem like a pure CSS question, which would be off topic per the faq –  s_ha_dum Jan 18 '13 at 20:34
    
Contact form 7 lets you put whatever HTML you need to into forms, look at it's admin screen. Also: show us what you've tried. Right now this sounds like an off topic CSS question, as @s_ha_dum said. –  chrisguitarguy Jan 18 '13 at 21:01
    
I am quite familiar with CSS, but couldn't locate it in the Appearance/Editor page. Nor could I find an .php files, so had no idea where to start. I see the admin screen which contains the shortcode, but I've never tried to modify shortcode, so didn't know where to find it. Any suggestions would help me get off the dime. Sorry if I'm in the wrong place. I thought I saw other contact form 7 questions here. –  user26221 Jan 19 '13 at 2:27
    
Give your CSS suggestion, I used Firefox's Tools/Web Developer/Inspect feature (so handy!) to at least change the width to match the comment block. I contribute it here for others to use: –  user26221 Jan 19 '13 at 2:35
    
/* Widen input field on form */ input[type="text"], textarea { width:80% –  user26221 Jan 19 '13 at 2:35

2 Answers 2

I din't try it, but have a try yourself:

Contact Form 7 uses something like this:

<p>Your Name (required)<br />
    [text* your-name] </p>

Instead of using paragraph tag (<p>) use span (<span>), and some inline CSS, like:

<span style="width: 48%; float: left; position: relative;">Your Name (required)<br />
    [text* your-name] </span>

<span style="width: 48%; float: left; position: relative;">Your Email (required)<br />
    [email* your-email] </span>

width: 48% will let you do some margin things. Then use a <div> to clear the float from all sides:

<div style="clear:both;"></div>

Then the other codes:

<p>Subject<br />
    [text your-subject] </p>

<p>Your Message<br />
    [textarea your-message] </p>

<p>[submit "Send"]</p>

So the whole bunch of codes will be:

<span style="width: 48%; float: left; position: relative;">Your Name (required)<br />
    [text* your-name] </span>

<span style="width: 48%; float: left; position: relative;">Your Email (required)<br />
    [email* your-email] </span>
<div style="clear:both;"></div>

<p>Subject<br />
    [text your-subject] </p>

<p>Your Message<br />
    [textarea your-message] </p>

<p>[submit "Send"]</p>

DON'T FORGET TO CHANGE THE SPECIFIC SLUGS LIKE your-email, your-subject SPECIFIC TO YOUR CONTACT FORM IDs.
Happy Coding!

share|improve this answer

Much more simple than the previous answer:

add classes to your input fields in the form builder - [text* your-name class:your-name]

Then style it in your CSS file.

Example:

#wpcf7-f613-p57-o1 form .your-name {width:48%;} - Where #wpcf7-f613-p57-o1 is the id of the form you're working with.

share|improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.