Creating a unique HTML contact form in Insightly with properly aligned and spaced fields

Greetings, I must admit that my coding skills are quite limited and I am currently trying to navigate the world of HTML...

As I attempted to integrate a basic contact form code from Insightly (provided below/attached), I came across this discussion here

Despite my efforts, I am struggling to achieve the desired outcome. My goal is to have field titles aligned on the left with corresponding fields neatly lined up behind them, separated by some space. All while ensuring that the code remains compatible with Insightly...

Your assistance with this matter would be highly appreciated!

[EDIT 1]

Many thanks for your input! Using a bit of CSS (included here), I was able to somewhat align the elements as intended. However, I am encountering issues with clearing the fields upon submission and providing users with confirmation that their message has been sent. The current method involves an unsightly alert window, particularly noticeable in Chrome... Any suggestions on how to reset the fields upon submit and provide confirmation would be greatly valued! I tried implementing CSS techniques from here with no success...


<style type="text/css">
/*************CHSE Stylesheet ***/
body { 
    background-color: transparent;
    height:360px;
    width:280px;
}
textarea {
    height:70px;
    width:273px;
}
</style>
<style>
form label{
    display: inline-block;
    width: 100px;
    font-weight: bold;
}
</style>
<form name="insightly_web_to_contact" action="https://example.insight.ly/WebToContact/Create" method="post"<span style="font-size:14px;"><span style="color:#FFFFFF;font-weight:bold"><span style="font-family:Open Sans;"><input type="hidden" name="formId" value="xxxxxxxxxxxxxxx/xxxxxx=="/>
<span style="font-size:14px;"><span style="color:#FFFFFF;font-weight:bold"><span style="font-family:Open Sans;"><center>Quick Message:</center><br/>
<label for="insightly_firstName">First Name: </label><input id="insightly_firstName" name="FirstName" required="" type="text"/><br/><br/><label for="insightly_lastName">Last Name: </label><input id="insightly_lastName" name="LastName" required="" type="text"/><br/><br/><input type="hidden" name="emails[0].Label" required="" value="Work"/><label for="email[0]_Value">Email: </label><input id="emails[0]_Value" name="emails[0].Value" required="" type="text"/><br/><br/><label for="insightly_background">Message: </label><textarea id="insightly_background" name="background">
</textarea><br/><br/><center><input type="submit" value="Send Message"></center></form>  

Answer №1

To create visually appealing designs, utilizing DIVs and CSS is essential.

Start by using DIVs to group different input sections and split them into left and right sides using the float property.

For instance, you may want the labels and input fields to align neatly:

.formGroup{overflow:hidden;}
.formLeft {float:left;width:120px;}
.formRight{float:left;width:300px;}
#specialID{margin-top:50px;}
<form>
  <div class="formGroup">
    <div class="formLeft"><label for="firstName">First Name:</label></div>
    <div class="formRight"><input id="firstName" type="text" /></div>
  </div>
  <div class="formGroup">
    <div class="formLeft">Last Name:</div>
    <div class="formRight"><input type="text" /></div>
  </div>
  <div id="specialID">
    <textarea cols="50" rows="5"></textarea>
  </div>
</form>

The use of float is beneficial as it allows you to position the DIVs next to each other. However, keep in mind that this removes the vertical space occupied by the DIVs from the HTML layout. To address this, include overflow:____ in the parent DIV. In this example, overflow:hidden was used]. Test this by adding/deleting that line in the jsFiddle below.

You can also assign an ID to a specific DIV and style it with margins or paddings on all sides.

DIVs are considered block-level elements, similar to inserting a <br> tag at the end.

*Additionally, note that the <label> tag is mainly useful for interactive elements like buttons and checkboxes, allowing users to click on the label text to interact with the element.

Explore this demo on jsFiddle and experiment with the code provided above.

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

Placeholder fails to appear

After implementing some jQuery validation, I wanted to display a text as a placeholder when the user skipped out of an input field without entering anything. This is the code I wrote: $('input[type="text"]').on('blur', function() { ...

Scrolling to a specific anchor in a React webpage when the URL is opened in

Imagine having a component "Post" that contains multiple components "Comment". How can we make the application automatically scroll down to a specific comment when entering a URL like this: /post/:postId/#commentId The route for postId /post/:postId is a ...

Implementing a delay between two div elements using jQuery

I have two Divs with the class "sliced", each containing three images with the class "tile". When I animate using jQuery, I am unable to add a delay between the "sliced" classes. However, I have successfully added a delay between the "tile" classes. index ...

Issue with custom leaflet divIcon not maintaining fixed marker position during zoom levels

After creating a custom marker for leaflet maps, I noticed that it shifts position drastically when zooming in and out of the map. Despite trying to adjust anchor points and positions, the issue persists. I have provided the code below in hopes that someon ...

Having Trouble Adjusting Width of Inline List Items in Internet Explorer?

I am encountering an issue with an unordered list where the list items are displaying inline, and the layout is quite complex. To better explain, here is the Fiddle: Fullscreen: http://jsfiddle.net/spryno724/F5CFD/embedded/result/ Code: http://jsfiddle.n ...

Utilizing Angular 9's inherent Ng directives to validate input components within child elements

In my current setup, I have a text control input component that serves as the input field for my form. This component is reused for various types of input data such as Name, Email, Password, etc. The component has been configured to accept properties like ...

Is it possible to apply a gradient to a table row in Internet Explorer?

Whenever I hover over a specific table row in my table, I want the background to transition to a linear gradient. The CSS code is pretty simple: tbody.row-links tr:hover { background: ...standard multi-browser linear gradient code... color: #333C3 ...

Minimize the empty space at the top of the website

Looking to eliminate the extra space at the top of this particular website. After attempting to use firebug, I still can't pinpoint the source of this unwanted spacing. Your guidance would be greatly appreciated. Thank you! ...

Various results can be produced based on the .load() and .resize() or .scroll() functions despite using the same calculation methods

I'm currently working on developing my own custom lightbox script, but I've hit a roadblock. For centering the wrapper div, I've utilized position: absolute and specified top / left positions by performing calculations... top: _center_ver ...

What is the best way to conceal the outline in a popup window?

I have successfully implemented a popup/modal window using JavaScript, but now I need to find a way to hide the outline map container. The initialization code for the map is as follows: self.mapDialogOptions = { autoOpen: false, m ...

Cease the continuous reloading of a particular div while navigating

Currently, I am designing my personal website and have integrated a music player. However, a major issue that I am encountering is that whenever I navigate to another page, the music stops playing and restarts from the beginning. This interruption is quite ...

Selecting radio buttons using Bootstrap and JavaScript

I'm interested in incorporating this bootstrap radio selection feature into my JavaScript code. For example, if option1 is true, I want to execute a specific action... How can I achieve this? <div class="alert alert-info" role="alert"> < ...

Avoiding code duplication in Angular: tips for optimizing functions

Is there a way to avoid repeating the same for loop for a second variable and use only one? I'm trying to apply the "Don't repeat yourself" method here. Should I consider using an array? JS: var app=angular.module('xpCalc', []); app.c ...

Guide to building a personalized autocomplete feature in vue js

Presently, I am using the buefy autocomplete feature, but it is causing a few problems. In the DepartmentDetail.vue file <template slot-scope="props"> <div class="container is-fluid"> <b-loading :is-full-page=" ...

Display subpages of WordPress site in a dropdown menu on the navigation bar

Currently in the process of converting an HTML website to Wordpress, I am encountering a challenge. The issue lies in my attempt to add a drop-down feature to the navigation list using the wp_list_pages tag. As it stands, when hovering over the "products" ...

Unable to import CSV file

I'm currently in the process of developing a CSV editor that involves importing a CSV file and converting it into HTML tables. Below is the code I have been working on: <html> <head> <title></title> </head> <body& ...

Generating pages dynamically based on the number of divs

So, I've been using template literals to create and append new divs, but now I want to take it a step further. Is there a way to automatically generate a 'next page' when a certain number of divs have been appended in HTML & JS? Appreciate ...

Tips for applying multiple style properties to an element using JavaScript

I have been experimenting with different versions of this code in an attempt to modify a specific element for a coding challenge, but none of them seem to successfully change multiple styling properties of the element upon clicking on a button. Would great ...

When scrolling, the element displays a partial background color that extends beyond the width of the window

My website has sections with a background color applied. However, when the browser window width is less than the page width, a strange issue occurs - the background color only covers a portion of the elements equal to the window width starting from the lef ...

Tips on aligning vertically centered left and right floating objects without having to use the line height property

          Here is the issue I am facing http://jsfiddle.net/vT4YT/ <table><tr><td><div></div><div></div></td></tr></table> You can see that the options and row text are not vertic ...