Contact form edit appereance

Support
#1

Hi,

How can I:

*Put a line instead of the boxes in the contact form.
*Make shorter the space design for the email address, name…etc
*Edit the size and type of the font in: your message, your email, your name.

Thank you,
Marina.

#2

Hi Marina,

To achieve that you need to add some custom css. Try to add this in the theme’s custom css.

.wpcf7 input[type=text], .wpcf7 input[type=email], .wpcf7 textarea {
    background: transparent;
    border-right: 0;
    border-left: 0;
    border-top: 0;
    border-radius: 0;
    border-color: #bbb;
    height: 35px;
    width: 80%;
}

.wpcf7 {
    font-size: 20px;
    font-family: 'Arial';
}

.wpcf7 input, .wpcf7 textarea{
    font-size: 10px;
    font-family: 'Arial';
}

You can adjust that values there to whatever fits your site. For example the font-size, you can update it to any value you want. Here’s a link that will help you achieve the style you want https://www.w3schools.com/css/css_font.asp.

Hope it helps.

#3

Hi,

It is not working. Also, how could put it with the font Raleway specifically?
My website: http://inawomansbody.com/contact/

Thank you,
Marina.

#4

Hi Marina,

The text on the form inherited the body font-family, so that is already in a font-family: "Raleway";

To achieve your request above, please add this to your Contact page’s CSS area

.wpcf7 textarea,
.wpcf7 input[type="text"],
.wpcf7 input[type="email"] {
	background-color: transparent;
    border: 0;
    border-bottom: solid 2px black;
    border-radius: 0;
    height: 30px;
}

Feel free to adjust the border black color and height values.

And add a top and right padding to your right 1/2 column, to balance out the spacing of your 2 columns.

Hope it helps,
Cheers!

#5

Hi,

I have add the code and is still not working.

What should I add?
Also, how can I delete the shadow that appears around the word SEND when I put the mouse over it?

Thanks,
Marina.

#6

Hey Marina,

Where did you added the custom css? Please remove it from where you have inserted and make sure to insert it in X > Theme Options > Custom CSS section or in Appearance > Customize > Additional CSS section instead.

If nothing is helping, please provide us access to your site so that we can check your settings? Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Regards.

#7

Hi,

It have worked! Now the problems are:

*The button send appears smaller than before and I wanted it bigger.
*The letters from the button send have a shadow when you click with the mouse that I want to delete.
*The letters of: your name, your email and your message are not railways as I wanted.how can you edit this?
*I want the line that appears for written the name, email…etc thinner.
*I want to add a margin in the bottom after the text.
*I want to make bigger the text that the customer enter when they write their email, name…etc.

How you help me with this?

Thanks in advance,
Marina.

#8

Hi Marina,

I saw you have this:

.wpcf7 input, .wpcf7 textarea {
    font-size: 10px;
    font-family: 'Arial';
}

But that was not added to Theme Options > CSS. Anyways that is the custom CSS that made your button smaller, see the font-size: 10px; property, please adjust that.

Please add this to Theme Options > CSS.

.wpcf7-form-control.wpcf7-submit {
	text-shadow: none !important;
}

Find this custom CSS and remove it, I think you’re using the Simple CSS plugin with this. If you remove that your form text will inherit back the body text, which is the “Raleway”.

.wpcf7 {
    font-size: 20px;
    font-family: 'Arial';
}

On the CSS code I’ve provided on my previous reply, please adjust the border-bottom: solid 2px black; the 2px there is the border thickness. more details about border

Text element has Margin options, please inspect the text element and find the margin options.

Same culprit as the small button, please refer to the solution above.

Please be reminded that this is now in the realm of customization, and we cannot provide further customization support from here.

Cheers!

#9

Thank you so much for all the help!

#10

You’re always welcome Marina!

Cheers.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.