A Few Issues With Functionality / Design

  • Hi there,

    I’m trying to make a few tweaks to a client’s website, and am experiencing some frustrating issues with regards to WordPress’s limitations.

    The Contact Form

    I’m looking to add an embedded Contact Form to all relevant product/service pages to make it easier for customers to get in touch. However, whenever I try to do that, I end up with an incredibly small, cramped version that looks awful.

    The plugin is Contact Form 7, but I’ve had the same issue with other contact form plugins as well. I know it’s a CSS issue, but my knowledge there is too limited to understand exactly what the issue is.

    The Contact Page

    Another thing I’m trying to do is bump the contact form on this page up to the top, above the rest of the content:

    https://bulksealer.on.ca/contact/

    I realize that I’m probably limited in doing this because the page uses a Contact template, but any input or direction how to make this possible (if it is) is much appreciated!

    The Phone Number Header

    Lastly, I would also like to make the phone number in the header (next to the “Speak with our team” – https://bulksealer.on.ca/) bigger. I have not found any way to even access this area of the site – does anyone know how I could tweak this content?

    Thanks very much for any help anyone can give on these topics. I understand if nobody can answer all three, but this is the only way I’ve been able to get support, and I think I’ve hit enough of a wall that I need to reach out for community advice.

    Anything anyone can offer is appreciated!

    Thanks!

    Regards,
    Dave

Viewing 1 replies (of 1 total)

  • Oh dear.
    If you right click on the form and choose inspect element most browsers will pop up an applet window that tells you the html structure and css rules that are affecting the forms and phone number, and what line of the stylesheet they are on. You can also play with/edit the rules to see how it will look. Hopefully you are using a childtheme, then open up your bulksealer stylesheet and a) for the Contact 7 form, copy/note the classes for the form usually starting with I think its’ “wpfc7” either and add your new rules to widen the width, adjust the padding and otherwise adjust the form. Same goes for the header phone number. For instance right now your phone number has the rules

    .header-top .container .call-us {
    float: right;
    height: 44px;
    line-height: 44px;
    font-size: 15px;
    text-align: left;
    color: #333;
    padding-left: 27px;
    padding-right: 48px;
    }
    in your main.css file on line 267 – to make the font bigger edit the font-size rule to the size that looked good to you in your inspector panel

    For the form order on the page it looks like the shortcode is in a widget or separate page frame, you need to put the shortcode into the main page where you want to place it.

Viewing 1 replies (of 1 total)
  • The topic ‘A Few Issues With Functionality / Design’ is closed to new replies.