Hi-
I’d like to be able to duplicate the form used in the lawyer demo. I have contact form 7 installed. Is that the correct plugin? Is there a way for me to get the same form? Thanks for any help you can offer.
-Brian
Hi Brian,
Thanks for reaching out.
Yes, you can use the Contact Form 7 to create the form, but you need to adjust the style as per the design. You can also try importing the demo into your site and use the Creative Contact Form and change the Form into it to get the exact design of the demo.
Hope it helps.
Thanks
Thanks for getting back to me, tristup.
I did import the demo, but I don’t see Creative Contact Form anywhere when I look in the WP dashboard under Contact. Can you tell me where I can find it? If not, is there a way to install it without installing the whole demo?
Hi Brian,
Sorry for the confussion here, Creative Contact Form is a template and can be found while clicking into the Load Template in the Page Builder. You can insert the Template into any page and choose your form in the Contact Form 7 element.
Hope it helps.
Thanks
Hi, Tristup-
Thanks for that. I got the contact Creative Contact Forms 3 template loaded onto my page, but there 's nothing in it. If I pull up another form I created with the same fields, it doesn’t look anything like the one in the demo. Is there a way I can get it to look/act exactly the same as the one in the demo?
Thanks.
Hi Brian,
In that case, please provide us login credentials on a “Secure Note” so we can take a closer look.
Thanks,
OK, I’m not getting that option for secure note, though…
Hello @bmahoney59,
The Creative Contact Form 3 demo has been thoroughly explained in this video tutorial:
The form structure and the styling were also added in the description of the video.
Hope this helps.
Thanks for getting back to me. Sorry, though, I don’t want to create a multi-step contact form. I just want to duplicate what’s in the lawyer demo.
Is there anywhere I can just cut/paste the relevant blocks of code and be told where to put them? I’m not a coder, the stuff she’s doing in the video seems pretty involved. It also sounds like I’d have to watch the whole series to be able to do what she’s talking about. I thought by going off a template I’d basically be able to start with a complete version of the site.
Thanks.
Hi Brian,
It seems that you have not selected the Contact Form 7 within the Creative Contact Form 3 as I have told you in the first post.
I have created a Test page, and added the Creative Contact Form 3 and changed the Contact Form 7 in it, and the design applied to it. Please check the Test page URL in the secure note.
Thanks
Hi, Tristup-
thanks for that. Yes, I didn’t have it set that way, but I had already got that far on my own. What I’m looking for is an exact copy of the form in the demo. Specifically:
-the way the field name appears in the field and disappears when the user starts to type
-ideally the layout/font/field sizes (probably not a big deal to figure these out, I just thought when using the demo, you were always starting with everything identical then changing from there).
Please let me know if there’s an easy way to do this. Thanks.
-Brian
Hi Brian,
Thank you for the clarification,
1.) That is a field placeholder, so you need to remove all your fields label and set placeholder (https://contactform7.com/setting-placeholder-text/)
2.) Structure and CSS of the contact form 3 demo are on the description of the video provided above. Here’s a direct link.
Hope it helps,
Cheers!
Thanks for this, Friech. Sorry, I’m still not clear on the actual steps I need to take, though. Again, sorry, not a coder, just hoping for a quick/easy way to duplicate what’s in the demo.
-When you say " so you need to remove all your fields label" are you talking about on the Contact 7 form?
-Does it matter if I create a new contact 7 form vs. use my existing one?
-Can you tell me specifically where to paste the form-structure.html code?
-Can you tell me specifically where to paste the form-styling.css?
-Can you confirm that I don’t need the multi-step form plugin in order to duplicate the form in the demo?
Thanks.
Hi Brian,
1.) Yes, I am talking about Contact Form 7. Those field labels (e.g.<p><b>Your Name</b><br />) on your form you need to remove those.
2.) No it does not, you can create a new one or use an existing one.
3.) Paste the structure HTML in the form editor, and replace the field shortcodes (e.g. [text* first-name placeholder "First Name *"]) with your own.
4.) You can paste the CSS styling on the Page > CSS area or if you’re planning to put this form on multiple pages, you can paste it on the Theme Options > Global CSS area.
5.) Yes, you don’t need the multi-step form plugin, in fact on the structure HTML, you need to remove these part.
[progressbar type:bullets]
[step_start "Personal Information"]
[step_finish]
[step_start "Case Information"]
[textarea case-information placeholder "Please state your case information in detail..."]
[prev "Previous"][next "Next"]
[step_finish]
[step_start "Additional Information"]
[textarea addtl-information placeholder "Please let us know if you have further questions or concerns..."]
[prev "Previous"][submit "Send"]
[step_finish]
Look at this draft page for your reference.
Hope it helps,
Cheers!
This is GREAT. Tremendously helpful.
Thank you!
I implemented it and I have a couple of other questions:
Is there a way to get the bottom line of the textarea (brief description of your circumstances/issue) to line up perfectly with the email field? I notice on the demo, they align better than on my form, but still not perfectly.
I’m going to be using the form on multiple pages. Should I put that CSS on every page or would it be better to have it global?
Thanks again.
-Brian
Hello Brian,
It is best that you only add the CSS on the page that has the form in it.
As for your form, you have added this:
You can add <span> </span><br> before the [textarea ...] shortcode to align the textarea to the email field.
Kindly let us know how it goes.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.