We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

Adding drop down menu in contact form in dawn theme

Solved

Adding drop down menu in contact form in dawn theme

Alinear7
Excursionist
31 0 9

Hello, 

I have added the following code in the "contact.form.liquid" but I am still unable to see the drop-down menu in my contact form. Just have this space but not an option. 

 

Attaching both the images for refernece. Screenshot 2021-12-28 at 1.12.56 PM.pngScreenshot 2021-12-28 at 1.14.37 PM.png

Accepted Solution (1)
suyash1
Shopify Partner
11112 1367 1751

This is an accepted solution.

@Alinear7 - remove previous cs and add this

#ContactForm .field select {
    position: initial;
    width: 100%;
    padding: 1.5rem;
    line-height: calc(1 + .5 / var(--font-body-scale));
    letter-spacing: .04rem;
    color: rgba(var(--color-foreground),.75);
}
To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com

View solution in original post

Replies 16 (16)

suyash1
Shopify Partner
11112 1367 1751

@Alinear7 - can you please share this form page link?

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com
Alinear7
Excursionist
31 0 9
suyash1
Shopify Partner
11112 1367 1751

@Alinear7 - password not working

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com
Alinear7
Excursionist
31 0 9

sorry 
Yellow#7

suyash1
Shopify Partner
11112 1367 1751

@Alinear7 - please add this css to the very end of your base.css file and check, 

#ContactForm .field select {position: initial;}
To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com
Alinear7
Excursionist
31 0 9

I can now see the menu but it is a tiny menu. 

Not aligned to the whole form

Screenshot 2021-12-28 at 1.40.03 PM.png

suyash1
Shopify Partner
11112 1367 1751

@Alinear7 - make width 100% so entire css becomes

#ContactForm .field select {position: initial;     width: 100%;}
To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com
Alinear7
Excursionist
31 0 9

Screenshot 2021-12-28 at 1.44.59 PM.png

 

How to increase the height so it becomes the same as the rest of the form, with a rectangle box?
And change the drop-down icon to black

suyash1
Shopify Partner
11112 1367 1751

This is an accepted solution.

@Alinear7 - remove previous cs and add this

#ContactForm .field select {
    position: initial;
    width: 100%;
    padding: 1.5rem;
    line-height: calc(1 + .5 / var(--font-body-scale));
    letter-spacing: .04rem;
    color: rgba(var(--color-foreground),.75);
}
To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com
Alinear7
Excursionist
31 0 9

it's still the same

suyash1
Shopify Partner
11112 1367 1751

@Alinear7 - clear cache and other errors if any, code is not wrong, should look like this

 

suyash1_0-1640680112863.png

 

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com
Alinear7
Excursionist
31 0 9

tried saving it again. 

it says cannot save because of an error and i cannot seem to find the said error.

suyash1
Shopify Partner
11112 1367 1751

@Alinear7 - try again in sometime please, code is not wrong for sure

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com
Alinear7
Excursionist
31 0 9

it worked. thank you !

suyash1
Shopify Partner
11112 1367 1751

@Alinear7 - welcome, do let me know if you need anything else, you have my email below.

To build shopify pages use PAGEFLY | Contact me - suyash.patankar@gmail.com
muleymadness
Visitor
1 0 0

Where exactly do you add this line of code to get it to work?