How to center the "submit" button in contact form - Debutify theme

[Daeron]

Hello,

I have a contact form in Debutify theme and I’d like the “submit” button (“Poslat →” in my case) to be centered.

Any suggestions for the code edit please?

Thank you!

• Daniel

>     
      
>         
          
            # {{ page.title }}>           
        
>         {%- unless page.content == blank -%}>           >             {{ page.content }}>           
        {%- endunless -%}> >         {%- form 'contact', class: 'form-vertical' -%}>           {%- if form.posted_successfully? -%}>             

          {{ 'contact.form.post_success' | t }}>             

      {%- endif -%}> >           {%- if form.errors -%}>             {{ form.errors | default_errors }}>           {%- endif -%}> >           >             
          >                                     id="ContactFormName">                      name="contact[{{ 'contact.form.name' | t }}]">                      placeholder="{{ 'contact.form.name' | t }}">                      autocapitalize="words">                      autofocus="autofocus">                      value="{%- if form.name -%}{{ form.name }}{%- elsif customer -%}{{ customer.name }}{%- endif -%}">>             

        >               >                                     class="{%- if form.errors contains 'email' -%}input-error{%- endif -%}">                      name="contact[email]">                      placeholder="{{ 'contact.form.email' | t }}">                      autocorrect="off">                      autocapitalize="off">                      pattern="^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+$">                      required="required">                      aria-required="true">                      value="{%- if form.email -%}{{ form.email }}{%- elsif customer -%}{{ customer.email }}{%- endif -%}">                   {%- if form.errors contains 'email' -%}>                 aria-invalid="true">                   {%- endif -%}>>             

      >                            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 -%}">> >           >           > >           >         {%- endform -%}>       

{% schema %}> {> “name”: “t:sections.contact_content.name”,> “settings”: > }> {% ends> ~~~

[PageFly-Victor]

Hi @Daeron can you send me the url of that page?

[Daeron]

https://childo.cz/pages/kontakt

the password is snejks

It’s in Czech language, so you need to click “Zadejte pomocí hesla” in the upper right corner to put in the password.

[Daeron]

I guess the code that interests me is hidden in the contact-content.liquid, right?

This part:

<button type="submit" class="btn btn--primary small--full">
<span class="btn__text">
{{ 'contact.form.send' | t }}
<span class="{{ settings.icon }} icon-width" aria-hidden="true">arrow_forward</span>
</span>
</button>

 

[PageFly-Victor]

@Daeron

This is PageFly - Advanced Page Builder. I would love to give you some recommendations

Add this css at the bottom

Online Store->Theme->Edit code

assets-> theme.scss.css

@media screen and (min-width: 600px) {

.btn–primary {

position: relative;

left: 40%;

}

}

Hope you find my answer helpful!

Regards,

PageFly

[Daeron]

@PageFly-Victor It did work, but it changed the alingment of all buttons through my site ant that is not desired. I need only that one button in the Contact form.

[debutifysupport]

Hey @Daeron ,

To center only the contact us form button, please add the following code to the theme editor > theme settings > custom style/script > custom style.

#contact_form button{
margin:auto;
display:flex;
}