Viewing 10 posts - 1 through 10 (of 10 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

    #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

    #33676
    mcn
    Participant

    Hey,

    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?

    #33818
    Aya Ali
    Participant

    Hello Alfred,
    Hope you’re doing well today🙂
    You can simply do that by using Column Shortcodes here
    plugin You can read more about this from here
    Thanks
    Aya

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.