Tagged: 

This topic contains 7 replies, has 2 voices, and was last updated by  Abanob 5 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #2164

    sunshare
    Participant

    Hello, what is the code to create the contact form as the example of Animated Line Style and flat style?

    Thanks

    #2166

    Abanob
    Keymaster

    Hello 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 Style

    On 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 2

    If you have any question, please feed me back.
    Thanks,
    Abanob

    • This reply was modified 5 months ago by  Abanob.
    • This reply was modified 5 months ago by  Abanob.
    • This reply was modified 5 months ago by  Abanob.
    • This reply was modified 5 months ago by  Abanob.
    #2178

    sunshare
    Participant

    I need to know what is the full HTML code to use in the Contact 7 form?

    #2179

    Abanob
    Keymaster

    Hello 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,
    Abanob

    #2180

    sunshare
    Participant

    Thanks for the code.
    The Contact Form 7 element is missing the textarea height option and the button width option.

    #2181

    Abanob
    Keymaster

    Hello 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,
    Abanob

    #2182

    sunshare
    Participant

    My request was not understood, the contact form 7 premium element could be added those options mentioned above.

    #2183

    Abanob
    Keymaster

    Hello 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,
    Abanob

    • This reply was modified 5 months ago by  Abanob.
Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.