How to change my contact form on my product page

Store Design
, ,
1

Hi guys I need help with my contact form, i dont like the normal preset on it I was wondering If I could change it to maybe something like this?

BrickBuidz_0-1693452297341.png
BrickBuidz_0-1693452297341.png805×721 19.1 KB

this is how mine is looking at the moment

BrickBuidz_1-1693452320452.png
BrickBuidz_1-1693452320452.png1097×550 14.9 KB

any help is greatly appreciated! I only want this on the product pages

here is website:

https://brickbuildzz.com/products/large-custom-lego-set-600-1000-pieces

2

Hi @BrickBuidz

You can add this CSS code at the bottom of your base.css file to change layout of your contact page

.contact__fields { grid-template-columns: repeat(1,1fr) !important; }
#ContactForm .field:after { border-radius: 0 !important; border: none !important; box-shadow: none !important; }
#ContactForm .field { border-bottom: 1px solid #000; }
.field__label, .customer .field label { left: 0px !important; }
.field__input:focus, .select__select:focus, .customer .field input:focus, .customer select:focus, .localization-form__select:focus.localization-form__select:after {
box-shadow: none !important;
}

Screenshot 2023-08-31 at 10.50.50.png
Screenshot 2023-08-31 at 10.50.50.png1075×585 18.4 KB

3

Hey @BrickBuidz

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed