Contact form same as on BePlay demo

Comments

• Albert

  June 2015

  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

  June 2015

  Thank you.
  
  I will create a test site!
  
  Thanks
  
• beusmarko

  June 2015

  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

  June 2015

  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

  June 2015

  Thanks lot!
  
  It works!
  
• Albert

  June 2015

  You're welcome
  

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