how to add form on the store home page

[gpinna]

Code

{% form ‘contact’, form_id: ‘308778’ %}
<!-First name, Email, Phone->
{% endform %}

I am using above code in Liquid code section but the form does not appear. Please can you help me code it correctly

[namphan]

Hi @gpinna ,

You can refer to the following link for the tutorial code, everything will display fine

[gpinna]

Hello @namphan should I copy and paste the entire code? I want users to fill their Name, Email ID and Mobile Number

[namphan]

Hi @gpinna ,

What theme are you using? please send me the code of the current contact form, I will check it

[gpinna]

{% form ‘contact’, form_id: ‘308778’ %}
<!-First name, Email, Phone->
{% endform %}

I am using Dawn theme and above code @namphan

[gpinna]

@namphan I am using Dawn theme and below is the code. Please help

{% form ‘contact’, form_id: ‘308778’ %}
<!-First name, Email, Phone->
{% endform %}

[namphan]

Hi @gpinna ,

Please change code:

{%- liquid
      assign contact_form_class = 'isolate'
      if settings.animations_reveal_on_scroll
        assign contact_form_class = 'isolate scroll-trigger animate--slide-in'
      endif
    -%}
    {%- form 'contact', id: 'ContactForm', class: contact_form_class -%}
      {%- if form.posted_successfully? -%}
        ## 
          {% render 'icon-success' %}
          {{ 'templates.contact.form.post_success' | t }}
        
      {%- elsif form.errors -%}
        
          ## 
            {% render 'icon-error' %}
            {{ 'templates.contact.form.error_heading' | t }}
          
        

        
          - {{ form.errors.translated_fields.email | capitalize }}
                {{ form.errors.messages.email }}
            
          
        

      {%- endif -%}
      
        

          
          
        

        
          
          
          {%- if form.errors contains 'email' -%}
            <small>
              {{ 'accessibility.error' | t }}
              
                {%- render 'icon-error' -%}
                {{- form.errors.translated_fields.email | capitalize }}
                {{ form.errors.messages.email -}}
              
            </small>
          {%- endif -%}
        

      

      
        
        
      

      
        
        
      

      
        
      

    {%- endform -%}

[gpinna]

@namphan
Firstly, thank you so much for this but I have the following :

1. I submitted the test form and received the error message “Liquid error (sections/custom-liquid line 10): Could not find asset snippets/icon-success.liquid Thanks for contacting us. We’ll get back to you as soon as possible.”
2. Can it be a pop-up form? Like, can it appear when someone opens the store? Currently, form is already present when someone opens the store

[namphan]

Hi @gpinna ,

Please change code:

{%- liquid
      assign contact_form_class = 'isolate'
      if settings.animations_reveal_on_scroll
        assign contact_form_class = 'isolate scroll-trigger animate--slide-in'
      endif
    -%}
    {%- form 'contact', id: 'ContactForm', class: contact_form_class -%}
      {%- if form.posted_successfully? -%}
        ## 
          {{- 'icon-success.svg' | inline_asset_content -}}
          {{ 'templates.contact.form.post_success' | t }}
        
      {%- elsif form.errors -%}
        
          ## 
            {{- 'icon-error.svg' | inline_asset_content -}}
            {{ 'templates.contact.form.error_heading' | t }}
          
        

        
          - {{ form.errors.translated_fields.email | capitalize }}
                {{ form.errors.messages.email }}
            
          
        

      {%- endif -%}
      
        

          
          
        

        
          
          
          {%- if form.errors contains 'email' -%}
            <small>
              {{ 'accessibility.error' | t }}
              
                
                  {{- 'icon-error.svg' | inline_asset_content -}}
                
                {{- form.errors.translated_fields.email | capitalize }}
                {{ form.errors.messages.email -}}
              
            </small>
          {%- endif -%}
        

      

      
        
        
      

      
        
        
      

      
        
      

    {%- endform -%}

[gpinna]

@namphan now there is no error message but can the form pop up? Right now the form is already available on the store/page. Thanks for your help. Appreciate it !!

[namphan]

Hi @gpinna ,

It only works for display, if you want a popup you will need to change the code and this is a complex requirement.

Do you want it to show popup automatically, or via button?

[gpinna]

@namphan Can we have the pop-up say sign up to get Rs 500 off ? Pop-up automatically might look good and it should go off when someone closes it. If its not easy to code to make it appear automatically, then let’s leave the form like this. Please let me know. Thanks for your help. Appreciate it

[namphan]

Hi @gpinna ,

You can use some apps, it will help you do everything better. Refer Yotpo Email Marketing & SMS , qikify Sales Pop up & Proof , …

Or you can also hire an expert to customize it based on Shopify contact form.

I hope it helps!

[gpinna]

@namphan Sure, thank you so much.Appreciate it. If I want to add "sign up to get Rs 500 off " on the existing form, where should I write in the code?

How much do you charge if you to help as an expert for creating code for pop-up form

[namphan]

Hi @gpinna ,

Do you want to use the default Shopify newsletter form?

Please describe the design in detail in private message, I will check it for you

[gpinna]

@namphan Sure, will message