How can I design a form that resembles the sign-in form used by Google?

Question

How can I design a form that resembles the sign-in form used by Google?

Currently, I am in the process of creating a contact form for a website that is inspired by the design of Google's material sign-in form.

I have successfully implemented an effect where clicking on the input field causes the label to change its position, size, and color. However, this effect only works with input fields that have the "required" attribute.

Unfortunately, I have not been able to achieve the same effect with default input fields.

The CSS code for this form can be found below:

.civildaily-form {
  display: block;
}

.civildaily-form .form-group {
  position: relative;
  margin-bottom: 2rem;
}
/* More CSS code */

Here is an example of how the form markup looks like:

<form class="civildaily-form">
  <div class="form-group">
    <input type="text" class="form-control" required>
    <label for="Name">Name</label>
  </div>
  
  /* Additional form inputs */

</form>

javascript html css material-design

Answer 1

Answer №1

It appears that by adding left: 0; to your css for .civildaily-form label and removing conflicting css selectors for the :valid pseudo class on your input elements, you can resolve the issue.

CSS alone cannot reliably determine whether an input is empty across all major browsers (the :valid pseudo-class only applies to required fields, or a workaround using the :placeholder-shown pseudo-class with limited browser support). Using JavaScript is a more dependable method to detect empty inputs and apply appropriate label positioning styles (such as adding a .filled class in the CSS to work alongside JavaScript).

Below is a working code snippet:

const fields = document.querySelectorAll('.form-control');
for (const field of fields) {
  field.addEventListener('blur', (event) => {
    const sel = event.target;
    if (sel.value) {
      sel.classList.add('filled');
    } else {
      sel.classList.remove('filled');
    }  
  });
}

.civildaily-form {
  display: block;

/* Remaining CSS code provided here */
}

<form class="civildaily-form">
  <div class="form-group">
    <input class="form-control" id="name" type="text" placeholder="" required>
    <label for="name">Name</label>
  </div>
  <div class="form-group">
    <input class="form-control" id="email" type="email" required>
    <label for="email">Email</label>
  </div>
  <div class="form-group">
    <input class="form-control" id="phone" type="text">
    <label for="phone">Phone</label>
  </div>
  <div class="form-group">
    <input class="form-control" id="company" type="text">
    <label for="company">Company Name</label>
  </div>
</form>

Answer 2

It appears that by adding left: 0; to your css for .civildaily-form label and removing conflicting css selectors for the :valid pseudo class on your input elements, you can resolve the issue.

CSS alone cannot reliably determine whether an input is empty across all major browsers (the :valid pseudo-class only applies to required fields, or a workaround using the :placeholder-shown pseudo-class with limited browser support). Using JavaScript is a more dependable method to detect empty inputs and apply appropriate label positioning styles (such as adding a .filled class in the CSS to work alongside JavaScript).

Below is a working code snippet:

const fields = document.querySelectorAll('.form-control');
for (const field of fields) {
  field.addEventListener('blur', (event) => {
    const sel = event.target;
    if (sel.value) {
      sel.classList.add('filled');
    } else {
      sel.classList.remove('filled');
    }  
  });
}

.civildaily-form {
  display: block;

/* Remaining CSS code provided here */
}

<form class="civildaily-form">
  <div class="form-group">
    <input class="form-control" id="name" type="text" placeholder="" required>
    <label for="name">Name</label>
  </div>
  <div class="form-group">
    <input class="form-control" id="email" type="email" required>
    <label for="email">Email</label>
  </div>
  <div class="form-group">
    <input class="form-control" id="phone" type="text">
    <label for="phone">Phone</label>
  </div>
  <div class="form-group">
    <input class="form-control" id="company" type="text">
    <label for="company">Company Name</label>
  </div>
</form>

How can I design a form that resembles the sign-in form used by Google?

Answer №1

Similar questions

Looking to remove an item from an array using Redux?

Tips for solving the problem of TSX error where 'ReactNode' cannot be assigned with 'void' type

A guide on verifying if two arrays of integers are permutations using JavaScript

Trouble with implementing useEffect to assign value to TextField

StartsWith() function failing when used in conjunction with takeWhile()

Save the language code (ISO 639) as a numerical value

Troubleshooting custom filtering with jQuery Datatables across different tables is presenting challenges

Overlapping divs are observed when utilizing absolute positioning in CSS

Implement a callback function in React using hooks after changing the state

What is the best way to display input data (with names and values) in a textarea field

Steps to exit browser in WebDriver Sampler in JMeter and halt execution

The maximum value of the slider corresponds to the total number of elements in the array

Angular Commandments: Understanding the Directives

Aligning the right menu of Ant Design from the Layout component

Tips for managing blur events to execute personalized logic within Formik

Identify and sort JSON objects based on keys with multiple values

Avoid making GET requests when clicking on a link

The URL in $.mobile.changePage has not been updated

Is there a way to connect a CSS external file that is saved on Dropbox?

Angular JS Troubleshooting: Application Not Functioning Properly