Text in contact page

Solved
silvanadiaz
Excursionist
13 0 6

Hi, how can i add some text in the contact page before the form.

ThanksScreen Shot 2021-07-25 at 20.58.55.png

suyash1
Shopify Partner
3241 363 531

@silvanadiaz - you have 2 options

1 - please go to contact page from backend pages and add text in the page or

2 - directly add text to contact template

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
KetanKumar
Shopify Partner
22379 2269 8350

@silvanadiaz 

if possible to share code so i will add code 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
silvanadiaz
Excursionist
13 0 6

This is the code

 

<div class="column-text-section-parent">
<div class="container">
<div class="row">
<div class="col-md-12 grid-item">

<header class="SectionHeader SectionHeader--center section-title ">

<h1 class="SectionHeader__Heading Heading u-h1"> {{section.settings.heading}}</h1>

</header>

</div>
</div>


<div class="row">
{%for block in section.blocks%}
<div class="col-md-4 col-sm-6 grid-item ">
<div class="column-text-section-child ">
<h1 class="column-text-heading u-h2"> {{block.settings.column-text-heading}}</h1>
<p class="column-text-sub-heading u-h2"> {{block.settings.column-text-subheading}}</p>
</div>
</div>
{%endfor%}
</div>
</div>
</div>


<style>

.section-title{
padding: 40px 12px;

}



</style>

{% schema %}
{
"name": "column Text",
"settings": [
{
"id": "heading",
"type": "text",
"label": "Heading"

}

]
,

"presets": [
{
"name": "column Text"

}
] ,

"blocks": [
{
"type": "text",
"name": "column Text",
"settings": [

{
"id": "column-text-heading",
"type": "text",
"label": "column Heading"
},
{
"id": "column-text-subheading",
"type": "text",
"label": "column Sub Heading"
}
]
}
]
}
{% endschema %}


{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

0 Likes
silvanadiaz
Excursionist
13 0 6

Hi, this is the code, i want to add some text before de form

<div class="column-text-section-parent">
<div class="container">
<div class="row">
<div class="col-md-12 grid-item">

<header class="SectionHeader SectionHeader--center section-title ">

<h1 class="SectionHeader__Heading Heading u-h1"> {{section.settings.heading}}</h1>

</header>

</div>
</div>


<div class="row">
{%for block in section.blocks%}
<div class="col-md-4 col-sm-6 grid-item ">
<div class="column-text-section-child ">
<h1 class="column-text-heading u-h2"> {{block.settings.column-text-heading}}</h1>
<p class="column-text-sub-heading u-h2"> {{block.settings.column-text-subheading}}</p>
</div>
</div>
{%endfor%}
</div>
</div>
</div>


<style>

.section-title{
padding: 40px 12px;

}



</style>

{% schema %}
{
"name": "column Text",
"settings": [
{
"id": "heading",
"type": "text",
"label": "Heading"

}

]
,

"presets": [
{
"name": "column Text"

}
] ,

"blocks": [
{
"type": "text",
"name": "column Text",
"settings": [

{
"id": "column-text-heading",
"type": "text",
"label": "column Heading"
},
{
"id": "column-text-subheading",
"type": "text",
"label": "column Sub Heading"
}
]
}
]
}
{% endschema %}


{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

KetanKumar
Shopify Partner
22379 2269 8350

@silvanadiaz 

thanks for code but sorry it's not contact page code

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 Partner | 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
silvanadiaz
Excursionist
13 0 6

Sorry, this one is

 

<div class="Container">
<header class="PageHeader">
<div class="SectionHeader SectionHeader--center">
<h1 class="SectionHeader__Heading Heading u-h1">{{ page.title }}</h1>
</div>
</header>

<div class="PageContent PageContent--narrow">
<div class="Rte">
{{- page.content -}}

{%- form 'contact', class: 'Form Form--spacingTight' -%}
{%- if form.posted_successfully? -%}
<p class="Alert Alert--success">{{ 'contact.form.successfully_sent' | t }}</p>
{%- endif -%}

{%- if form.errors -%}
<div class="Form__Alert Alert Alert--error">
<ul class="Alert__ErrorList">
{%- for field in form.errors -%}
{%- if field == 'form' -%}
<li class="Alert__ErrorItem">{{ form.errors.messages[field] }}</li>
{%- else -%}
<li class="Alert__ErrorItem"><strong>{{ form.errors.translated_fields[field] }}</strong> {{ form.errors.messages[field] }}</li>
{%- endif -%}
{%- endfor -%}
</ul>
</div>
{%- endif -%}

<div class="Form__Group">
<div class="Form__Item">
<input type="text" class="Form__Input" name="contact[name]" aria-label="{{ 'contact.form.name' | t }}" placeholder="{{ 'contact.form.name' | t }}" required {% if customer %}value="{{ customer.name }}"{% endif %}>
<label class="Form__FloatingLabel">{{ 'contact.form.name' | t }}</label>
</div>

<div class="Form__Item">
<input type="email" class="Form__Input" name="contact[email]" aria-label="{{ 'contact.form.email' | t }}" placeholder="{{ 'contact.form.email' | t }}" required {% if customer %}value="{{ customer.email }}"{% endif %}>
<label class="Form__FloatingLabel">{{ 'contact.form.email' | t }}</label>
</div>
</div>

{%- for block in section.blocks -%}
{%- assign field_title = block.settings.title -%}

{%- if field_title == blank -%}
{%- capture field_title -%}Custom field {% increment custom_field %}{%- endcapture -%}
{%- endif -%}

{%- if block.type == 'text' -%}
<div class="Form__Item">
{%- if block.settings.use_long_text -%}
<textarea name="contact[{{ field_title | escape }}]" cols="30" rows="10" class="Form__Textarea" aria-label="{{ block.settings.title | escape }}" placeholder="{{ block.settings.title | escape }}" {% if block.settings.is_required %}required{% endif %}></textarea>
<label class="Form__FloatingLabel">{{ block.settings.title | escape }}</label>
{%- else -%}
<input type="text" class="Form__Input" name="contact[{{ field_title | escape }}]" aria-label="{{ block.settings.title | escape }}" placeholder="{{ block.settings.title | escape }}" {% if block.settings.is_required %}required{% endif %}>
<label class="Form__FloatingLabel">{{ block.settings.title | escape }}</label>
{%- endif -%}
</div>
{%- elsif block.type == 'dropdown' -%}
{%- assign values = block.settings.values | split: ',' -%}

{%- if values == empty -%}
{%- continue -%}
{%- endif -%}

<div class="Form__Item">
<div class="Form__Select Select Select--primary">
{%- render 'icon' with 'select-arrow' -%}

<select name="contact[{{ field_title | escape }}]" title="{{ block.settings.title | escape }}" required>
<option value="" disabled selected>{{ block.settings.title | escape }}</option>

{%- for value in values -%}
{%- assign trim_value = value | strip -%}

<option value="{{ trim_value | escape }}">{{ trim_value | escape }}</option>
{%- endfor -%}
</select>
</div>
</div>
{%- endif -%}
{%- endfor -%}

<div class="Form__Item">
<textarea name="contact[body]" cols="30" rows="10" class="Form__Textarea" aria-label="{{ 'contact.form.message' | t }}" placeholder="{{ 'contact.form.message' | t }}" required></textarea>
<label class="Form__FloatingLabel">{{ 'contact.form.message' | t }}</label>
</div>

<button type="submit" class="Form__Submit Button Button--primary Button--full">{{ 'contact.form.submit' | t }}</button>
{%- endform -%}
</div>
</div>
</div>

{% schema %}
{
"name": "Contact page",
"settings": [],
"blocks": [
{
"type": "text",
"name": "Text field",
"settings": [
{
"type": "text",
"id": "title",
"label": "Name",
"default": "Custom field"
},
{
"type": "checkbox",
"id": "use_long_text",
"label": "Use long text",
"default": false
},
{
"type": "checkbox",
"id": "is_required",
"label": "Field is required",
"default": false
}
]
},
{
"type": "dropdown",
"name": "Dropdown",
"settings": [
{
"type": "text",
"id": "title",
"label": "Name",
"default": "Custom field"
},
{
"type": "text",
"id": "values",
"label": "Values",
"info": "Separate each value by a comma.",
"default": "value 1, value 2, value 3"
}
]
}
],
"default": {
"blocks": [
{
"type": "text",
"settings": {
"title": "Your phone (optional)"
}
}
]
}
}
{% endschema %}

KetanKumar
Shopify Partner
22379 2269 8350

This is an accepted solution.

@silvanadiaz 

no rush thanks for code 

please add code here

<div class="Container">
<header class="PageHeader">
<div class="SectionHeader SectionHeader--center">
<h1 class="SectionHeader__Heading Heading u-h1">{{ page.title }}</h1>
<p>put your content here...</p>
</div>
</header>

<div class="PageContent PageContent--narrow">
<div class="Rte">
{{- page.content -}}

{%- form 'contact', class: 'Form Form--spacingTight' -%}
{%- if form.posted_successfully? -%}
<p class="Alert Alert--success">{{ 'contact.form.successfully_sent' | t }}</p>
{%- endif -%}

{%- if form.errors -%}
<div class="Form__Alert Alert Alert--error">
<ul class="Alert__ErrorList">
{%- for field in form.errors -%}
{%- if field == 'form' -%}
<li class="Alert__ErrorItem">{{ form.errors.messages[field] }}</li>
{%- else -%}
<li class="Alert__ErrorItem"><strong>{{ form.errors.translated_fields[field] }}</strong> {{ form.errors.messages[field] }}</li>
{%- endif -%}
{%- endfor -%}
</ul>
</div>
{%- endif -%}

<div class="Form__Group">
<div class="Form__Item">
<input type="text" class="Form__Input" name="contact[name]" aria-label="{{ 'contact.form.name' | t }}" placeholder="{{ 'contact.form.name' | t }}" required {% if customer %}value="{{ customer.name }}"{% endif %}>
<label class="Form__FloatingLabel">{{ 'contact.form.name' | t }}</label>
</div>

<div class="Form__Item">
<input type="email" class="Form__Input" name="contact[email]" aria-label="{{ 'contact.form.email' | t }}" placeholder="{{ 'contact.form.email' | t }}" required {% if customer %}value="{{ customer.email }}"{% endif %}>
<label class="Form__FloatingLabel">{{ 'contact.form.email' | t }}</label>
</div>
</div>

{%- for block in section.blocks -%}
{%- assign field_title = block.settings.title -%}

{%- if field_title == blank -%}
{%- capture field_title -%}Custom field {% increment custom_field %}{%- endcapture -%}
{%- endif -%}

{%- if block.type == 'text' -%}
<div class="Form__Item">
{%- if block.settings.use_long_text -%}
<textarea name="contact[{{ field_title | escape }}]" cols="30" rows="10" class="Form__Textarea" aria-label="{{ block.settings.title | escape }}" placeholder="{{ block.settings.title | escape }}" {% if block.settings.is_required %}required{% endif %}></textarea>
<label class="Form__FloatingLabel">{{ block.settings.title | escape }}</label>
{%- else -%}
<input type="text" class="Form__Input" name="contact[{{ field_title | escape }}]" aria-label="{{ block.settings.title | escape }}" placeholder="{{ block.settings.title | escape }}" {% if block.settings.is_required %}required{% endif %}>
<label class="Form__FloatingLabel">{{ block.settings.title | escape }}</label>
{%- endif -%}
</div>
{%- elsif block.type == 'dropdown' -%}
{%- assign values = block.settings.values | split: ',' -%}

{%- if values == empty -%}
{%- continue -%}
{%- endif -%}

<div class="Form__Item">
<div class="Form__Select Select Select--primary">
{%- render 'icon' with 'select-arrow' -%}

<select name="contact[{{ field_title | escape }}]" title="{{ block.settings.title | escape }}" required>
<option value="" disabled selected>{{ block.settings.title | escape }}</option>

{%- for value in values -%}
{%- assign trim_value = value | strip -%}

<option value="{{ trim_value | escape }}">{{ trim_value | escape }}</option>
{%- endfor -%}
</select>
</div>
</div>
{%- endif -%}
{%- endfor -%}

<div class="Form__Item">
<textarea name="contact[body]" cols="30" rows="10" class="Form__Textarea" aria-label="{{ 'contact.form.message' | t }}" placeholder="{{ 'contact.form.message' | t }}" required></textarea>
<label class="Form__FloatingLabel">{{ 'contact.form.message' | t }}</label>
</div>

<button type="submit" class="Form__Submit Button Button--primary Button--full">{{ 'contact.form.submit' | t }}</button>
{%- endform -%}
</div>
</div>
</div>

{% schema %}
{
"name": "Contact page",
"settings": [],
"blocks": [
{
"type": "text",
"name": "Text field",
"settings": [
{
"type": "text",
"id": "title",
"label": "Name",
"default": "Custom field"
},
{
"type": "checkbox",
"id": "use_long_text",
"label": "Use long text",
"default": false
},
{
"type": "checkbox",
"id": "is_required",
"label": "Field is required",
"default": false
}
]
},
{
"type": "dropdown",
"name": "Dropdown",
"settings": [
{
"type": "text",
"id": "title",
"label": "Name",
"default": "Custom field"
},
{
"type": "text",
"id": "values",
"label": "Values",
"info": "Separate each value by a comma.",
"default": "value 1, value 2, value 3"
}
]
}
],
"default": {
"blocks": [
{
"type": "text",
"settings": {
"title": "Your phone (optional)"
}
}
]
}
}
{% endschema %}
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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing