Contact form same as on BePlay demo

beusmarko

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!

Albert

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.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

beusmarko

Thank you.

I will create a test site!

Thanks

beusmarko

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

Albert

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;
}

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

beusmarko

Thanks lot!

It works!

Albert

You're welcome

Learn more: Video Tutorials | How To | FAQ Vote on what comes next