In need of help customizing the "subscribe" button for my site

1) I want to replace the "subscribe" text with a simple arrow and remove borders - this will hopefully decrease the width 

2) I want to replace the "email address" default text in the form field to "your@email.com".

3) Lastly, I want to show it exactly the same way on mobile version. 

Have spent hours trying to update this. Any help would be greatly appreciated!

Hi. What is your site url? We can check these problems easier.

https://poodle-cornet-rrbx.squarespace.com/gallery/guragebowl1 

Thank you!!

hi site url is - mihretcollection.com and pw is love22n5

Thank you!!

#1. Add to Design > Custom CSS

span.newsletter-form-button-label {
    font-size: 0;
}
span.newsletter-form-button-label:before {
    content: "\e004";
    font-family: 'squarespace-ui-font';
    font-size: 20px;
}
button.newsletter-form-button.sqs-system-button.sqs-editable-button-layout.sqs-editable-button-style.sqs-editable-button-shape.sqs-button-element--primary {
    border: None !important;
}

#2. Add to Settings > Advanced > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('footer.sections .newsletter-form-body input').attr('placeholder','your@example.com');
});
</script>

#3. You mean make both same line?

essentially i want the arrow to not have a box around it when you hover and want it to be placed on top of the line- something like the example attached. This is for both desktop and mobile. Hope this helps clarify?

Thank you!!