floating contact form

[afarahani]

How can I add more fields to the floating contact form and make it specific to the page it appears on e.g. when someone fills it out I know from which page the contact is coming.

[Radu]

Hi,

You can do this by adding this functions.php from kleo-child directory this code

COPY CODE

if (!function_exists('kleo_contact_form')) {
	function kleo_contact_form( $atts, $content = null ) {
		extract(shortcode_atts(array(
			'title'    	 => 'CONTACT US'
		), $atts));
	
		$output = '';
		
		$output .= '<div class="kleo-quick-contact-wrapper">'
			.'<a class="kleo-quick-contact-link" href="#"><i class="icon-mail-alt"></i></a>'
			.'<div id="kleo-quick-contact">'
				.'<h4 class="kleo-qc-title">'. $title .'</h4>'
				.'<p>'. do_shortcode($content).'</p>'
				.'<form class="kleo-contact-form" action="#" method="post" novalidate>'
					.'<input type="text" placeholder="'.__("Your Name",'kleo_framework').'" required id="contact_name" name="contact_name" class="form-control" value="" tabindex="276" />'
					.'<input type="email" required placeholder="' . __("Your Email",'kleo_framework') . '" id="contact_email" name="contact_email" class="form-control" value="" tabindex="277"  />'
					.'<textarea placeholder="' . __("Type your message...",'kleo_framework') . '" required id="contact_content" name="contact_content" class="form-control" tabindex="278"></textarea>'
						.'<input type="hidden" name="action" value="kleo_sendmail">'
						.'<button tabindex="279" class="btn btn-default pull-right" type="submit">'. __("Send",'kleo_framework').'</button>'
					.'<div class="kleo-contact-loading">'. __("Sending",'kleo_framework').' <i class="icon-spinner icon-spin icon-large"></i></div>'
					.'<div class="kleo-contact-success"> </div>'
				.'</form>'
				.'<div class="bottom-arrow"></div>'
			.'</div>'
		.'</div><!--end kleo-quick-contact-wrapper-->';
			
		return $output;
	}
	add_shortcode('kleo_contact_form', 'kleo_contact_form');
}

Now you can made you custom html markup

Regards

Radu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[afarahani]

Where should I add html markup? Can you be more specific.

[Radu]

This snippet should be added to wp-content/themes/kleo-child/

Then you should modify the form in that function.

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[afarahani]

You are very responsive!

Ok I added the code to the function.php in child theme. Now I need to know the code for a drop down menu and multi- select element. Where can I get code for that.

If I want to have another sliding contact form (not site wide but page specific), how can I do that? How can I have a similar sliding element as you have in Kleo website here for theme setting and demo

thanks.

[Radu]

Hi,

Replace the code that i have provided you before with this

COPY CODE

if (!function_exists('kleo_contact_form')) {
    function kleo_contact_form( $atts, $content = null ) {
        extract(shortcode_atts(array(
            'title'    	 => 'CONTACT US'
        ), $atts));

        $output = '';

        $output .= '<div class="kleo-quick-contact-wrapper">'
            .'<a class="kleo-quick-contact-link" href="#"><i class="icon-mail-alt"></i></a>'
            .'<div id="kleo-quick-contact">'
            .'<h4 class="kleo-qc-title">'. $title .'</h4>'
            .'<p>'. do_shortcode($content).'</p>'
            .'<form class="kleo-contact-form" action="#" method="post" novalidate>'
            .'<input type="text" placeholder="'.__("Your Name",'kleo_framework').'" required id="contact_name" name="contact_name" class="form-control" value="" tabindex="276" />'
            .'<select class="form-control" multiple>
				        <option value="Placeholder1">Placeholder1</option>
				    	<option value="Placeholder2">Placeholder2</option>
                        <option value="Placeholder3">Placeholder3</option>
                      </select>
				    '
            .'<input type="email" required placeholder="' . __("Your Email",'kleo_framework') . '" id="contact_email" name="contact_email" class="form-control" value="" tabindex="277"  />'
            .'<textarea placeholder="' . __("Type your message...",'kleo_framework') . '" required id="contact_content" name="contact_content" class="form-control" tabindex="278"></textarea>'
            .'<input type="hidden" name="action" value="kleo_sendmail">'
            .'<button tabindex="279" class="btn btn-default pull-right" type="submit">'. __("Send",'kleo_framework').'</button>'
            .'<div class="kleo-contact-loading">'. __("Sending",'kleo_framework').' <i class="icon-spinner icon-spin icon-large"></i></div>'
            .'<div class="kleo-contact-success"> </div>'
            .'</form>'
            .'<div class="bottom-arrow"></div>'
            .'</div>'
            .'</div><!--end kleo-quick-contact-wrapper-->';

        return $output;
    }
    add_shortcode('kleo_contact_form', 'kleo_contact_form');
}

Now it have 3 options.

Regarding to your question “If I want to have another sliding contact form (not site wide but page specific), how can I do that?” You should search for a plugin can can be able to do this, i don’t know any similar plugin to can recommend you.

Regarding to this “How can I have a similar sliding element as you have in Kleo website here for theme setting and demo” the link are incorrect and i cannot see about what you are referring to.

Cheers

RAdu

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Patagonia]

Hi, I was just looking for this, especially as I want to know from which page the form was submitted.

I added the code above (tried both version), to my child theme’s functions.php but see no difference, just the standard form. Does this code still work with Kleo 4? Where is the contact form defined as it is not in the main Kleo theme’s functions.php?

Thanks!

[Patagonia]

Sorry, your code did work, when posted in functions.php

I noticed that the form is defined in lib/themefunctions.php

However, it does not show the refferring page, i.e. from which page the form was sent from, as per the original request (and mine) above. How/where could we add this?

Thanks in advance.

[Patagonia]

Also: the selected option/placeholder does not get sent in the email.

[Radu]

Hi, since you can use a Contact form 7 shortcode now in that area, it should be just a matter of inspecting the CF7 documentation to add a field like that

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Author]

Posts