Viewing 30 posts - 1 through 30 (of 30 total)
  • Author
    Posts
  • #567713

    Hi,

    As requested in this thread, I’d like to have my contact form 7 identically styled as the Enfold contact form, because the default contact form does not work unfortunately. Can you prepare one form for me so I can work out the rest?

    Thanks for your help!

    Regards,
    Daniel

    #567735

    Hey strila!

    We have setup a custom CF7 form please check the page in private message.

    Regards,
    Vinay

    #567761

    Hi Vinay,

    Thanks for your help! I updated the request in the private message.

    Regards,
    Daniel

    #567763

    Hi!

    I saw the form in CF7 plugin you already have it has some custom codes which we were not able to use it with same with the page you have created. So I had to create a new CF7 form and a new contact page.

    Just copy the CF7 shortcode and paste it in the text box on the contact page you like to edit and let us know if it worked.

    Or simply edit the test page name and use it if it works for you :)

    Best regards,
    Vinay

    #567765

    Hi Vinay,

    Okay thanks again! I guess the main thing is the 1/2 or 1/3 width I want to apply to the form. Can you tell me how to apply the Enfold shortcode for that?

    Thanks!
    Daniel

    #567819

    Hi!

    Drag and drop 2 separate grids from Advance Layout Builder to the position where you want it and move all content from 1/2 grid into the new grids.

    Cheers!
    Vinay

    PS: Your profile pic is colorful :) it reminds me of the “Festival of Colors” or “Holi Festival”.

    #567872

    Hi Vinay,

    How do I put a CF7 form in different grids in the advanced layout builder? I have no clue! :)

    Cheers,
    Daniel

    PS. This was a festival dedicated to the Holi Festival! Check out http://www.indicolorfestival.nl/overons.html :)

    #567893

    Hey!

    If you goto CF7 plugin you will find shortcode like

    [contact-form-7 id="1234" title="Contact"]

    Copy the above code and paste it in a textbox in Advance layout builder. Wrap this in a div with custom class so it will be easy to target the form elements via css.

    Cheers!
    Vinay

    PS: Nice site… I played Holi last year in Hampi.

    #567957

    Hi Vinay,

    I did what you suggested but no luck, the fields are still 1/1 and not 1/2 width. I want this:

    screenshot

    #567982

    Hi!

    You need to keep the contact form full width.

    Put all other info inside 2 grids like i have in this page (link in private msg) Enfold Test – Contact

    Best regards,
    Vinay

    #567987

    Hi Vinay,

    I honestly don’t know what to do. On the page http://www.fitzwanger.nl/enfold-test-contact/ there is a Enfold contact form left from the CF7 form. I want the CF7 form to be exactly the same as the Enfold contact form. How? :)

    Cheers,
    Daniel

    #568133

    Hey!

    Ok as i understand you like the name and email to be on the same row and the send button a bit bigger… sure this can be done. please give us a bit more time to work on this and get back to you.

    Cheers!
    Vinay

    #568434

    Hey!

    Please check the contact form now

    We have used the below custom css to create this.

    #cf7-contact-form .wpcf7 .col-50p {
    	width: calc(50% - 5px);
    	display: inline-block;
    	margin-right: 10px!important;	
    }
    #cf7-contact-form .wpcf7 .col-50p.fright {
    	float: right!important;
    	margin-right: 0px!important;	
    }
    
    @media only screen and (max-width: 480px) {
    #cf7-contact-form .wpcf7 .col-50p {
    	width: 100%;
    	display: block;
    	margin-right: 0px!important;	
    }
    }

    Best regards,
    Vinay

    #575180

    Hi!

    How are you? just following up with the issue.
    Hope everything is working great now. Let us know and we can go ahead and close this ticket.

    Best regards,
    Vinay

    #575742

    Hi Vinay,

    Yes it works perfectly! With your help I could create the CSS for 1/3 columns myself. One thing that took some time to discover was the fact that you put the CF7 shortcut code in a <div id="cf7-contact-form"></div>.

    You can close the thread, thanks for the help!

    Cheers,
    Daniel

    #575910

    Hey!

    Hey Daniel,
    Wrapping the div helps to easily style things in cf7 when you inspect it and target cf7 class names ;)
    Glad we were able to help. In future please feel free to ask any questions we are more than happy to help you.

    Cheers!
    Vinay

    #744161

    Is there a way to make my background of the fields where info is typed/selected to be white. Also, I cannot type inside the Name Field. And, I cant figure out why the send button is on top of the reCAPTCHA.

    • This reply was modified 7 years, 3 months ago by timbright. Reason: Added more info for the issue
    #746131

    Hi,

    I checked your site and the submit button appears below the captcha.

    To make the focus field white Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    input[type=text]:focus {
        background-color: #FFF!important;
        color:#000!important;
    }
    

    Best regards,
    Vinay

    #751895

    Hi! Is it possible to share the custom form that you built for the OP with me? I would like to style my CF& identical to the Enfold forms as well.

    Thanks in advance!

    #751971

    Hi,

    All the css code used is available in this thread. What is OP?

    If you still have any issue please share the link to the page here so we can inspect the element and help you better :)

    Best regards,
    Vinay

    #751999

    Hi Vinay-

    OP is short for Original Poster, ie. the first person in this thread.

    I was under the impression that there was additional CSS from your post where you replied “We have setup a custom CF7 form please check the page in private message.”.

    Maybe I am just confused?

    Thanks,
    -Aric

    #752028

    Hi,
    I review the post, and there was no additional css used, Vinay was referring to the CF7 shortcode which the css was applied to.
    Hope this helps

    Best regards,
    Mike

    #754095

    Great! Thanks for the help!

    #935267

    Hi,
    I need to replicate the contact form in enfold to CF7 in terms of having the email ID box as 2/3rd and Submit button as 1/3rd. I tried to follow the instructions given but am unable to replicate the same style in CF7.

    Our page link is enclosed below.

    Please help.

    Thanks

    GB

    #935493

    Hi,
    Please add this custom css to WordPress > Customize > Additional CSS:

    #top.page-id-7906 #cf7-contact-form #wpcf7-f8176-p7906-o1 input[type="submit"].wpcf7-form-control.wpcf7-submit {
        width: 30% !important;
        padding: 9px 1px!important; 
        font-size: 10px !important;
    }
    
    #top.page-id-7906 #cf7-contact-form #wpcf7-f8176-p7906-o1 input[type="email"].wpcf7-form-control.wpcf7-text.wpcf7-email.wpcf7-validates-as-required.wpcf7-validates-as-email {
       display: inline-block !important;
       width: 60% !important;
    }

    expected results
    2018-03-30_204344

    Best regards,
    Mike

    #936329

    Dear Mike,

    Hi! Thank you so much and this quick CSS works on the page link I shared.

    However, if I try changing the page ID and element ID and use it to style CF7 on another page it does not work. I am posting the page link below.

    Could you please guide me on what am I doing incorrectly.

    Thanks

    Garima

    #936330

    Hi Mike,

    Just realized that you had enclosed the CF7 in a div. All good now and its working on both pages.

    Thanks for your all your help

    Garima

    #936405

    Hi Garima,

    Great, glad you got it working. Please let us know if you should need any further help on the topic.

    Best regards,
    Rikard

    #936406
    This reply has been marked as private.
    #936490

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    and the video tutorials here
    And if there are features that you wish Enfold had, you can request them and vote the requested ones here
    For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

    Best regards,
    Mike

Viewing 30 posts - 1 through 30 (of 30 total)
  • The topic ‘Contact form 7 & Enfold contact form: identical styling’ is closed to new replies.