Design Form in Horizontal Format

I am looking to modify a Fitproconnect form layout from vertical to horizontal without causing any issues with the functionality of the form.

Here is the code for the current vertical setup: https://jsfiddle.net/d5f808p0/

<form class="fitpro-listbuilder" method="POST" action="https://fitproconnect.com/Api/PublicContact/Subscribe/">
<div data-style-group="Main" style="padding: 20px; max-width: 280px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; margin: 0px auto; background: rgb(255, 255, 255); box-sizing: border-box; font-weight: normal; font-style: normal; position: relative;" data-sortable-column="" data-main-column="" data-default-input-style="1" data-default-button-style="2">
    <input type="hidden" name="ListBuilderID" value="fcc4e75c-230f-4b4b-8841-5ed1e4b2049e">



    <div data-replace-content-item="" data-item-name="First Name Input" data-item-type="input" data-can-edit="true" data-can-remove="false" data-can-move="true" data-disable-drag="true"><div><input type="text" value="" placeholder="First Name" name="SubscriberFirstName" onblur="fitProListBuilder.blur(this)" onfocus="fitProListBuilder.focus(this)" required="" data-required-name="First Name" style="box-shadow: none; width: 100%; margin-bottom: 10px; box-sizing: border-box; font-size: 15px; border: 1px solid rgb(153, 153, 153); color: rgb(0, 0, 0); padding: 10px; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;"></div></div><div data-replace-content-item="" data-item-name="Email Input" data-item-type="input" data-can-edit="true" data-can-remove="false" data-can-move="true">
        <input type="email" value="" placeholder="Email Address" name="SubscriberEmail" onblur="fitProListBuilder.blur(this)" onfocus="fitProListBuilder.focus(this)" required="" data-required-type="email" data-required-name="Email Address" style="box-shadow:none; font-size:15px; border:1px solid #999; color:#000; padding:10px; width:100%; margin-bottom:10px; box-sizing:border-box">
    </div>

    <div data-replace-content-item="" data-item-name="Submit Button" data-item-type="submit" data-can-edit="true" data-can-remove="false" data-can-move="true">
        <input type="submit" value="SUBSCRIBE" style="border:none; font-size:15px; outline:none; background:#ffba00; font-weight:bold; padding:15px; width:100%; text-align:center; box-sizing:border-box; cursor:pointer;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif" data-default-label="SUBSCRIBE">
    </div>

</div>

Desired horizontal setup

Thank you :)

javascripthtmlcssforms

Answer №1

Here is a brief summary of the essentials you will require:

.input-container {
  display: inline-block;
  width: 33%;
  padding: 0 10px;
  box-sizing: border-box;
}

.main-wrapper {
  max-width: none;
}

It's worth noting that there may be a more user-friendly way to style the "Fitproconnect" form interface, but nonetheless, I have made adjustments to your JSFiddle based on the mentioned guidelines. It is highly recommended to tidy up the HTML code, if feasible.

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

identifying which specific button was clicked using JavaScript/jQuery

All of the buttons on my page are identical - same title, same value, everything is the same. Is there a way for me to identify which specific button was clicked? ...

javascriptjquerybutton

lack of margin space for a specific container

Why is there no space between the two specific divs inside a row? I attempted to add gx-2 to the parent row, but it did not create space between those columns. To see the issue more clearly, run the code snippet on the full page. <link href="https:// ...

cssbootstrap-5

Leveraging Masonry.js with dynamically created divs using jQuery

Recently, I discovered Masonry.js and was excited to incorporate it into my projects. To test my skills, I decided to create a page that would display 16 divs with random heights and colors every time I clicked a button. However, I'm encountering an i ...

javascriptjqueryhtmlcssjquery-masonry

Narrowing down types within an array of objects

I am encountering an issue with the following code snippet: const f = (x: unknown) => { if (!x || !Array.isArray(x)) { throw new Error("bad"); } for (const y of x) { if (!y || typeof y !== "object") { throw new E ...

javascripttypescript

What is the process for displaying objects within an object using HTML?

I'm developing an app using Angular and Node.js. I have a complex data structure where one object (order) contains a list of objects (items), which in turn include another list of objects (product IDs). My goal is to properly display all this data wit ...

htmlnode.jsangularngfor

Struggles with handling asynchronous events in Angular

I'm currently working on a piece of code that iterates through an array containing 10 items. For each item, a request is made and the returned data is stored in another array. The entire process goes smoothly until reaching the line that contains $q.a ...

javascriptangularjsangular-promise

Surprise scrolling on a mobile device's screen

I am trying to figure out why there is a horizontal scroll bar on the page. I would like the content to fill the entire screen. https://i.sstatic.net/Y0ToM.png <section class="who" data-aos="fade-in"> <img class=" ...

htmlcssbootstrap-4

Browsing through JSON data and divvying up the contents into a trio of columns

I am facing a challenge with displaying a large number of JSON objects in an array in three columns on the front-end. What is the most efficient way to loop through these JSON objects and showcase them evenly across the three columns? These objects consist ...

javascriptjqueryjsonbackbone.jsunderscore.js

perform action following a $router.go in Vue

Looking for guidance on how to properly execute a function after navigating back using this.$router.go(-1). I attempted using nextTick, but it doesn't seem to be the right approach. Any suggestions? ...

javascriptvue.jsnuxt.js

What is the best way to limit the dimension of uploaded images to a specific height and width?

function validateImageDimensions(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $('#uploadForm + img').remove(); var img = $('<img> ...

jqueryhtmlimagefile-upload

Issue with Tooltipster plugin causing jQuery function not to trigger upon clicking the link within the tooltip

Recently, I've been experimenting with a jquery plugin called Tooltipster by inserting some HTML into the tip with an href link. The problem arises when I try to add a class to the href and fire a jquery function upon clicking it. No matter how much I ...

javascriptjqueryhtmlclicktooltipster

cannot access value part of key value pair within ng-repeat

Below is my HTML code with AngularJS integration: <div class="col-xs-1" style="width:130pt;background-color:#474747;border:2px ridge;"> <div class="container-fluid"> <ul class="nav"> <li class="dropdown" style ...

htmlangularjs

Adjust the size of the images in the Bootstrap navbar brand to make them resizable and move them

After some online research, I discovered a method to create a two-row Bootstrap navbar with the navbar-brand on its own row: <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBn ...

htmlcssbootstrap-4

Error: Unable to access 'map' property of an undefined variable in NextJS while using getStaticPaths

Currently facing an issue with dynamic routing in my Next.js project. I have a dynamic page [id].js and am trying to fetch data from an API. const res = await fetch(`myAPI`); const resData = await res.json(); const paths = resData.data.map((r) =&g ...

javascriptreactjsnext.jsfetch

What is the Most Effective Way to Arrange an Array of Objects Based on Property or Method?

Looking for ways to enhance my array sorting function, which currently sorts by property or method value. The existing code is functional, but I believe there's room for improvement due to redundant sections. optimizeSort(array: any, field: string): ...

javascriptarraystypescriptsorting

When hovering over A, the DIV element fails to appear

I'm encountering an issue with a specific page on my website () The problem lies with a .dropdown class that is supposed to display a DIV right below the header. In the source code, you can find it underneath <-- START DROPDOWN MENU -->. When I ...

htmlcsshover

Troubleshooting JavaScript issues: jQuery not functioning as expected

Although I consider myself experienced in programming, my venture into jQuery has hit a roadblock with this seemingly simple code: $(document).ready(function() { $('.footer').click(function() { $('.footer').fadeOut('sl ...

javascriptjqueryhtml

CSS-only checkboxes are not functioning properly in WordPress

I discovered some amazing pure CSS checkboxes that I wanted to implement (http://codepen.io/imohkay/pen/zFwec) on a WordPress website utilizing the Contact Form 7 plugin. However, after selecting these checkboxes, nothing seems to happen. To resolve this ...

htmlcsswordpresscontact-form-7

Adding an onClick event to a React MUI Fab: A Step-by-Step Guide

I'm attempting to incorporate the Floating Action Button from MUI5. Visit: https://mui.com/material-ui/react-floating-action-button/ for more details. Upon adding an onClick event to the button, no action is triggered. Below is my code snippet: <G ...

javascriptreactjsmaterial-ui

"Troubleshooting the issue of Angular JS ng-click HTML being assigned via InnerHTML but not properly invoking

I am currently working on an AngularJS phonegap application. The HTML in this application consists of a blank table that is dynamically populated using JS Ajax. The Ajax request retrieves the necessary data and fills the table using innerHTML. Each button ...

javascriptangularjsajaxcordovaphonegap