Receive two inputs in each row and adjust the width of the submit button

As I embark on my journey of coding my very first website, everything has been running smoothly until a recent obstacle caught me off guard. My current challenge lies in creating a contact form that seamlessly integrates with the home page.

I envision having two sets of Name and Email input fields placed side by side, allowing for some breathing space between them while ensuring the text area maintains the same width across both boxes. Additionally, I aim to position the send button below the message box on the right-hand side.

One problem I've encountered is the inability to add a placeholder on the textarea without it looking out of place compared to the other inputs. Any assistance on this matter would be greatly appreciated.

Despite numerous attempts, none have proven effective in overcoming this roadblock. Therefore, I turn to this community in hopes that someone might suggest a solution I haven't explored yet.

I've included my code below for reference, enabling others to gain a clearer understanding of the issue at hand.

htmlcssforms

Answer №1

Utilize the grid-gap property to create space between elements and the grid-column property to position elements either to the left or right. Explore the snippet below for reference. 

.section4 {
  background: whitesmoke;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-wrap {
  max-width: 75vw;
}

.form-text {
  font-family: Oswald;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
}

.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

.contact-full {
  grid-column: 1/3;
}

.contact,
input,
textarea,
button {
  padding: 1.5vh;
  margin: 0;
}

button {
  font-family: Oswald;
  font-weight: 700;
  text-transform: uppercase;
  position: static;
  font-size: 2.5vh;
  background: transparent;
  border: 10px solid transparent;
  border-image: #c71d6f;
  border-image: linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
  border-image: -moz-linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
  border-image: -webkit-linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
  border-image-slice: 1;
  grid-column: 2;
}

button:hover {
  color: #f4f4f4;
  background: #c71d6f;
  background: linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
  background: -moz-linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
  background: -webkit-linear-gradient(bottom right, #c71d6f 0%, #e36a64 100%);
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Home</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Oswald:500,600,700" rel="stylesheet">
</head>

<body>
  <div class="section4">
    <form>
      <h2 class="form-text">let's work together!</h2>
      <div class="contact-wrap">
        <div class="contact">
          <input type="name" id="name" placeholder="Name" required>
          <input type="name" id="company" placeholder="Company">
          <input type="email" id="email" placeholder="Email" required>
          <input type="tel" id="telephone" placeholder="Contact">
          <textarea class="contact-full" name="message" rows="10" placeholder="Message"></textarea>
          <button class="button">Send</button>
        </div>
      </div>
    </form>
  </div>
</body>

</html>

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

Can someone help with the issue where the CSS field position changes when the "X" icon appears, as mentioned in the title? I am looking for a solution to fix this problem

https://i.sstatic.net/Cj8Bm.pngWhen trying to add an additional field on a page, the "X" icon appears inline with the field and causes the other fields to adjust their position. However, I want the new field to remain in the same position as the title. How ...

cssvue.js

What could be causing my modal to not animate from the center of the screen?

I am aiming to have my .modal div class smoothly scale from 0 to 1 right in the center of the screen instead of starting at the bottom right and then moving to the center before settling in its final position. I have checked various resources like MDN docu ...

cssanimationtransformscale

Can a 1D array be utilized to create a 2D grid in React?

I needed to display a one-dimensional array in a 2D grid format with 3 rows and 3 columns. The array itself contains numbers from 1 to 9. const array = Array.from({ length: 9 }, (_, i) => i + 1); In my React component, I have it rendering as a series o ...

javascripthtmlcssreactjs

Troubleshooting Bootstrap Social Buttons: Background Color and Hovering Challenges

I've been working with Bootstrap to design social buttons for Facebook and LinkedIn. However, I'm facing an issue where setting the background color to white for the buttons doesn't cover them properly. The white background extends beyond th ...

htmlcssbootstrap-4

Implementing Materialize CSS functionality for deleting chips

I've been attempting to extract the tag of a deleted chip from the div within the Materialize chips class, but I'm hitting roadblocks. My failed attempts so far: $('.chips').on('chip.delete', function(e, chip){ console.lo ...

javascriptjqueryhtmlcssmaterialize

Ways to calculate the total order amount when the quantity is modified

The order entry form includes columns for product name, price, and quantity: <table id="order-products" class="mobileorder-table"> <colgroup> <col style="width: 80%;"> <col ...

javascripthtmlcssjavascript-objectsonblur

Using Javascript to dynamically enable or disable an input field depending on the choice made in another field

I attempted to implement the solution provided in this answer for my code: How do I disable input field when certain select list value is picked but unfortunately, it is not working as expected. The scenario involves an HTML select field with the ID &apos ...

javascriptjqueryhtml

What is the best way to preload all videos on my website and across different pages?

I specialize in creating video websites using HTML5 with the <video> tag. On my personal computer, the website transitions (fadeIn and fadeOut) smoothly. However, on my server, each page seems to take too long to load because the videos start preloa ...

javascriptjqueryhtmlvideo

Tips for properly styling the input type range element

Is there a way to fix the issue with my input type="range" styling using linear-gradient when the variable is set to 75%? It seems to be behaving incorrectly. body{ background: green; } .wrapper { width: 20vmin; } input { widt ...

css

Python allows for the sending of HTML content in the body of an email

Is there a way to show the content of an HTML file in an email body using Python, without having to manually copy and paste the HTML code into the script? ...

pythonhtmlemail

What is the method for creating a HTML test report using Python incorporated into my code?

from selenium import webdriver import unittest, time, re import HTMLTestRunner class TestAutomation(unittest.TestCase): def setUp(self): self.errors = [] self.driver = webdriver.Chrome() self.driver.get("http: ...

pythonhtmltestingreport

Requesting the user to repeatedly input their birth year until it is less than the current year

Can anyone help me figure out how to display a prompt until the user enters a birth year that is less than the current year? I've tried using a loop in my code, but I'm having trouble getting it right. Any assistance would be greatly appreciated. ...

javascripthtmlprompt

Generate a random word using Typed.js

Can Typed.js generate a random word for output? $(function(){ $(".element").typed({ strings: ["Lorem", "Ipsum", "Dolor"], typeSpeed: 0 }); }); The output should be one of the following words. (Lorem / Ipsum / Dolor) ...

javascriptjqueryhtmlrandomtyped.js

Issue with ASP.NET ConfirmButtonExtender Missing Background in Internet Explorer

Recently, I noticed an issue with the ConfirmButtonExtender on a Cancel button. It was working perfectly fine in Firefox with a semi-transparent background and a simple modal popup. But when I tested it on IE, it showed a generic JavaScript-style alert box ...

c#htmlcssasp.net-ajax

The choice always seems to gravitate towards the initial option without any clear explanation

echo "<td>Language</td>"; echo "<td><select id='language' name='language'> <option value=''>Select...</option> <option value='en_US'>English(US)</o ...

phphtmloptional-parameters

List generated by BeautifulSoup contains duplicate entries - require a distinct linked list

I am currently attempting to compile a list of unique year links from a specific website (referenced below). Whenever I use the append function, it generates a lengthy list with repeated entries. My goal is to obtain a list that only consists of distinct ...

pythonhtmllistweb-scrapingbeautifulsoup

Validating group radio buttons that have been checked

I possess: <div class="group"> <input type="radio" name="myradio" value="1">a <input type="radio" name="myradio" value="2">b </div> <div class="group"> <input type="radio" name="two" value="3">a <input ty ...

javascriptjqueryhtml

Securing Your Data with PHP and MySQL Password Protection

Currently, I am in the process of developing a web application that features a login and registration system. The application caters to two main types of users: clients and one admin. So far, I have successfully implemented a registration page for clients ...

phphtmlmysqlsecurity

Use Jquery to locate and modify any occurrences of the div text through find and replace

Here is a screenshot I captured. https://i.stack.imgur.com/VUGEg.png This content resides inside my div. My goal is to replace "" with "-" and "" with "-" wherever they occur within the div, and then send this modified content via ajax using jQuery since ...

jqueryhtmlcssajax

What are the steps to add 8 columns to the second row in my table?

this is an example of HTML code that showcases a table structure with multiple rows and columns. You can view the full code snippet here. The table includes different sections, such as section1, section2, section3, and section4 in the first row (tr). In t ...

javascriptjqueryhtmlcss