How to customize a contact form on Parallax theme?

Store Design
1

Hi all, I was hoping someone might be able to help.

I am new to HTML (i understand the basics, but am by no means an expert!), and am trying to customise a contact form on my Shopify site. I’m using Parallax theme.

I’ve managed to add in the two new fields I need (a phone & dropdown subject menu), but have been unable to configure them to appear correctly.

I want them to mirror the design of the two form fields above them (name & email), but here is how they currently look:

KU24_0-1661578406176.png
KU24_0-1661578406176.png1464×669 110 KB

I have attempted to use styling inputs, which does allow them to appear correctly on desktop, but the fields then move completely out of alignment on mobile view.

Can anyone assist?

Many thanks in advance!

2

@KU24 - can you please share this contact page link? it will need css

3

Hi @suyash1 , sure - thanks for looking at it!

Here is the link: https://katie-mckenna-photography.myshopify.com/pages/test-contact-page

4

@KU24 - add this css to the very end of your styles.css and check

.contact__form-phone{flex: 1 1 auto;    margin-right: 20px;}
.contact__contact-option{flex: 1 1 auto;}

.contact__form-phone label, .contact__form-phone input {padding-right:0 !important;}

suyash1_0-1661738527144.png
suyash1_0-1661738527144.png1366×768 161 KB

5

Thankyou so much, that worked and it’s all looking great now!

Really apreciate your help with this!

6

How did you add a image next to the contact form?

7

Hi @Kkateleigh , I added the image in the Page editor. Just look for the ‘insert image’ button and you can upload any image you like :slightly_smiling_face: