Contact form same as on BePlay demo

Hi,

I need something similar for my web site as  "What is the answer on our question" Contact 7 form. Is it possible for you to provide me the code for that form?

Thank you!

Comments

  • Hi,

    for this form we used below code in CF7:
    <div class="column one">[radio our-question "A) Cat" "B) Dog" "C) Panda"]</div>
    <div class="column one">[email* your-email placeholder "Your e-mail"] </div>
    <div class="column one">[text* first-name placeholder "First name"]</div>
    <div class="column one">[text* last-name placeholder "Last name"]</div>
    <div class="column one">[submit "PLAY NOW"]</div>
    Next time we recommend to create test site to upload pre-made demos because it's much easier and faster to learn how some things were done.
  • Thank you.

    I will create a test site!

    Thanks
  • One more thing....

    I just did, but I cannot see the styling options, to be it's just a normal contact form, how can I  style it (a blue button) - Play now and different font etc.

    I just see this part:

    <div class="contact_form clearfix">
    <h2 style="color: #fff;">WHAT IS THE ANSWER ON OUR QUESTION?</h2>
    [contact-form-7 id="6" title="Contact form"]
    </div>


    Thank you
  • Probably you must use the same custom css as it is on demo:
    .small { font-size: 90%; line-height: 160%; color: #939898; }

    h2 { font-weight: 700; }

    .contact_form { background: url(http://themes.muffingroup.com/be/play/wp-content/uploads/2015/02/home_play_form_bgd.jpg) left top; padding: 20px; text-shadow: 3px 4px 4px rgba(0, 0, 0, 0.3); -webkit-border-radius: 8px; border-radius: 8px; }

    /* List */
    .list_item .circle { background-image: none; border-color: #19e5e8 !important; border-width: 2px; color: #00717e; font-size: 17px; height: 42px; line-height: 42px; width: 42px; }

    .list_item.lists_4 .list_right { color: #97938e; font-size: 16px; margin-left: 60px; padding-top: 0; }

    /* Form */
    span.wpcf7-list-item { display: block; color: #4cfdff; font-size: 22px; line-height: 34px; margin-left: 0; }

    input[type="submit"] {
        background: #4cfdff;
        color: #00717e;
        font-size: 16px;
        font-weight: bold;
    }

    input[type="text"], input[type="tel"], input[type="password"], input[type="email"], textarea, select, .woocommerce .quantity input.qty {
        background-color: #e8ded0;
        border-color: #312b25;
        box-shadow: 0 0 0 0;
        color: #5e5a55;
    }

    input[type="text"]:focus, input[type="tel"]:focus, input[type="password"]:focus, input[type="email"]:focus, textarea:focus, select:focus {
        background-color: #fff5e9 !important;
        border-color: #312b25 !important;
        color: #3b3733;
    }
  • Thanks lot!

    It works!
Sign In or Register to comment.