MOVU Components

Contact Form: User Logged 

<div class="movu-card-holder contact-form">
    <div class="movu-card-block">
        <div class="movu-card-block-inner">
            <div class="title-wrapper">

                <h3 class="movu-card-title">How can we help you?</h3>

            </div>

            <div class="border-2-bottom"></div>

            <section class="clearfix">

                <p class="text-message">Contact us if you have questions, suggestions or any complaint.</p>

                <div class="col-xs-12 col-lg-6 no-padding-left form-input">
                    <movu-text-input placeholder="Inquiry ID (optional)"></movu-text-input>
                </div>

                <div class="row">
                    <div class="col-xs-12">
                        <div class="border-2-bottom movu-spacing-16-top form-input"></div>
                    </div>
                </div>

                <div class="col-xs-12 col-lg-6 no-padding-right-md no-padding-left form-input">
                    <movu-dropdown placeholder_text='Choose the category' items='[{"id":"1","name":"Item 1"},{"id":"2","name":"Item 2"}, {"id":"3","name":"Item 3"}]'></movu-dropdown>
                </div>

                <div class="col-xs-12 no-padding-right no-padding-left movu-spacing-4-top">
                    <movu-textarea placeholder="Your comment"></movu-textarea>
                </div>

                <div class="col-xs-12 no-padding-right no-padding-left movu-spacing-24-top">
                    <movu-file-upload placeholder="Attach files"></movu-file-upload>
                </div>
                <div class="row">
                    <div class="col-xs-12 movu-spacing-16-top">
                        <movu-button primary text="send" custom_class="pull-right button-default-size"></movu-button>
                    </div>
                </div>

            </section>
        </div>
    </div>
</div>
 
{% extends '@card-with-heading' %}
{% block cardContent %}
    <p class="text-message">Contact us if you have questions, suggestions or any complaint.</p>
    
    {% if user_logged %}
    <div class="row">
        <div class="col-xs-12">
            <div style="display: inline-block;">
                {% render '@radio-button--checked', { radioBtnText: 'Mr' }, true %}
            </div>
            <div style="display: inline-block; margin-left: 16px;">
                {% render '@radio-button', { radioBtnText: 'Ms' }, true %}
            </div>
        </div>
    </div>

    <div class="col-xs-12 col-lg-6 no-padding-left form-input">
        <movu-text-input placeholder="First name" message></movu-text-input>
    </div>
    <div class="col-xs-12 col-lg-6 no-padding-left no-padding-right">
        <movu-text-input placeholder="Last name" message></movu-text-input>
    </div>
    <div class="col-xs-12 col-lg-6 no-padding-left form-input">
        <movu-text-input placeholder="Email address" message></movu-text-input>
    </div>
    <div class="col-xs-12 col-lg-6 no-padding-left no-padding-right">
        <movu-text-input placeholder="Mobile phone" message></movu-text-input>
    </div>
    {% endif %}

    <div class="col-xs-12 col-lg-6 no-padding-left form-input">
        <movu-text-input placeholder="Inquiry ID (optional)" {% if user_logged %} message_text="If you already have an inquiry, you can find this number in your email." {% endif %}></movu-text-input>
    </div>

    <div class="row">
        <div class="col-xs-12">
            <div class="border-2-bottom movu-spacing-16-top form-input"></div>
        </div>
    </div>

    <div class="col-xs-12 col-lg-6 no-padding-right-md no-padding-left form-input">
       <movu-dropdown placeholder_text='Choose the category' items='[{"id":"1","name":"Item 1"},{"id":"2","name":"Item 2"}, {"id":"3","name":"Item 3"}]'></movu-dropdown>
    </div>

    <div class="col-xs-12 no-padding-right no-padding-left movu-spacing-4-top">
        <movu-textarea placeholder="{{ placeholder }}"></movu-textarea>
    </div>

    <div class="col-xs-12 no-padding-right no-padding-left movu-spacing-24-top">
        <movu-file-upload placeholder="Attach files"></movu-file-upload>
    </div>
    <div class="row">
        <div class="col-xs-12 movu-spacing-16-top">
            <movu-button primary text="send" custom_class="pull-right button-default-size"></movu-button>
        </div>
    </div>

{% endblock %}
 
{
  "cardTitle": "How can we help you?",
  "cardClass": "contact-form",
  "placeholder": "Your comment",
  "titleBorderExists": true,
  "user_logged": false
}

No notes defined.