Swap placeholder text based on resolution (media query)

As a pure CSS solution, we could have two <input>s – having different placeholders – which are shown in different screen sizes – Example here:

input.large { display: inline-block; }
input.small { display: none; }

@media (max-width: 399px) { 
  input.large { display: none; }
  input.small { display: inline-block; }
}

<input type="email" name="email[]" class="required email large" id="mce-EMAIL" placeholder="Your Email">
<input type="email" name="email[]" class="required email small" placeholder="Join our newsletter">

Important notes:

1. In this case we should make sure that the id of our two inputs are different. Besides, If id is added to <input> just because of its usage for label elements, we could just wrap the input by label instead.

2. Using more than one input which have the same name, will override the name/value pair in HTTP request method.

One possible solution is to use an array name value for name attribute, (as example above) and handle it at server-side (It’s better to keep name values in lowercase).

Alternatively, we could disable the hidden input in order to prevent its value from being sent to server:

$('input:hidden').prop("disabled", true);

Using JavaScript in a Pure CSS Solution? Maybe… maybe not… but nowadays no websites in the modern world are empty of JavaScript. If it helps to get rid of the problem, it’s alright to get hands a little dirty!.