![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
Tagged: contact form 7
-
AuthorPosts
-
January 19, 2016 at 9:45 am #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,
DanielJanuary 19, 2016 at 10:41 am #567735Hey strila!
We have setup a custom CF7 form please check the page in private message.
Regards,
VinayJanuary 19, 2016 at 11:33 am #567761Hi Vinay,
Thanks for your help! I updated the request in the private message.
Regards,
DanielJanuary 19, 2016 at 11:38 am #567763Hi!
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,
VinayJanuary 19, 2016 at 11:43 am #567765Hi 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!
DanielJanuary 19, 2016 at 1:43 pm #567819Hi!
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!
VinayPS: Your profile pic is colorful :) it reminds me of the “Festival of Colors” or “Holi Festival”.
January 19, 2016 at 3:47 pm #567872Hi Vinay,
How do I put a CF7 form in different grids in the advanced layout builder? I have no clue! :)
Cheers,
DanielPS. This was a festival dedicated to the Holi Festival! Check out http://www.indicolorfestival.nl/overons.html :)
January 19, 2016 at 4:07 pm #567893Hey!
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!
VinayPS: Nice site… I played Holi last year in Hampi.
January 19, 2016 at 4:55 pm #567957Hi Vinay,
I did what you suggested but no luck, the fields are still 1/1 and not 1/2 width. I want this:
January 19, 2016 at 5:32 pm #567982Hi!
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,
VinayJanuary 19, 2016 at 5:38 pm #567987Hi 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,
DanielJanuary 19, 2016 at 9:31 pm #568133Hey!
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!
VinayJanuary 20, 2016 at 8:47 am #568434Hey!
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,
VinayJanuary 31, 2016 at 7:15 am #575180Hi!
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,
VinayFebruary 1, 2016 at 2:07 pm #575742Hi 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,
DanielFebruary 1, 2016 at 5:30 pm #575910Hey!
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!
VinayFebruary 8, 2017 at 2:43 am #744161Is 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, 7 months ago by
timbright. Reason: Added more info for the issue
February 13, 2017 at 6:28 am #746131Hi,
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,
VinayFebruary 26, 2017 at 9:02 am #751895Hi! 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 #751971Hi,
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,
VinayFebruary 26, 2017 at 7:14 pm #751999Hi 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,
-AricFebruary 26, 2017 at 8:49 pm #752028Hi,
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 helpsBest regards,
MikeMarch 2, 2017 at 7:21 am #754095Great! Thanks for the help!
March 30, 2018 at 12:26 pm #935267Hi,
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 #935493Hi,
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; }
Best regards,
MikeApril 3, 2018 at 6:46 am #936329Dear 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 #936330Hi 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 #936405Hi Garima,
Great, glad you got it working. Please let us know if you should need any further help on the topic.
Best regards,
RikardApril 3, 2018 at 9:38 am #936406This reply has been marked as private.April 3, 2018 at 12:03 pm #936490Hi,
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 -
This reply was modified 7 years, 7 months ago by
-
AuthorPosts
- The topic ‘Contact form 7 & Enfold contact form: identical styling’ is closed to new replies.