Change of contact form fields

Solved
Atronil
Tourist
6 0 2

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

0 Likes
Atronil
Tourist
6 0 2

could u help to change contact form to like this

contact.jpg

KetanKumar
Shopify Partner
14204 1654 5113

This is an 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%;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Atronil
Tourist
6 0 2

thanks very much

0 Likes
itsSelman
Tourist
24 0 2

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

How can I change the receipent email?

KetanKumar
Shopify Partner
14204 1654 5113

@itsSelman 

Thanks for post 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
itsSelman
Tourist
24 0 2

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?

0 Likes
KetanKumar
Shopify Partner
14204 1654 5113

@itsSelman 

Thanks 

can you please check Shopify admin  customer 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
EasyAus
New Member
2 0 1

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
Shopify Partner
14204 1654 5113

@EasyAus 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes