How to customize Improved Contact Form app?

Highlighted
Excursionist
42 0 8

I just recently installed the Improved Contact Form app. Setting it up was easy but I have no idea how to edit the html so that the format fits correctly on the contact us page. I'm using the Venture theme. It's placed all the way to the left, can barely see the Send Message button.

Here's how it currently looks like,

 

I want to make my contact form to look something like this,

0 Likes
Highlighted
Shopify Staff
Shopify Staff
17 0 3

Hey ebizguy!

Liz here, A Shopify Support Guru :)

Venture uses a full page width to display content so its pulling content all the way to the left based on the rules of the theme.

You can edit this though with a bit of HTML coding within the apps settings under Contact Page Settings. In this example I've followed Ventures class rules and included a <div class="content-block"> before the form ( in the Before Form section) and before <div id="col-main" class="content"> and then closed the </div> in the After Form section. This pushed the form off the wall of the page but kept the content left justified. You can of course go further and style it whichever way you like and add any class rules to your theme.scss.liquid file in Edit HTML/CSS section within your theme settings.

Do let me know if you have any questions! Hope this helps :)

 

Liz L | Shopify Guru

Highlighted
New Member
6 0 0

Hi Liz L (and anyone else working on this),

I'm having trouble getting this fix to work in the Debut theme.  Do you know if I need completely different code for that theme?  Or perhaps I am not entering the commands correctly?  Note that I do not know html, css, etc.

When I enter the code as shown, my contact form remains fully flush to the left (like it was for ebizguy).

Thanks for any help you can offer!

0 Likes
Highlighted
Shopify Partner
3 0 0

Hi Jacki,

The code that works for debut is:

<div class="page-width">

put that into the "before" box and put

</div>

in the after box.

I took a screenshot and added it as well, for clarity sake.

0 Likes
Highlighted
New Member
6 0 0

Thank you!  Worked like a charm :-)

0 Likes
Highlighted
Shopify Partner
3 0 0

Happy to help!

0 Likes
Highlighted
New Member
11 0 0

Hi,

Is there any way to adjust the size of the form field?

 

Thanks

Pat 

0 Likes
Highlighted
New Member
1 0 0

Hi Liz

I have same problem with my theme(My Theme is District).

The contact us page looks like this.

 

theme problem.png

 

I need Position in the middle.

 

Looking forward your help.

 

Regards

Daniel

 

0 Likes
Highlighted
New Member
2 0 0

Hi, how are you?

Thanks for your help .

Ive used the code "<center>"  in the before section and its centered everything well,

but I was wondering how to enlarge the fields or at least the comment one.

 

Thank you !!

0 Likes