0

I have problem with aligning labels and inputs in contact form. Need to be aligned to right because of Hebrew language. Here is the fiddle of my code which is not working , you can see input boxes are not aligned. Need that to be aligned no matter what length of label name is, all input boxes need to be same size . link here http://jsfiddle.net/dw4eqn91/

<form action="/contact-us/#wpcf7-f174-p7-o1" method="post" id="newFORM_1">
<div id="newDIV_2">
    <input type="hidden" name="_wpcf7" value="174" id="newINPUT_3" />
    <input type="hidden" name="_wpcf7_version" value="4.2.2" id="newINPUT_4" />
    <input type="hidden" name="_wpcf7_locale" value="en_US" id="newINPUT_5" />
    <input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f174-p7-o1" id="newINPUT_6" />
    <input type="hidden" name="_wpnonce" value="607b79a577" id="newINPUT_7" />
</div>
<div id="newDIV_8">
    <p id="newP_9">
        <span id="newSPAN_10">*</span>שם מלא <span id="newSPAN_11"><input type="text" name="your-name" size="40" id="newINPUT_12" /></span>
    </p>
    <p id="newP_13">
         <span id="newSPAN_14">*</span>מייל <span id="newSPAN_15"><input type="email" name="your-email" size="40" id="newINPUT_16" /></span>
    </p>
    <p id="newP_17">
         <span id="newSPAN_18">*</span>טלפון <span id="newSPAN_19"><input type="text" name="your-subject" size="40" id="newINPUT_20" /></span>
    </p>
    <p id="newP_21">
         <span id="newSPAN_22">*</span>טלפון <span id="newSPAN_23"><input type="text" name="your-subject1" size="40" id="newINPUT_24" /></span>
    </p>
    <p id="newP_25">
    </p>
    <p id="newP_26">
        <span id="newSPAN_27"></span>
        <textarea name="textarea-863" cols="40" rows="10" id="newTEXTAREA_28">
        </textarea>
    </p>
    <p id="newP_29">
         <span id="newSPAN_30">*</span><span id="newSPAN_31"><span id="newSPAN_32"><span id="newSPAN_33"><span id="newSPAN_34">מאשר/ת רישום למאגר לקוחות</span>
                    <input type="checkbox" name="checkbox-973[]" value="מאשר/ת רישום למאגר לקוחות" id="newINPUT_35" /></span></span></span>
    </p>
    <p id="newP_36">
        <input type="submit" value="להרשמה" id="newINPUT_37" /><img src="http://www.lavierez.co.il/wp-content/plugins/contact-form-7/images/ajax-loader.gif" alt="Sending ..." id="newIMG_38" />
    </p>
</div>
<div id="newDIV_39">
</div>

Stefan L
  • 39
  • 1
  • 5
  • Is your site using a responsive grid? – vanburen Aug 10 '15 at 00:00
  • The trick is to use full justification in an inline-block. Your code is a bit complex, but can you do something with [this simple fiddle](http://jsfiddle.net/MrLister/w47q3eLj/)? I think I can rework that into an answer if you can use it. – Mr Lister Aug 10 '15 at 08:30

1 Answers1

0

Use html structure. Added your elements in it and just align table contents to right.

Domain
  • 11,562
  • 3
  • 23
  • 44