Hello, I've been coding a whole contact us in html for the past two days because I didn't like the contact default page. It was looking really good but since I was going to have to convert it to PHP of some kind to submit the data to a server. Since shopify won't let me do that I'm just using the default liquid and going from there. Since it's very similar to HTML I'm just putting bits and pieces in there. One big problem I'm having is the labels. Here is my code.
{% if page.content.size > 0 %}
<div class="rte">
{{ page.content }}
</div>
{% endif %}
<div class="contact-form form-vertical">
{%- assign formId = 'ContactForm' -%}
{% form 'contact', id: formId %}
{% include 'form-status', form: form, form_id: formId %}
<div class="row">
<div class="column" style="width:45%">
<h2 style="font-family:Gotham;">Cincinnati IT Service</h2>
<p font-family: 'Gotham';></p>
</div>
<div class="column" style="border: 0.25em solid rgba( 0, 0, 0, 0.2 ); padding-left:20px;
background-color: #fff;">
<h2 style="font-family:Gotham; margin-top:20px; margin-bottom:-10px; text-align: center;"> Contact Us For A Quote </h2>
<form method="POST" action="parse_form.php">
<div class="form-row">
<div class="form-group">
<label for="{{ formId }}-name">{{ 'contact.form.name' | t }}</label>
<input type="text" id="{{ formId }}-name" name="contact[{{ 'contact.form.name' | t }}]" placeholder="Your name.." style="font-family: 'Gotham'; margin-bottom:20px; padding:10px 10px 10px 10px; border:0; border-radius:4px; background-color: #ADD8E6; color: #000000;" value="{% if form[name] %}{{ form[name] }}{% elsif customer %}{{ customer.name }}{% endif %}">
</div>
<div class="grid__item medium-up--one-half">
<label for="{{ formId }}-email">{{ 'contact.form.email' | t }} <span aria-hidden="true">*</span></label>
<input
type="email"
id="{{ formId }}-email"
name="contact[email]"
autocorrect="off"
autocapitalize="off"
value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}"
aria-required="true"
{%- if form.errors contains 'email' -%}
class="input--error"
aria-invalid="true"
aria-describedby="{{ formId }}-email-error"
{%- endif -%}
>
{%- if form.errors contains 'email' -%}
<span id="{{ formId}}-email-error" class="input-error-message">
<span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
{% include 'icon-error' %}
<span>{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.</span>
</span>
{%- endif -%}
</div>
</div>
<label for="{{ formId }}-phone">{{ 'contact.form.phone' | t }}</label>
<input type="tel" id="{{ formId }}-phone" name="contact[{{ 'contact.form.phone' | t }}]" pattern="[0-9\-]*" value="{% if form[phone] %}{{ form[phone] }}{% elsif customer %}{{ customer.phone }}{% endif %}">
<label for="{{ formId }}-message">{{ 'contact.form.message' | t }}</label>
<textarea rows="10" id="{{ formId }}-message" name="contact[{{ 'contact.form.message' | t }}]">{% if form.body %}{{ form.body }}{% endif %}</textarea>
<input type="submit" class="btn" value="{{ 'contact.form.submit' | t }}">
{% endform %}
The row and columns classes were created by me and put in theme.css so that's fine. The problem I'm experiencing is the name part. This will apply to every other input but basically I want to get rid of the "Name" label above the input and just leave the placeholder within it. I do not know how to get rid of the label without ridding of some sort of important value. Please help, thanks.
