Debut theme- contact form color and button

Solved
embroiderysage
Explorer
50 1 18

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!

0 Likes
suyash1
Shopify Partner
2855 306 471

@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;
}
}

 

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
Natztech
Shopify Partner
845 230 627

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;
}

 

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
0 Likes
embroiderysage
Explorer
50 1 18

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

0 Likes
Natztech
Shopify Partner
845 230 627

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;
}

 

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
embroiderysage
Explorer
50 1 18

thanks! that worked!

0 Likes
Natztech
Shopify Partner
845 230 627

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

Have a nice day 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store