Solved

How to change border settings for contact us form?

MaBa
Explorer
115 1 16

Hi community, 

 

I would like to change the layout ot the contact us to this:

 

Screenshot 2022-11-13 at 08.13.57.png 

In the base.css file I changed the the following parts:

 

The following removes the all around border and  adds the border at the bottom (input fields):

 

.field:after,
.select:after,
.customer .field:after,
.customer select:after,
.localization-form__select:after {
pointer-events: none;
content: '';
position: absolute;
top: var(--inputs-border-width);
right: var(--inputs-border-width);
bottom: var(--inputs-border-width);
left: var(--inputs-border-width);
/* REMOVE BORDERS FROM INPUT IN FORMS
border: 0.1rem solid transparent;
border-radius: var(--inputs-radius);
box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));*/

/* ADD BOTTOM BORDER FROM INPUT IN FORMS*/
border-bottom: 1px solid black;
transition: box-shadow var(--duration-short) ease;
z-index: 1;
}

 

and the following to add the all around border to the text area:

 

.text-area {
font-family: var(--font-body-family);
font-style: var(--font-body-style);
font-weight: var(--font-body-weight);
min-height: 10rem;
resize: none;
/* REMOVE BOTTOM BORDER FROM TEXT AREA IN FORMS*/
border-bottom: none;
/* ADD BORDER TEXT AREA IN FORMS*/
box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
}

 

The problem is that I get a double bottom border now in the text area because I cannot unset the field setting.

 

Screenshot 2022-11-13 at 08.20.40.png

 

Any help would be appreciated...

Accepted Solution (1)
ExpertRookie
Shopify Partner
1518 249 315

This is an accepted solution.

Hi @MaBa 
if you don't want to remove the border of the text area, you can replace the code with this

.field__input, 
.field input,
.field:after {
box-shadow: none!Important;
}
.text-area.field__input {
border: 1px solid black;
}
- Was my reply helpful? Please Like and Accept Solution to let me know!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me on expert.rookie.team@gmail.com regarding any help.

View solution in original post

Replies 5 (5)

ExpertRookie
Shopify Partner
1518 249 315

Hi @MaBa 
Thank you for your question. 
Please share your store URL, page URL and also password (if your store has one) so we can help you.

- Was my reply helpful? Please Like and Accept Solution to let me know!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me on expert.rookie.team@gmail.com regarding any help.
MaBa
Explorer
115 1 16
Womanly.se

The form is in the page om womanly
ExpertRookie
Shopify Partner
1518 249 315

Hi @MaBa 
You can try follow this path:
Themes => edit code => asset => base.css
and add this code to bottom of the file base.css

.field__input, 
.field input,
.field:after {
box-shadow: none!Important;
}
- Was my reply helpful? Please Like and Accept Solution to let me know!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me on expert.rookie.team@gmail.com regarding any help.
MaBa
Explorer
115 1 16

It didn't work because removed the all around border from the text area (see picture)

 

Screenshot 2022-11-13 at 17.48.16.png

ExpertRookie
Shopify Partner
1518 249 315

This is an accepted solution.

Hi @MaBa 
if you don't want to remove the border of the text area, you can replace the code with this

.field__input, 
.field input,
.field:after {
box-shadow: none!Important;
}
.text-area.field__input {
border: 1px solid black;
}
- Was my reply helpful? Please Like and Accept Solution to let me know!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me on expert.rookie.team@gmail.com regarding any help.