Waitlist Sign Up CSS

Site URL: http://www.fieldandflorist.com

Hello, I'm wondering if anyone can help me with a question about styling my waitlist sign up to match the rest of my site. Instead of a box, I'd like it to be a simple black line with black placeholder text and to reduce the size of the "Notify me..." text above it. I'd also like the "Sign Up" button to inherit the Black Outline/Petal style on the rest of my site (second picture). Is this possible? I've been able to remove the box around the email input using the code below, but haven't been successful in changing the color or size of the "Notify me..." text above, the placeholder text color to black or the button. Thanks in advance for any assistance. You all are such a wonderful and generous community and I've really enjoyed learning from you. 

/* Restock form */
.product-restock-form input[type="text"] {
    background: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

Which page are you referring to? I don't see it on both homepage & footer

Hi @tuanphan! Thanks so much for getting back with me. I was referring to contents within the Wholesale page here: fieldandflorist.farm/wholesale

pw: testtest

I made a few products visible so you can check them out. When you click in they are sold out, but the waitlist style hasn't inherited the rest of my site's styling (pictured above). 

Thank you for your help! I sincerely appreciate it!

Add to Design > Custom CSS

form.product-restock-form input[type="text"] {
    background-color: transparent !important;
    border-left: none !important;
    border-top: none !important;
    border-right: none !important;
    padding-left: 0 !important;
}

Thanks @tuanphan! Is there a way to get the 'Sign Up' button to be a black outline "petal" style like in the picture above?

18 hours ago, shopshopshop said:

Thanks @tuanphan! Is there a way to get the 'Sign Up' button to be a black outline "petal" style like in the picture above?

You mean like this screenshot?

@tuanphan Yes, exactly. But for some reason, my waitlist sign up isn't inheriting this style like the rest of my site.

@tuanphan It currently looks like this for some reason. 

On 5/27/2022 at 10:38 PM, shopshopshop said:

Hi @tuanphan! Thanks so much for getting back with me. I was referring to contents within the Wholesale page here: fieldandflorist.farm/wholesale

pw: testtest

I made a few products visible so you can check them out. When you click in they are sold out, but the waitlist style hasn't inherited the rest of my site's styling (pictured above). 

Thank you for your help! I sincerely appreciate it!

Password is incorrect. Can you check it again?

Hi @tuanphan sorry about that. I had to switch it for a customer but it is back live now with no password required. Thanks!

15 hours ago, shopshopshop said:

Hi @tuanphan sorry about that. I had to switch it for a customer but it is back live now with no password required. Thanks!

Add this CSS

form.product-restock-form input.sqs-editable-button {
    background-color: transparent !important;
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
}

brilliant, thank you so much for your help @tuanphan.

Two more questions that I can't figure out:

1. Is there a way to get the button to turn black with white text on hover?

2. Is there a way to change the placeholder text that says "email address" in the form to be black?

Thank you again!

testtest

https://www.fieldandflorist.farm/wholesale

#1. Use this

form.product-restock-form input.sqs-editable-button:hover {
    background-color: black !important;
    color: white;
}

#2. Use this

form.product-restock-form input[type="text"], form.product-restock-form input[type="text"]::placeholder {
    color: black !important;
}

Thanks so much @tuanphan!