Ways to split a Web Form into two separate Columns

I'm brand new to HTML5. Zoho CRM has generated an HTML5 code that allows me to embed a web form on my page with the CRM's "Create Account" process. It functions properly, but I would like to arrange the fields into two columns instead of one.

What adjustments should I make?

The current fields (in one column) include:

  <div class='zcwf_row'><div class='zcwf_col_lab' style='font-size:20px; font-family: "Open Sans";'><label for='First_Name'>Nombre<span style='color:red;'>*</span></label></div><div class='zcwf_col_fld'><input type='text' id='First_Name' name='First Name' maxlength='40'></input><div class='zcwf_col_help'></div></div></div>
  <div class='zcwf_row'><div class='zcwf_col_lab' style='font-size:20px; font-family: "Open Sans";'><label for='Last_Name'>Apellido<span style='color:red;'>*</span></label></div><div class='zcwf_col_fld'><input type='text' id='Last_Name' name='Last Name' maxlength='80'></input><div class='zcwf_col_help'></div></div></div>
  // Remaining input fields here...

Is there a way I can split a Web Form into two separate columns?

htmlcsszoho

Answer №1

If you're looking to organize your form layout using CSS, consider the 'columns' property:

form {
  columns: 2;
}
<form>
  <div class='zcwf_row'>
    <div class='zcwf_col_lab' style='font-size:20px; font-family: "Open Sans";'><label for='First_Name'>Name<span style='color:red;'>*</span></label></div>
    <div class='zcwf_col_fld'><input type='text' id='First_Name' name='First Name' maxlength='40'></input>
      <div class='zcwf_col_help'></div>
    </div>
  </div>
  // Additional form fields...
</form>

If you prefer a different layout flow, like having contents go from left to right and then down, explore flex or grid options:

Here's an example of using a simple grid layout:

form {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
<form>
  <div class='zcwf_row'>
    <div class='zcwf_col_lab' style='font-size:20px; font-family: "Open Sans";'><label for='First_Name'>Name<span style='color:red;'>*</span></label></div>
    <div class='zcwf_col_fld'><input type='text' id='First_Name' name='First Name' maxlength='40'></input>
      <div class='zcwf_col_help'></div>
    </div>
  </div>
  // Additional form fields...
</form>

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

Utilizing jQuery to incorporate a radio input function in a POST request

When the Index.php page button is pressed, data is sent to the Resultx.php script page, which then responds with an asynchronous call back on the same Index.php page. index.php <script> $(document).ready(function() { $("#input_form").subm ...

javascriptphphtmljqueryjquery-events

How can I use Laravel to showcase a CSS class named 'products' in a 3x3 grid layout, along with fetching product data from the database?

Currently, I am utilizing Laravel to showcase information regarding products being sold on the homepage. Each product includes a small image and various attributes. However, as of now, each product is displayed in a single row format, making it challengi ...

phphtmlcsslaravel

Retrieve the HTML of the chosen option within the parent form utilizing vanilla JavaScript, not the document object

I have a HTML form that is repeated multiple times on a webpage. In order to avoid targeting every specific field name of each form, I am creating a general-use JavaScript script that detects where it was triggered and obtains the values of the fields (tra ...

javascripthtml

Navigating through a diagonal path

Struggling to craft a diagonal navigation system similar to the images below. Despite its seemingly simplicity, I'm stuck investing too much time in figuring it out. My goal is for the menu container to smoothly reveal from right to left when clicking ...

javascripthtmlcss

Updating the icon image for navigation in AngularJS

I am looking to update an image upon navigating to /tab1. This can be achieved using 'ng-click' with AngularJS routing. Sample HTML snippet: <div class = "body" ng-controller = "app"> <div class = "column1"> <div cla ...

javascriptangularjshtml

Dynamic Dropdown Navigation with Bootstrap 4

I noticed that the default Bootstrap (4.0) dropdown animation is not present. How can I achieve a "slide" open effect similar to the collapsed navbar? It should be mentioned that the dropdown is located within the navbar. You can find the codeply example ...

jquerycssbootstrap-4navbardropdown

Why does my PHP script execute before receiving any input?

As a newcomer to PHP from C#, I am currently developing a whois module for a website. However, I'm encountering an issue where my PHP page automatically runs and displays the message "invalid input" before I even click the button. Can anyone explain w ...

phphtml

What steps are involved in incorporating a machine learning algorithm from a Python file into a Django website?

I'm currently utilizing the random forest algorithm in Python to make predictions about college dropouts. The algorithm has been completed, and now I need to integrate the file into a website using Django. However, I am facing issues as the imported f ...

pythonhtmldjangocsvmachine-learning

Create a PHP script that utilizes the DOMDocument class to parse and manipulate a table

Struggling to maintain the inner HTML tags while displaying rows in an HTML table? Can't seem to get it right and the tags keep getting stripped out? What's the best approach to ensure each row retains its inner HTML tags? Below is the code I ha ...

phphtmlhtml-tabledomdocument

What is the process for incorporating an HTML tag into the text of an ASP.NET label?

When working on a news page, I encountered an issue trying to create hyperlinks based on a specific value in a database field. Some news articles have longer content, and in those cases, I wanted to create a hyperlink. However, for shorter content, there w ...

c#htmlasp.net

Escaping from its container, text breaks free with the power of CSS

Experiencing difficulties with CSS flex layout that are proving challenging to resolve. HTML: <div class="image-view"> <div class="info"> <span class="label title">d37ci4x.jpg</span> <span class="label scale ...

htmlcsslayouttextflexbox

A guide on traversing HTML elements and extracting their corresponding id attributes

Using selenium, I am able to navigate to a webpage and save the page source in the variable html1. from selenium import webdriver driver = webdriver.PhantomJS() driver.get("http://google.com") html1 = driver.page_source The page source of http://google ...

pythonhtmlseleniumweb-scraping

Can the input type of an input element inside a table cell be altered by referencing the table cell's id using javascript?

Need help with changing the type of an input element from password to text using JavaScript? The input element is located inside a <td> with the id "pass". Also looking to add a checkbox that toggles displaying or hiding the password value. I'm ...

javascripthtml

What is the best way to prevent double clicks when using an external onClick function and an internal Link simultaneously

Encountering an issue with nextjs 13, let me explain the situation: Within a card component, there is an external div containing an internal link to navigate to a single product page. Using onClick on the external div enables it to gain focus (necessary f ...

javascripthtmlreactjstypescriptnext.js

Can the width of an offcanvas panel be adjusted?

Currently implementing the offcanvas component in my project, but I'm looking to make the panel wider than the standard size. Specifically, I want it to be 35% width. I've attempted to utilize the panelClass NgbOffcanvasOptions property, however, ...

htmlangularbootstrap-5ng-bootstrap

Can a child Div remove a section of the parent div's border?

Is it possible to use CSS alone to make a child div's border "override" or "remove" part of its parent's border? I want certain rows to have no border without changing the DOM structure. Keep in mind that the innerNoBorder div has no background ...

css

Pulling a Bootstrap 3 Navbar from the side

I was in the process of developing a navigation bar for my Bootstrap website when I had an idea to make it more visually appealing by having it slide out from the left side of the page. In order to achieve this effect, I decided to proceed with the followi ...

jqueryhtmlcsstwitter-bootstrap-3

What causes it to transition to a new line instead of maintaining consistency?

Hey there, I'm new to HTML/CSS and recently started using a bootstrap template for my small company's website. Everything has been going smoothly except for one section that I'm struggling with. Instead of trying to explain it, I'll jus ...

htmlcss

Aligning the remaining elements once they are hidden using display: none

Note: I am implementing Flexbox in my design When resizing the screen, I utilize "display:none" to eliminate some elements that won't fit as the layout adjusts. However, once these elements are removed, the remaining ones aren't horizontally cen ...

cssresponsive-designflexboxcentering

How can I properly integrate jQuery libraries, along with CSS, in a create-react-app project?

I'm currently working on incorporating the select2 jquery library into my React application, which was created using create-react-app. After adding jquery and select2 to my package.json file, I was able to get the javascript functionality to work pro ...

jquerycssnpmwebpackcreate-react-app