Viewing 29 posts - 1 through 29 (of 29 total)
  • Author
    Posts
  • #854057

    Ahoy,

    I’m trying to figure out the best way to use connect my aweber email account with Enfold. I have a few threads open trying to figure out the best solution. I want my form to mirror the mailchimp form (see screenshot 1) I added my contact form 7 to a test page but things are not 100%. I’m hoping you can help. Here is what I want to do.

    1. I want the bars to be side by side and than on mobile be like screenshot 2 but one mobile one top of one another like in ENFOLD
    2. I would like the text inpurt areas and buttons the same size and the ENFOLD input areas and button layout.
    3. The ENFOLD text inputs are slightly rounded , I would that to be styled for contact form 7

    Here is my contact form 7 code

    [text* your-name placeholder"Name*"]
    
    [email* your-email placeholder"Email*"]
    
    [tel* tel-196 placeholder "Phone*"]
    
    [submit "Send"]
    #854298

    Hey mcraig77,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    .wpcf7 p {
        width: 27%;
        display: inline-block;
    
    }
    .wpcf7 p:nth-child(5) {
      width: 15%;
    }
    .wpcf7 p input[type="submit"] {
        padding: 9px 22px;
        font-size: 16px;
        border-radius: 3px;
    }
    .wpcf7 input, 
     #top .input-text, #top input[type="text"], 
     #top input[type="input"], #top input[type="password"], 
     #top input[type="email"], #top input[type="number"],
      #top input[type="url"], #top input[type="tel"], 
      #top input[type="search"], #top textarea, #top select
     {
      border-radius: 3px;
    }
    

    If you need further assistance please let us know.
    Best regards,
    Victoria

    #854526

    Ahoy Victoria, those worked. I still have a couple of issues. On mobile I need the forms to look like this (Screenshot 1) and is there a way to make the input bars height higher like on the ENFOLD form? Screenshot 2 – it looks like it is about 49 pixel high. Contact form 7 is about 36 pixels high, same with the buttons

    #855757

    Hi,

    Could you please first, wrap the code I gave you in the media query

    
    @media only screen and (min-width: 768px) {
      .wpcf7 p {
        width: 27%;
        display: inline-block;
    
      }
      .wpcf7 p:nth-child(5) {
        width: 15%;
      }
      .wpcf7 p input[type="submit"] {
          padding: 9px 22px;
          font-size: 16px;
          border-radius: 3px;
      }
      .wpcf7 input, 
       #top .input-text, #top input[type="text"], 
       #top input[type="input"], #top input[type="password"], 
       #top input[type="email"], #top input[type="number"],
        #top input[type="url"], #top input[type="tel"], 
        #top input[type="search"], #top textarea, #top select
       {
        border-radius: 3px;
      }
    }
    

    Ans then we do the rest.
    Best regards,
    Victoria

    #855849

    That seems to work. Now how do I make the height of the boxes and buttons larger and centered text? Also any way to make there a little more space between the columns like this?

    #856196

    Hi mcraig77,

    Cantered placeholder text is a “NO”, more room between columns, will be with the code below, but I would not do it either.

    
    @media only screen and (min-width: 768px) {
      .wpcf7 p {
        width: 25%;
        display: inline-block;
        margin-right: 2%;
    
      }
      .wpcf7 p:nth-child(5) {
        width: 15%;
      }
      .wpcf7 p input[type="submit"] {
          padding: 9px 22px;
          font-size: 16px;
          border-radius: 3px;
      }
      .wpcf7 input, 
       #top .input-text, #top input[type="text"], 
       #top input[type="input"], #top input[type="password"], 
       #top input[type="email"], #top input[type="number"],
        #top input[type="url"], #top input[type="tel"], 
        #top input[type="search"], #top textarea, #top select
       {
        border-radius: 3px;
      }
    }
    
    

    Best regards,
    Victoria

    #856661

    sorry, i’m a tad confused. how to I make the input and button areas taller and have the text centered? like the screenshot – see how the input boxes are taller?

    #856861

    Hi mcraig77,

    This code should not be applied to the desktop screen size, please correct the media query and then add my code.

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    @media only screen and (min-width: 900px) {
      #top .wpcf7 form {
          padding-left: 8%;
      }
    }
    
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #857097

    Hi Victoria, Not exactly what i’m trying to achieve. I want to make the intake forms and buttons taller to match the enfold styles. I used my CSS Style tool to show you want i’m trying to achieve. but when I put this code in the quick css it doesn’t apply See how there is more space now on the top and bottom? I also need the button to be taller.

    Also once I press the button I get this outer glow on the button. Anyway to get ride of that?

    input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
        padding-bottom: 12px;
        padding-top: 12px;
    }

    See screenshots

    #857469

    Hi,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    
    .wpcf7 input, 
       #top .input-text, #top input[type="text"], 
       #top input[type="input"], #top input[type="password"], 
       #top input[type="email"], #top input[type="number"],
        #top input[type="url"], #top input[type="tel"], 
        #top input[type="search"], #top textarea, #top select, #top input[type="submit"]
       {
        border-radius: 3px;
         padding-bottom: 12px;
        padding-top: 12px;
      }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #857649

    I went ahead and added that to both but nothing seemed to happen. Please Advise

    #857692

    Hi,

    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

    Best regards,
    Victoria

    #857709

    Admin Below. I added the code first to the quick css and seeing that didn’t work I added it to the theme folder.

    #857959

    Hi,

    I out the styles to your quick css and they are working, I see you also have the same in custom.css, it’s weird they did not apply before. Could have been just a cache issue.

    Best regards,
    Victoria

    #858195

    Weird… Anyway to remove the outer glow from the button when I click? is it ok to remove the code from the theme files?

    #859042

    Hi,

    Please the following css code to adjust the submit buttons’ hover style.

    .main_color input[type='submit']:hover {
        background-color: red;
        color: blue;
        border-color: violet;
    }

    Best regards,
    Ismael

    #859325

    Hi Ismael,

    not quite. I don’t need the button styles changed. I need the outside glow removed when you press it down. Do you see that?

    #859556

    Hi,

    I can’t see the “glow” on Chrome Windows 7. Where are you testing this?

    Best regards,
    Ismael

    #859738

    I see this on chrome Mac OSX

    please advise

    #860010

    Hi,

    I’ll ask the rest of the support team to check it. Can you inspect the element in the browser? I checked the css properties but I don’t see anything that is closely related to the “glow” effect.

    Best regards,
    Ismael

    #860026

    Hi!

    UPDATE: According to my team-mate, it’s the default browser behaviour of the input button on macOS. Unfortunately, we’re not sure how to remove it. Please try the following css code.

    input[type='submit']:focus {
       outline: none;
     }

    Best regards,
    Ismael

    #862050

    That seems to work! Thanks!!

    #862319

    Hi,

    Great, glad it worked. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    #936752

    Hello – my query is for styling with CSS on similar topic to above – using contact form 7.
    So far I have added this Quick CSS as below and it mostly looks fine. I used a combination of your ideas above and some from this Tutorial video:- https://www.youtube.com/watch?v=bKarC0QO5og

    /* Submit Button CSS Styles */
    .wpcf7 input[type=submit] {
    padding:15px 45px;
    background:#FCE228;
    color:#232323;
    font-size:16px;
    font-weight:bold;
    border:0 none;
    cursor:pointer;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    }

    /* Submit Button CSS Hover Styles */
    .main_color input[type=’submit’]:hover {
    background-color: #232323;
    color: #FCE228;
    }

    /* Label Text Styles */
    .wpcf7 label {
    padding: 0 0 10px 0;
    font-size: 20px;
    color:#232323;
    }

    I want to style further as follows:- Numbered to help your reference :).

    1. Make the NAME and EMAIL input fields on same line when the browser width permits. This is how the old Enfold Contact form worked by default. Here’s a screen shot showing ENFOLD default above and CF7 below. I assume it will need to default to stacked on top of each other for mobile view as it does now.

    Screen Shot 2018-04-03 at 17.49.44.png

    2. My CSS above wasn’t able to add more padding below the label. I tried 20, 40 etc – but it looked just the same. Assuming 20px is the bottom padding?

    3. How to add the styling to make the input boxes like my enfold screenshot – with borders coloured #232323 – and with the same rounding as enfold – assume 3px radius?

    4. [EDIT- FOUND SOLUTION TO THIS NOW! ] How to add a thin coloured ( #232323) border to the Send button – as I had on the old Enfold contact form? There was also a border colour on the button Hover CSS above but I found it didn’t seem to do anything.

    Hope you can help with the above. Much appreciated.

    Pete

    my website contact form page is here:-

    • This reply was modified 1 year, 3 months ago by  premedia.
    #937007

    Hi premedia,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    #top .main_color .input-text,
     #top .main_color input[type='text'],
      #top .main_color input[type='input'], 
      #top .main_color input[type='password'], 
      #top .main_color input[type='email'],
       #top .main_color input[type='number'],
        #top .main_color input[type='url'], #top .main_color input[type='tel'],
     #top .main_color input[type='search'], #top .main_color textarea, #top .main_color select {
       border-color: #232323;
       border-radius: 3px;
       margin-top: 10px;
     }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #937313

    HI Victoria – thanks for getting back to me.
    Your code above did a great job for the input boxes, border colours and fixed the problem I was having when adding padding above the box/below the label :).

    STILL OUTSTANDING:
    One of the key things I was trying to do was my query number 1. – how to make the CF7 Name and Email input boxes sit alongside each other on a desktop screen (just like they do on my Enfold form screenshot ) and then stack on top of each other as they also do with Enfold contact form for mobile? My contact page is split 2/3 for the form on the left and 1/3 for the yellow block on the right (although the RH yellow block moves below the contact form on mobile view.

    Hope you can help

    thanks

    Pete

    • This reply was modified 1 year, 3 months ago by  premedia.
    #937994

    Hi Pete,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
    @media only screen and (min-width: 768px) {
      #top .wpcf7-form-control-wrap.your-name input[type=text] {
        width: 95%;
    
      } 
      .wpcf7-form  div + p, .wpcf7-form  div + p + p {
        width: 50%;
        float: left;
    
      }
      .wpcf7-form  div + p + p {
        clear: right;
      }
    
    }
    

    If you need further assistance please let us know.

    Best regards,
    Victoria

    #938251

    Thanks so much Victoria! thats a really clever bit of CSS!

    I’ve set it at 1368px – just wider than iPad pro screen horizontal.
    It works fine apart from a couple of small things:-

    1. On the wide desktop version where the name and email are side by side – the space between that line and the SUBJECT line below seems to be wider than when the 2 fields are stacked on top of each other.

    2. Also on desktop perhaps the gap/padding above the Name/Email line is wider making a large gap between that line on desktop view and the bulleted text above. Ideally I would like the gaps above/below field to be consistent between desktop and mobile.

    3. The CSS you provided to create black field borders is being carried into the Enfold Search field. Is there a way I can restrict this border styling to the CF7 form?

    Here’s the full quick CSS i have for this contact page at the moment including your latest fixes.

    /* CF7 Submit Button CSS Styles */
    .wpcf7 input[type=submit] {
    padding:15px 45px;
    background:#FCE228;
    color:#232323;
    font-size:16px;
    font-weight:bold;
    border:1px solid #232323;
    cursor:pointer;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    }

    /* CF7 Submit Button CSS Hover Styles */
    .wpcf7 input[type=submit]:hover {
    background-color: #232323;
    color: #FCE228;
    border:1px solid #232323;
    }

    /* CF7 Label Text Styles */
    .wpcf7 label {
    padding: 0 0 10px 0;
    font-size: 20px;
    color:#232323;
    }

    /* CF7 File Upload Button CSS Styles */

    .wpcf7 input[type=file] {
    padding:0px 0px;
    background:none;
    color:#000;
    font-size:14px;
    border:none;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    }

    /* CF7 Input Field Heights */
    .wpcf7 input[type=text] {height:40px;}
    .wpcf7 input[type=email] {height:40px;}

    /* CF7 Input Field border and radius */
    #top .main_color .input-text,
    #top .main_color input[type=’text’],
    #top .main_color input[type=’input’],
    #top .main_color input[type=’password’],
    #top .main_color input[type=’email’],
    #top .main_color input[type=’number’],
    #top .main_color input[type=’url’], #top .main_color input[type=’tel’],
    #top .main_color input[type=’search’], #top .main_color textarea, #top .main_color select {
    border-color: #232323;
    border-radius: 3px;
    margin-top: 5px;
    }

    /* CF7 name and email Fields alongside but not on mobile */
    @media only screen and (min-width: 1368px) {
    #top .wpcf7-form-control-wrap.your-name input[type=text] {
    width: 95%;

    }
    .wpcf7-form div + p, .wpcf7-form div + p + p {
    width: 50%;
    float: left;

    }
    .wpcf7-form div + p + p {
    clear: right;
    }

    }

    ————-
    I also have some styling on the ENFOLD search button etc from some previous work as below:-

    /* ENFOLD Search Button and Hover CSS Styles */

    #searchsubmit {
    background-color:#fce228!important;
    }
    #searchsubmit {
    color:#232323!important;
    }
    #searchsubmit:hover{
    background-color:#232323!important;
    }
    #searchsubmit:hover {
    color:#fce228!important;
    }

    Thanks for your help :)

    Pete

    #938795

    Hi,

    If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

    Thanks!

    Best regards,
    Ismael

Viewing 29 posts - 1 through 29 (of 29 total)

The topic ‘Contact Form 7 with Enfold Styles’ is closed to new replies.