Need help? Check out our Support site, then


add other field types to contact form / edit font

  1. 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 kurilane.com.

  2. 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?

  3. 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!

  4. 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;
    }
  5. Thanks @thesacredpath, that did what I wanted! Thanks!

  6. 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?

  7. 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.

  8. 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?

  9. 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.

  10. Ok, thanks again @thesacredpath. Much appreciated!

  11. You are welcome.

  12. 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/.

  13. 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?

  14. 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;
    }
  15. That worked! Thank you so much @thesacredpath! You have been so helpful with all my requests, I can't thank you enough!!!! πŸ™πŸ½πŸ™πŸ½

  16. Hooray, and you are very welcome.

  17. 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!

  18. 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;
    }
  19. 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! :-))

  20. 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
    }
  21. Thanks @thesacredpath. That doesn't seem to have made a difference, but I notice that the hover color is not working on desktop either for the "older posts" button, even the original code works for hover on tablet, but not on phone or desktop.

    It's ok, I can live with it the way it is if there's not an easy fix.

  22. Hmmm, on my iPhone, the color of the older posts button is consistent and does not have the darker color left and right, and when I tap the button, I see no shift in color, it stays the same blue we set.

    Did you want a hover color for the older posts button, or the other buttons we restyled?

  23. Yes, the older posts button color is consistent (#001167), but I did want the hover color to be darker (#010051) - all of the other button do have the darker hover color already. I had this code previously, which is giving the hover color. However, it's not working on the older posts button.

    .button:hover,
    .button:focus,
    .button:active {
    background: #010051;
    color: #fff;
    }

    Thanks @thesacredpath!

  24. Ok, let's add this at the very bottom of your custom CSS.

    #infinite-handle span button:hover {
      background-color: #010051;
    }

    And then in this string of CSS selectors
    .contact-submit .pushbutton-wide,#infinite-handle span button,#infinite-handle span button:hover,#infinite-handle span button:focus,#blog_subscription-30 input[type="submit"]
    take this out of that string (including the trailing comma).
    #infinite-handle span button:hover,

  25. Thanks @thesacredpath. Adding the first part fixed the hover on desktop view, but taking out the second part made the screen jump on desktop and the older posts button very narrow on both desktop and mobile, so I removed that.

    It's ok as is now - the hover works on mobile, but for the middle rectangle inside the older posts button doesn't change to the hover color when pressed - it depends on where you tap, if you tap on the right side of the button, the hover works for the whole button, but if you tap in the middle on the writing, you see the outline of the smaller rectangle within.

    Again, if it's too difficult to adjust, I can live with it - not sure anyone but me would notice it anyway!

    Thanks so much!!

  26. Ugh, this is a challenge give both the span the button is in, and the button itself have a background color set. Add this below your last CSS rule and I believe it takes care of the issue on the Older Posts button.

    #infinite-handle span button {
      width: 100%;
    }
  27. Yay!!! That did it!! Thanks so much for not giving up, so much appreciated @thesacredpath! :-)

  28. Hooray and you are welcome! And by the way, I never give up. :)

  29. Good to know, I have a couple more things I need help with! πŸ˜„Thanks again.

Topic Closed

This topic has been closed to new replies.

About this Topic