add other field types to contact form / edit font
-
I added a contact form here https://kurilane.com/services-consult/.
However, I need some help getting it to do what I want, I need help with these 3 things:
1) where I have “Which services are you interested in?”, it is a name field, and has an area to enter text, I simply want to write the text, as I’m using checkboxes below for the answer. How can I do that?
2) Also, I’ve added a phone number field using the name field as well, is there a way to create a phone field so it takes 10 digits and not any text?
3) Is there a way to change fonts on form?
This is the twenty seventeen theme.
thank you!
The blog I need help with is: (visible only to logged in users)
-
Hi there, I see you have check boxes now on your contact form and see bold for the font on the labels. Have you gotten things to where you want them, or do you still need help on some things?
-
Hi @thesacredpath, no I still need help. I don’t want to have the text field before the checkboxes, just the question. The phone number is still a name field rather than number, and I don’t want the text of the checkboxes to be bold.
Thanks for your help!
-
Hi, there is no telephone number field in out contact form, so a text field is what you will have to use.
For the field right above the checkboxes, we can hide that with the following custom CSS.
#g65593-whichservicesareyouinterestedin { display: none; }For the labels on the checkboxes, the following will make those normal instead of bold.
label.checkbox { font-weight: normal !important; } -
-
One more thing…I’ve got some buttons on some pages that are based on CSS and have the look and feel I want see “book now” button here, https://kurilane.com/services/.
Is there any way that I can customize the wordpress form “submit” buttons or this page https://kurilane.com/services-consult/ and this page https://kurilane.com/contact/ to look the same and my custom ones, and to edit the text (submit) to say something else?
-
Hi, the following applies your styling to the contact form submit button.
.contact-submit .pushbutton-wide { background: #001167; color: #fff; padding: 0.5em 1em; font-weight: 700; letter-spacing: .0625em; text-transform: uppercase; border: 0; border-radius: 0; font-size: 1rem; }I tried to figure out a way to move the double right arrow thing up a bit, but it is within the Submit text string, so I can’t move just that character up.
-
Thanks again @thesacredpath! That worked great. I can live with the arrow thing if there’s no way around it.
I’m guessing I can’t change the text to something unique for each form?
-
You are welcome.
I’m guessing I can’t change the text to something unique for each form?
No that is not possible with the way the button code is done.
-
-
-
Thanks again @thesacredpath. I am a bit OCD about things looking the same (if you haven’t noticed!) I tried the above code on the “older posts” button on the blog page, here https://kurilane.com/blog/ by trying to guess the name of that button, but it didn’t work. It tried:
.blog-olderposts .pushbutton-wide {
background: #001167;
color: #fff;
padding: .5em 1em;
font-weight: 700;
letter-spacing: .0625em;
text-transform: uppercase;
border: 0;
border-radius: 0;
font-size: 1rem;
}Is there some CSS to make the older posts button look like the other button on my site? Like the “book now” button on https://kurilane.com/services/.
-
I apologize, I am also hoping to make the “sign up now” button on the footer for non-followers look like my custom buttons. It is coming from the “follow blog” widget. Can I add some CSS to make it look the same as the others as well?
-
You deserve to have your site look the way you want it. :)
So, replace the code I had given you before with the following which I believe catches everything for you.
.contact-submit .pushbutton-wide, #infinite-handle span button, #infinite-handle span button:hover, #infinite-handle span button:focus, #blog_subscription-30 input[type="submit"] { background:#001167; color:#fff !important; padding:.5em 1em; font-weight:700; letter-spacing:.0625em; text-transform:uppercase; border:0; border-radius:0; font-size:1rem } .site-main #infinite-handle span { padding: 0; } -
That worked! Thank you so much @thesacredpath! You have been so helpful with all my requests, I can’t thank you enough!!!! 🙏🏽🙏🏽
-
-
Everything looks great @thesacredpath, except on the “older posts” button on a mobile phone, it has the right look in the middle, with the correct font / color but then the button has black on both sides of it as it expands to the width it’s supposed to be.
Is there any way to make the whole width the same blue without changing all the rest of the buttons – they are all perfect?
Thank you!
-
Ah, we can fix that. Add a background color declaration to this rule so it looks like this.
.site-main #infinite-handle span { padding:0; background-color: #001167; } -
Thanks @thesacredpath. That worked, except when you hover over it in phone preview mode on a computer, or click on it on a mobile device, the original inner rectangle that was blue is still the background color blue (#001167), and the part that was black is the hover color blue (#010051)), it should all be the hover color when hovering / clicked.
Thank you!!!…(again! :-))
-
Heh, I missed that because the color is so close to the other color we set. Change the rule I gave you above to this.
.site-main #infinite-handle span, .site-main #infinite-handle span:hover { padding:0; background-color:#001167 }
- The topic ‘add other field types to contact form / edit font’ is closed to new replies.
WordPress.com Forums 