Contact form on top of homepage slider

Hi aThemes,

We currently use your Sydney Pro theme and we were wondering if you could let us know how we may be able to put a Contact Form 7 form on top of the homepage slider (please see example screenshot below).

We appreciate any help you can provide.

Thank you

Hello there,

Check out this solution which tells you how insert a search form widget to the main slider. In your case, you should use a text widget to insert the CF7 shortcode.

Regards,
Kharis

Hi Kharisblank,

Thank you for your help with this suggestion. We were hoping you could let us know what the code necessary to paste the Contact Form 7 code would be (the shortcode we would like to use is this: [contact-form-7 id=“1741” title=“Request a Call Back”]).

We looked at the hyperlink you provided but our coding knowledge is limited and we would not like risking breaking the code. Could you please provide the code necessary and let us know exactly where to paste it?

Thank you for your time and we appreciate very much your help with this.

Regards,
German

Hello there,

Here’s the easier steps you can follow.

Firstly, add this function to your child theme’s functions.php file or use Code Snippets if you don’t want to run a child theme.

    add_action('sydney_after_header', 'sydney_child_extra_slide_content');
    function sydney_child_extra_slide_content() {
      ?>
        <div class="extra-slide-content">
          <?php echo do_shortcode('[contact-form-7 id="1439" title="Contact form 1"]'); ?>
        </div><!-- /.extra-slide-content -->
      <?php
    } 

This code will add a contact form right after the mail slider area. Replace [contact-form-7 id=“1439” title=“Contact form 1”] with your Contact Form 7 shortcode. To move it inside the mail slider, do the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    (function($){

        "use strict";

        if( $('.header-slider').length ) {

          jQuery(window).load(function () {

            var topSearch  = $('.extra-slide-content');

            topSearch.remove().clone().appendTo('.header-slider');

          });

        }

    })(jQuery); 
  1. Update

Then do some styling with this CSS code:

    .slide-inner {
      width: 45% !important;
      max-width: 100%;
      padding-left: 40px;
    }

    .extra-slide-content {
      position: absolute;
      z-index: 3;
      display: block;
      max-width: 250px;
      left: 50%;
      top: 60%;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      transform: translateY(-50%);
      color: #fff;
    }

    .extra-slide-content .wpcf7-form select,
    .extra-slide-content .wpcf7-form input[type="text"],
    .extra-slide-content .wpcf7-form input[type="password"],
    .extra-slide-content .wpcf7-form input[type="datetime"],
    .extra-slide-content .wpcf7-form input[type="datetime-local"],
    .extra-slide-content .wpcf7-form input[type="date"],
    .extra-slide-content .wpcf7-form input[type="month"],
    .extra-slide-content .wpcf7-form input[type="time"],
    .extra-slide-content .wpcf7-form input[type="week"],
    .extra-slide-content .wpcf7-form input[type="number"],
    .extra-slide-content .wpcf7-form input[type="email"],
    .extra-slide-content .wpcf7-form input[type="url"],
    .extra-slide-content .wpcf7-form input[type="search"],
    .extra-slide-content .wpcf7-form input[type="tel"],
    .extra-slide-content .wpcf7-form input[type="color"] {
      height: 35px;
      color: #47425d;
    }

    .extra-slide-content .wpcf7-form textarea {
      width: 100% !important;
    }

Add it to Appearance > Customize > Additional CSS from dashboard. You’d do some your own CSS code adjustments to meet your design need.

Regards,
Kharis

Hi Kharisblank,

Thank you very much for your help and great customer service. We applied the code to the site and it worked. There is only one detail we wanted to ask for help with and it is that the contact form is still showing when we go to other pages (please see the screenshot below). We would appreciate very much your help in making the contact form only show up on the slider in the main homepage.

Website URL: http://1nt.720.myftpupload.com/about-us/

Thank you,
German

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    body:not(.home) .extra-slide-content {
      display: none;
    } 

Regards,
Kharis

Thank you very much for your help Kharisblank, the form only shows on the homepage now. Is there a way I could move the contact form a bit to the right of the slider though? It’s really close to the middle.

I appreciate your help.

Thank you,
German

Hello there,

Please try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .extra-slide-content {
      left: 60%;
    } 

Or, could this one work better for you?

    .extra-slide-content {
      left: auto;
      right: 30px;
    }

Regards,
Kharis

Thank you for your help Kharisblank. I have added the CSS code provided. While it looks good on desktop, I checked mobile and the contact form overlaps to the left. Please see the screenshot below. Could you provide the code necessary to make it mobile responsive?

Our goal is to be able to have a contact form on the slider that is responsive on desktop, tablet, and mobile.

Thank you,
German

Hello there,

Please note that the header area on smaller device is very narrow. Do you think that the form is still accessible? What about hiding it only on smaller screen instead?

Regards,
Kharis

Thank you Kharisblank, hiding it on a smaller screen is a good option. What code would we need for that?

Regards,
German

Thank you for providing support on this matter. However, there are still some issues with the contact from on ths slider. As we would very much like the contact form to work on top of the slider and be responsive depending on screen size, we were wondering if Athemes provides additional services, such as developers to help us in solving this request. If so, what would be the rate for their service?

Regards,
German

Conversation moved to private message.