add other field types to contact form / edit font

  • Author
    Posts
  • #3002399

    rajnikur
    Member

    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.

    #3002516

    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?

    #3002517

    rajnikur
    Member

    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!

    #3002520

    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;
    }

    #3002552

    rajnikur
    Member

    Thanks @thesacredpath, that did what I wanted! Thanks!

    #3002564

    rajnikur
    Member

    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?

    #3002731

    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.

    #3002733

    rajnikur
    Member

    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?

    #3002734

    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.

    #3002735

    rajnikur
    Member

    Ok, thanks again @thesacredpath. Much appreciated!

    #3002740

    You are welcome.

    #3002763

    rajnikur
    Member

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

    #3002765

    rajnikur
    Member

    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?

    #3002772

    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;
    }

    #3002773

    rajnikur
    Member

    That worked! Thank you so much @thesacredpath! You have been so helpful with all my requests, I can’t thank you enough!!!! 🙏🏽🙏🏽

    #3002774

    Hooray, and you are very welcome.

    #3002776

    rajnikur
    Member

    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!

    #3002778

    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;
    }

    #3002779

    rajnikur
    Member

    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! :-))

    #3002780

    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.