- This topic has 9 replies, 4 voices, and was last updated 5 years, 1 month ago by Aya Ali.
-
AuthorPosts
-
April 24, 2018 at 6:08 am #2164sunshareParticipant
Hello, what is the code to create the contact form as the example of Animated Line Style and flat style?
Thanks
April 24, 2018 at 2:32 pm #2166AbanobKeymasterHello sunshare,
Hope you’re having a great day!!
At the beginning, you need to install Contact Form 7 Plugin for Elementor from Contact Form 7.
You can follow the below steps to get the Animated Line Style:]- On the Elementor editor Page -> Premium Contact Form widget, go to style tab -> form, Select On for Focus Border Animation
- Put the Border Type/Width that you prefer
- Choose the Focus Line Color that you need
I have attached you one image for more clarification on how to get the Animated Line style:
Animated StyleOn the other hand, to get the Flat Style, you can follow the below steps:
- Create a new contact form, with no labels
- On the Elementor editor Page -> Premium Contact Form widget, go to style tab -> form, Select Off for Focus Border Animation
I have attached you two images for more clarification on how to get the flat style:
Flat Style 1
Flat Style 2If you have any question, please feed me back.
Thanks,
AbanobApril 24, 2018 at 6:23 pm #2178sunshareParticipantI need to know what is the full HTML code to use in the Contact 7 form?
April 25, 2018 at 9:40 am #2179AbanobKeymasterHello sunshare,
The Animated Line Style Contact Form HTML code:
<div class="row"> <div class="col-sm-6"> <p><label>Name*</label> [text* your-name] </p> </div> <div class="col-sm-6"> <p><label>Email*</label> [email* your-email] </p> </div> </div> <div class="row"> <div class="col-sm-12"> <p><label>Message*</label> [textarea* your-message] </p> </div> </div> <div class="row"> <div class="col-sm-12"> <p></p><p></p><p></p> <div class="pull-right"> [submit class:wpcf7-form-control wpcf7-submit "Send Message"] </div> </div> </div>
The Flat Style Contact Form HTML code:
<div class="row"> <div class="col-sm-6"> <p><label>Name*</label> [text your-name placeholder "Name"] </p> </div> <div class="col-sm-6"> <p><label>Email*</label> [email* your-email placeholder "Email"] </p> </div> </div> <div class="row"> <div class="col-sm-12"> <p><label>Message*</label> [textarea* your-message placeholder "Message"] </p> </div> </div> <div class="row"> <div class="col-sm-12"> <p></p><p></p><p></p> <div class="pull-right"> [submit class:wpcf7-form-control wpcf7-submit "Send Message"] </div> </div> </div>
If you have any farther questions, please feed me back.
Thanks,
AbanobApril 25, 2018 at 10:33 am #2180sunshareParticipantThanks for the code.
The Contact Form 7 element is missing the textarea height option and the button width option.April 25, 2018 at 10:48 am #2181AbanobKeymasterHello sunshare,
Actually, there are many factors that can affects the Contact Form style, Themes that can overrides style, other plugins, etc..
I can check this for you to get the exactly same style as Animated Line and Flat Style, but I will need an admin access credentials for your WordPress site. If you don’t mind, please send them as a PM to me.
Have a great day!!
Thanks,
AbanobApril 25, 2018 at 5:57 pm #2182sunshareParticipantMy request was not understood, the contact form 7 premium element could be added those options mentioned above.
April 26, 2018 at 1:07 pm #2183AbanobKeymasterHello sunshare,
I hope you’re having a great day!!
We always keep seeking for new and powerful options for our elements.
Now, you can find the options you requested in the latest version 2.1.6 of Premium Addons for Elementor, you can install this update and you will find new options (Fields width/Height and much more..) are added to the Premium Contact Form 7 widget.
Thanks again for your request, please if you have any other suggestions, don’t hesitate to feed me back.
Best regards,
AbanobFebruary 25, 2019 at 7:41 pm #33676mcnParticipantHey,
thank you for you image, it helped alot.
However i noticed you have 2 Fields in one line (name and Mail)Could you explian how you achive this please?
February 26, 2019 at 5:09 pm #33818 -
AuthorPosts
- You must be logged in to reply to this topic.