Tagged: 

Viewing 30 posts - 1 through 30 (of 30 total)
  • Author
    Posts
  • January 19, 2016 at 9:45 am #567713
    Daniel

    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

    January 19, 2016 at 10:41 am #567735
    Vinay

    Hey strila!

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

    Regards,
    Vinay

    January 19, 2016 at 11:33 am #567761
    Daniel

    Hi Vinay,

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

    Regards,
    Daniel

    January 19, 2016 at 11:38 am #567763
    Vinay

    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

    January 19, 2016 at 11:43 am #567765
    Daniel

    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

    January 19, 2016 at 1:43 pm #567819
    Vinay

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

    January 19, 2016 at 3:47 pm #567872
    Daniel

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

    January 19, 2016 at 4:07 pm #567893
    Vinay

    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.

    January 19, 2016 at 4:55 pm #567957
    Daniel

    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

    January 19, 2016 at 5:32 pm #567982
    Vinay

    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

    January 19, 2016 at 5:38 pm #567987
    Daniel

    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

    January 19, 2016 at 9:31 pm #568133
    Vinay

    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

    January 20, 2016 at 8:47 am #568434
    Vinay

    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

    January 31, 2016 at 7:15 am #575180
    Vinay

    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

    February 1, 2016 at 2:07 pm #575742
    Daniel

    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

    February 1, 2016 at 5:30 pm #575910
    Vinay

    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

    February 8, 2017 at 2:43 am #744161
    timbright

    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, 9 months ago by timbright. Reason: Added more info for the issue
    February 13, 2017 at 6:28 am #746131
    Vinay

    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

    February 26, 2017 at 9:02 am #751895
    a3brown4

    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!

    February 26, 2017 at 4:43 pm #751971
    Vinay

    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

    February 26, 2017 at 7:14 pm #751999
    a3brown4

    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

    February 26, 2017 at 8:49 pm #752028
    Mike

    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

    March 2, 2017 at 7:21 am #754095
    a3brown4

    Great! Thanks for the help!

    March 30, 2018 at 12:26 pm #935267
    NR1234

    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

    March 31, 2018 at 2:45 am #935493
    Mike

    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

    April 3, 2018 at 6:46 am #936329
    NR1234

    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

    April 3, 2018 at 6:51 am #936330
    NR1234

    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

    April 3, 2018 at 9:37 am #936405
    Rikard

    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

    April 3, 2018 at 9:38 am #936406
    Daniel
    This reply has been marked as private.
    April 3, 2018 at 12:03 pm #936490
    Mike

    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

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