Change of contact form fields

[Atronil]

hi

i'm using simple template and added contact form to my site

https://briefcasedeals.com/pages/contact-us

how i can change place of fields , i want name and email will be at same line and message will be below them and width of the message will be width of ( name and email) and send button also will be wide as well.

thanks

[Atronil]

could u help to change contact form to like this

[KetanKumar · Accepted solution]

@Atronil 

Thanks for post 

can you please upload this code 

<!-- /templates/page.contact.liquid -->

<!-- /templates/page.contact.liquid -->
<h1 class="small--text-center">{{ page.title }}</h1>

<div class="rte">
{{ page.content }}
</div>

<div class="contact-form form-vertical">
{% form 'contact' %}

{% if form.posted_successfully? %}
<p class="form--success">
{{ 'contact.form.post_success' | t }}
</p>
{% endif %}

{{ form.errors | default_errors }}
<div class="grid">
<div class="grid__item medium-up--one-half small--one-whole">   
<label for="ContactFormName" class="label--hidden">{{ 'contact.form.name' | t }}</label>
<input type="text" id="ContactFormName" name="contact[{{ 'contact.form.name' | t }}]" placeholder="{{ 'contact.form.name' | t }}" autocapitalize="words" value="{% if form[name] %}{{ form[name] }}{% elsif customer %}{{ customer.name }}{% endif %}">
</div>

<div class="grid__item medium-up--one-half small--one-whole">   
<label for="ContactFormEmail" class="label--hidden">{{ 'contact.form.email' | t }}</label>
<input type="email" id="ContactFormEmail" name="contact[email]" placeholder="{{ 'contact.form.email' | t }}" autocorrect="off" autocapitalize="off" value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}">
</div>

<!-- <label for="ContactFormPhone" class="label--hidden">{{ 'contact.form.phone' | t }}</label>
<input type="tel" id="ContactFormPhone" name="contact[{{ 'contact.form.phone' | t }}]" placeholder="{{ 'contact.form.phone' | t }}" pattern="[0-9\-]*" value="{% if form[phone] %}{{ form[phone] }}{% elsif customer %}{{ customer.phone }}{% endif %}">
-->

<div class="grid__item medium-up--one-whole small--one-whole">  
<label for="ContactFormMessage" class="label--hidden">{{ 'contact.form.message' | t }}</label>
<textarea rows="5" id="ContactFormMessage" name="contact[{{ 'contact.form.message' | t }}]" placeholder="{{ 'contact.form.message' | t }}">{% if form.body %}{{ form.body }}{% endif %}</textarea>
</div>

<div class="grid__item medium-up--one-whole small--one-whole">
<input type="submit" class="btn" value="{{ 'contact.form.send' | t }}">
</div>
</div>
{% endform %}
</div>

Css 
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.contact-form input {
    width: 100%;
}

[Atronil]

thanks very much

[itsSelman]

When someone submits an email on contact us, who receives the email?

How can I change the receipent email?

[KetanKumar]

@itsSelman 

Thanks for post 

if you have received anther email can you please use any app or custom form 

[itsSelman]

Thanks for the reply, 

I have received no mail, I try to submit an email myself but still don't know where that email goes?

[KetanKumar]

@itsSelman 

Thanks 

can you please check Shopify admin  customer 

[EasyAus]

Hi Ketan,

I'm trying to copy the contact form code but I just want to change the Message field to Business Name

The following is the current code for the field;

 <label for="contactFormMessage" class="hidden-label">{{ 'contact.form.message' | t }}</label>
<textarea rows="10" id="contactFormMessage" name="contact[body]" placeholder="{{ 'contact.form.message' | t }}">{% if form.body %}{{ form.body }}{% endif %}</textarea>

Can you help please.

[KetanKumar]

@EasyAus 

https://shopify.dev/tutorials/customize-theme-add-fields-to-your-contact-form