Align labels and inputs to the right in the contact form

I'm having trouble aligning labels and inputs in my contact form. They need to be aligned to the right due to the Hebrew language. Here is a link to the fiddle of my code which is not working, you can see that the input boxes are not aligned. I need them to be aligned regardless of the length of the label name, and all input boxes need to be the same size. You can access the fiddle 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>Full Name <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>Email <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>Phone Number <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>Phone Number <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">Agree to sign up for our customer database</span>
                    <input type="checkbox" name="checkbox-973[]" value="Agree to sign up for our customer database" id="newINPUT_35" /></span></span></span>
    </p>
    <p id="newP_36">
        <input type="submit" value="Sign Up" 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>

Answer №1

Implement an HTML layout. Insert your components within it and ensure that the table content is right-aligned.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with margin-bottom in flexbox causing layout problems

My design conundrum lies within a flexbox structure where I desire specific elements to have varying amounts of spacing, prompting me to experiment with margins. At the top of my box, there is a header that requires some distance between itself and the su ...

Issue with image display in Chrome caused by Flexbox styling

I recently set up a flexbox for my website, but I'm encountering an issue in Chrome. When the viewport is smaller than the width of two images, the entire site zooms out and everything gets distorted. However, this problem doesn't occur in Firefo ...

Eliminating the border of a table that is contained within a cell

I am facing an issue with a nested table where I need to remove the borders from specific cells (around A and B). Here is the code snippet: <style> .withBorders tr td{ border: 1px solid black !important ; } .withBorders table. ...

Toggle between list elements using the inner text of the elements with jQuery

My issue lies in figuring out why my filter function isn't properly working for toggling li elements. JavaScript: $("#searchbox1").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#menulist li") ...

Outline of a Bootstrap row

I am trying to create a row layout where the background extends beyond the designated row area. The desired design is shown in the image, with an additional white space before the actual text of the row. However, when I attempt to start a new row and set ...

Diverse Browser Outcomes with jQuery CSS

Currently, I am in the process of developing an app that utilizes percentages as offset positions for ease of calculation. For a visual example, you can visit this link: http://jsfiddle.net/WeC9q/1/embedded/result/ Although the zooming feature functions ...

Having trouble positioning the button on the right side of the page and aligning the text in the center of the page

Having trouble positioning the button to the right of the page and aligning the text in the center, despite adding CSS properties such as float: right. <div id="project-heading" style = "margin-top: 0px; padding-bottom: 0px;margin-bottom: 0px ; padd ...

What is the best way to integrate images into the Shopify source code?

Looking for assistance here. I've been working on my theme in vscode and added a new section that is very simple (just text and an icon). It's working perfectly fine in Shopify cli. But when I tried to implement it on my Live theme, the icons ar ...

Is there a way to locate ComputedStyle elements using Nokogiri?

I am currently using Ruby along with Nokogiri to parse through HTML documents. I am looking to select all nodes that match a CSS class with the style attribute display: none, but the CSS class is unknown in advance. For example: <html> <body&g ...

Looking for Protractor CSS functionalities nodes

I tried the code below but am having trouble locating the "Login" text using Protractor: <div _ngcontent-c2="" class="align-center"> <img _ngcontent-c2="" alt="Autoprax" class="ap-logo" src="/images/apLogoSmall.svg" style="width: 100%"> ...

Tips for making the height of <select> and <button> elements equal even with padding

I'm trying to make sure that both the 'select' and 'button' elements have the same height. Check out my JS Fiddle here Here's the HTML code: <select><option>...</option></select><button>Button& ...

Various placements in Internet Explorer, Chrome, and Mozilla Firefox

Currently, I am working on a website project The layout appears to be fine in Internet Explorer and Firefox, but there seems to be an issue in Chrome. Due to the length of the code, it cannot be posted here, so I have included links to the files: HTML: ...

The button's color remains static in Internet Explorer despite attempts to change it using a linear gradient background image

I'm curious why the button appears grey in IE and turns blue on hover, rather than starting off blue and becoming darker blue when hovered over. I've managed to make it work in other browsers, but I'm struggling with the code for IE. Thank ...

The magic of CSS Pseudo-classes in Inline Styling

For the longest time, I've been under the impression that you cannot include in-line :hover{..} styles to an element. However, recently I stumbled upon this page which showcased examples like this. <a href="http://www.w3.org/" s ...

Struggling to reveal concealed items on a webpage using jQuery and attempting to cycle through an array without success

Looking to display or hide certain sections on a page based on specific conditions. I want to only show the sections of the page that contain words from the conditionsToShow array. function hideWorkflowConditions() { // initially hide the elements ...

Alter the background color of a table cell in Angular HTML depending on a boolean value

Attempting to use Angular ng-class to set the background color of a table cell. I'm referencing code snippets from these resources: Angular: How to change the color of cell table if condition is true Change HTML table cell background color using ...

Tips for setting up personalized breakpoints for a Bootstrap navbar

I am currently facing an issue with my navbar on tablet view. Despite implementing custom breakpoints to collapse the navbar at 1050, the menu bar is appearing in two rows instead of one. I have tried using the code below but it doesn't seem to be wor ...

What is the best way to remove this .click function?

My goal is to create a switch function where clicking the "on" button changes its CSS, and if the user then clicks on the "off" button, the CSS returns to normal. I also need the switch to default to the "on" position, but my attempts so far have been unsu ...

"Is an Ionic Top Navigation Bar the best choice for your

Creating an Ionic Top Navigation Bar Greetings! I am facing some challenges while trying to implement a Top Navigation Bar in my Ionic Project. Despite the lack of documentation on this specific topic, I am struggling to make it work properly. Your as ...

Exploring Laravel 4's CSS Routing

Attempting to connect my CSS document in Laravel 4 has been a bit challenging. The location of my CSS file is: public/css/style.css In the view, I have the following link: <link type="text/css" rel="stylesheet" href="{{URL::asset('css/style.css ...