Solved

Debut theme- contact form color and button

embroiderysage
Explorer
57 1 19

Hello,

 

I am using the Debut theme and would love to make the following changes to the contact form (I can do basic coding)...

 

  • I want to change the input boxes to the color #f6f6f6 no outline (I would like this to stay the same color when people are typing info).
  • I want to make all items mandatory (starred). 
  • I want to move the send button to the right hand side.

 

Here is my URL:

 

https://t85liys4thg8cm23-28221308963.shopifypreview.com/pages?preview_key=d909ba171f7e1e0b223f6f3796...

 

Thanks!

Accepted Solutions (2)

Kinjaldavra
Shopify Partner
2302 570 1422

This is an accepted solution.

hello @embroiderysage  please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

 

form.contact-form input#ContactForm-name ,form.contact-form input#ContactForm-email ,form.contact-form textarea#ContactForm-message{
   background: #f6f6f6 !important;
    border: transparent !important;
}

 form.contact-form [type="submit"]{
    right: 0;
    position: absolute;
}

 

 

View solution in original post

Kinjaldavra
Shopify Partner
2302 570 1422

This is an accepted solution.

hello @embroiderysage  please insert below code Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

 

  form.contact-form textarea#ContactForm-message{
    background: #f6f6f6 !important;
    border: transparent !important;
}

 

 

View solution in original post

Replies 6 (6)

suyash1
Shopify Partner
9077 1129 1479

@embroiderysage - background color is laready set to #f6f6f6 and to make fields mandatory need to edit contact form code

to make button on right side add this to the very end of your styles.css file, but I doubt if it works as it is added via iframe and we can not apply css to iframe content

 

@media only screen and (max-width: 767px){
.form_submit_div {
    text-align: right;
}
}

 

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI

Kinjaldavra
Shopify Partner
2302 570 1422

This is an accepted solution.

hello @embroiderysage  please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

 

form.contact-form input#ContactForm-name ,form.contact-form input#ContactForm-email ,form.contact-form textarea#ContactForm-message{
   background: #f6f6f6 !important;
    border: transparent !important;
}

 form.contact-form [type="submit"]{
    right: 0;
    position: absolute;
}

 

 

embroiderysage
Explorer
57 1 19

Hi- thanks for the reply! That almost works! The button changed and the top two inputs did as well. Just the Message input did not change (see image below):

Screen Shot 2021-05-12 at 9.12.59 PM.png

Kinjaldavra
Shopify Partner
2302 570 1422

This is an accepted solution.

hello @embroiderysage  please insert below code Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

 

  form.contact-form textarea#ContactForm-message{
    background: #f6f6f6 !important;
    border: transparent !important;
}

 

 

embroiderysage
Explorer
57 1 19

thanks! that worked!

Kinjaldavra
Shopify Partner
2302 570 1422

hello @embroiderysage  thank for  appreciate Kindly feel free to get back to me if you need any further assistance 

Have a nice day