Codeless
  • Support Home
  • Themes
  • Support
  • WordPress Tutorials
    • How to Start a Blog
    • Best Website Builders
    • Best Small Business Hosting
    • Email Marketing Services
    • Cheap WordPress Hosting
  • Video Tutorials

Community Forums

Contact Page styling

Contact form
    • 10 years, 4 months ago alpenzone
      Participant

      Expired

      Is there any way of making the contact page look better please?  I found out by accident that you need Contact Form 7 for your theme – I think!  I’ve installed Contact Form 7 but the form itself looks pretty basic and not very stylish when compared to the rest of the theme.  Other themes I’ve used have produced a nice looking contact form option.

      Do you have any recommendations on how to improve the look of my contact form please?

    • 10 years, 4 months ago Mirela
      Participant

      Hello,

      You can just add some css into you custom css box. Let us know if you need help with that!

      Best regards!

      • This reply was modified 10 years, 4 months ago by Mirela.
    • 10 years, 4 months ago alpenzone
      Participant

      Expired

      Sorry to be a nuisance but yes, I could do with some help with css to make the form look better and more like the theme.

    • 10 years, 4 months ago Mirela
      Participant

      Hello,

      Can you be more specific on the changes you want to make? So i can help you. Please send me some screenshots of the resulting form and your site’s url.

      Best regards!

    • 10 years, 4 months ago alpenzone
      Participant

      Expired

      I’d like to make the following changes to what I have at the moment:

      1.  Each of the first 4 fields to be reduced in size to 3/4 of the size of the Comments / Questions box.  At the moment they are all the same size.

      2.  The form elements are surrounded by a grey background.  The right hand edge of this background is too close to the right hand column (where the address etc. is located).  Can this gap be made larger – perhaps twice the current gap or maybe a bit more?

      3. I would like the ‘SEND’ button to have a background colour of #b02b2c and the word ‘SEND’ to be in white text.

      4.  At the top of the form there is a title called ‘Contact Form’.  This title is too close to the ‘Name (required)’ field.  They currently look squashed together.  Can the gap between them be made larger please?

      My site can be found at: https://www.eliminatetherisks.co.uk/new-site/contact/

      Thanks.

    • 10 years, 4 months ago alpenzone
      Participant

      Expired

      Does the above sound possible?

    • 10 years, 4 months ago Mirela
      Participant

      Hello,

      1- please add these lines into your ‘Contact’ page custom css box:

      input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
      width: 75%;
      }

      2- Do you want to distance right column further from the left column? If so, add these lines:

      .vc_col-sm-4.wpb_column.column_container {
      padding-left: 75px;
      }

      3-For the “Send” background and font color, add these:

      input.wpcf7-form-control.wpcf7-submit.btn-bt.default {
      background: #b02b2c;
      }
      input.wpcf7-form-control.wpcf7-submit.btn-bt.default {
      color: rgb(253, 253, 252);
      }

      4- Add these lines:

      .header {
      padding-bottom: 30px;
      }

      You can edit all values to your need. The result should be like this: screenshot.

      Best regards!

    • 10 years, 4 months ago alpenzone
      Participant

      Expired

      That’s excellent.  Thank you very much for your help.

Viewing 7 reply threads

You must be logged in to reply to this topic.

Login

Log In
Register

Renew Support

  • Renew Specular Support
  • Renew Tower Support
  • Renew Folie Support
  • Renew Handel Support
  • Renew June Support
  • Renew Picante Support
  • Renew Thype Support
  • Renew Regn Support

Search Forums

Forums

  • Bygge – Construction Theme
  • Converta – Software Theme
  • Folie – The WordPress Website Builder
  • Handel – Responsive Multi-Purpose Business Theme
  • June WooCommerce WordPress Theme
  • Livecast – Podcast Theme
  • Picante – Restaurant & Food WordPress Theme
  • Regn | Agency & Business WordPress Theme
  • Remake – Minimal Portfolio & Agency Theme
  • Specular – Multi-Purpose WordPress Theme
  • Suggest us Features
  • Tower – Business-Driven Multipurpose WP Theme
  • Vibrance – Photography Theme

Site Links

  • Support Policy
  • Specular Support Forum
  • Video Tutorials
  • Knowledge Base
  • Guides and Reviews

Useful Articles

  • Build a Website
  • Web Design & Development
  • Hosting
  • WordPress

Login

Log In
Register Lost Password