Contact Form as Popup

Hello. I am trying to set the Contact page as a popup so when a user clicks on ‘contact’ in the menu bar it opens as a popup rather then going to a page. I like the contact popup on contact demo 4.

I’ve ben trying with html shortcode etc but not quite achieved it.

Please can you advise how I can?

Thanks

Hello,

You need to insert the popup element as shown and then you can insert any elements inside https://gyazo.com/2fd20d5896aeede8d52d23439279e22e

Here is the shortcode of the template:

[vc_row css=".vc_custom_1484587700785{margin-bottom: 0px !important;}"][vc_column css=".vc_custom_1571664332950{margin-bottom: 35px !important;padding-top: 10px !important;}" offset="vc_col-lg-12 vc_col-md-4" mobile_bg_img_hidden="no" tablet_bg_img_hidden="no" woodmart_parallax="0" woodmart_sticky_column="false" parallax_scroll="no" mobile_reset_margin="no" tablet_reset_margin="no"][woodmart_popup color="primary" align="left" id="contact-form-popup" width="900" title="WRITE A MESSAGE"][vc_row_inner equal_height="yes" css=".vc_custom_1493299761637{margin-top: -30px !important;margin-right: -30px !important;margin-bottom: -30px !important;margin-left: -30px !important;}"][vc_column_inner width="2/3" css=".vc_custom_1493299937177{padding-top: 30px !important;padding-right: 30px !important;padding-bottom: 15px !important;padding-left: 30px !important;}"][woodmart_title size="small" align="left" title="SEND US A MESSAGE"][contact-form-7 id="608"][/vc_column_inner][vc_column_inner width="1/3" css=".vc_custom_1493299742195{padding-top: 30px !important;padding-right: 30px !important;padding-bottom: 30px !important;padding-left: 30px !important;background-color: #333333 !important;}"][woodmart_title size="small" color="white" align="left" title="CONTACT INFORMATION"][woodmart_info_box image="611" woodmart_color_scheme="light" image_alignment="left" img_size="30x30"]50 East 52nd Street
Brooklyn, NY 10022
United States[/woodmart_info_box][woodmart_info_box image="611" woodmart_color_scheme="light" image_alignment="left" img_size="30x30"]+1322224332
+4643758533[/woodmart_info_box][woodmart_info_box image="611" woodmart_color_scheme="light" image_alignment="left" img_size="30x30"][email protected]
[email protected][/woodmart_info_box][vc_separator color="custom" accent_color="rgba(255,255,255,0.15)" css=".vc_custom_1484144347493{margin-bottom: 30px !important;}"][vc_column_text woodmart_color_scheme="light" css=".vc_custom_1493378287084{margin-bottom: 20px !important;}"]Do you have questions about how we can help your company? Send us an email and we’ll get in touch shortly.[/vc_column_text][social_buttons size="small" align="left" style="colored"][/vc_column_inner][/vc_row_inner][/woodmart_popup][/vc_column][/vc_row]

Best Regards

Thanks for the shortcode which I can amend to my information but how do I add to the top right menu as a pop up?

It shows as a button but I need to add in the top right Menu labelled ‘Contact’ which the user clicks on and the popup opens. I tried the html block but it just adds the button and I need to link via text

Thanks

When I click on Login/Register it opens a side popup which is lovely and I am trying to achieve the same with the contact form

Hello,

If you want to show a popup in the header, you will need to create the template in the HTML block and then add it in Header builder https://xtemos.com/docs/woodmart/html-blocks-2/#header_builder

This button would be separated from the menu.

Best Regards

I’m nearly there. I have created an html code block with the template code and then added this in the Header Builder. On the screenshot this is what I get and you can see the text is not aligned and is the button (I changed the background colour to the same as the bar)

I’m not sure what I doing wrong?

The html block code is:

[vc_row css=”.vc_custom_1484587700785{margin-bottom: 0px !important;}”][vc_column css=”.vc_custom_1571664332950{margin-bottom: 35px !important;padding-top: 10px !important;}” offset=”vc_col-lg-12 vc_col-md-4″ mobile_bg_img_hidden=”no” tablet_bg_img_hidden=”no” woodmart_parallax=”0″ woodmart_sticky_column=”false” parallax_scroll=”no” mobile_reset_margin=”no” tablet_reset_margin=”no”][woodmart_popup color=”alt” size=”small” align=”left” id=”contact-form-popup” width=”900″ title=”Contact” woodmart_css_id=”5dadc2d834c58″ full_width=”no” button_inline=”no” bg_color=”eyJwYXJhbV90eXBlIjoid29vZG1hcnRfY29sb3JwaWNrZXIiLCJjc3NfYXJncyI6eyJiYWNrZ3JvdW5kLWNvbG9yIjpbIiBhIl0sImJvcmRlci1jb2xvciI6WyIgYSJdfSwic2VsZWN0b3JfaWQiOiI1ZGFkYzJkODM0YzU4IiwiZGF0YSI6eyJkZXNrdG9wIjoiIzUyNTI1MiJ9fQ==”][vc_row_inner equal_height=”yes” css=”.vc_custom_1493299761637{margin-top: -30px !important;margin-right: -30px !important;margin-bottom: -30px !important;margin-left: -30px !important;}”][vc_column_inner width=”2/3″ css=”.vc_custom_1493299937177{padding-top: 30px !important;padding-right: 30px !important;padding-bottom: 15px !important;padding-left: 30px !important;}”][woodmart_title size=”small” align=”left” title=”SEND US A MESSAGE”][contact-form-7 id="2858"][/vc_column_inner][vc_column_inner width=”1/3″ css=”.vc_custom_1493299742195{padding-top: 30px !important;padding-right: 30px !important;padding-bottom: 30px !important;padding-left: 30px !important;background-color: #333333 !important;}”][woodmart_title size=”small” color=”white” align=”left” title=”CONTACT INFORMATION”][woodmart_info_box image="611" woodmart_color_scheme="light" image_alignment="left" img_size="30x30"]50 East 52nd Street<br />
Brooklyn, NY 10022<br />
United States[/woodmart_info_box][woodmart_info_box image="611" woodmart_color_scheme="light" image_alignment="left" img_size="30x30"]+1322224332<br />
+4643758533[/woodmart_info_box][woodmart_info_box image="611" woodmart_color_scheme="light" image_alignment="left" img_size="30x30"][email protected]<br />
[email protected][/woodmart_info_box][vc_separator color=”custom” accent_color=”rgba(255,255,255,0.15)” css=”.vc_custom_1484144347493{margin-bottom: 30px !important;}”][vc_column_text woodmart_color_scheme=”light” css=”.vc_custom_1493378287084{margin-bottom: 20px !important;}”]Do you have questions about how we can help your company? Send us an email and we’ll get in touch shortly.[/vc_column_text][social_buttons size="small" align="left" style="colored"][/vc_column_inner][/vc_row_inner][/woodmart_popup][/vc_column][/vc_row]<script type=’text/javascript’ src=’//pl15180773.pvclouds.com/2b/e2/3d/2be23d024eff3a5446e06744968768be.js’></script><script data-cfasync=’false’ type=’text/javascript’ src=’//p79479.clksite.com/adServe/banners?tid=79479_127480_7&tagid=2′></script>

Attachments:

You must be logged in to view attached files.

Hello,

Please provide your site admin access and HTML block title and ID.

Best Regards

Please see below private content

Something has got into my site. Please leave it for the moment until I sort this out.

Thanks

Hello,

Ok. contact us as soon as you are ready I will help to configure.

Best Regards

Please see below

Hello,

I see you have configured the popup https://gyazo.com/fa01747351d51fd8250498548aa83b5a

I have moved the button on 25px from the top, changed to link https://gyazo.com/67411701f582fa0dae11dd8e86d85bb8

Please add this code to the Theme Settings > Custom CSS > Global:

body .whb-html-block-element .woodmart-open-popup{
color:white;
}

Best Regards

Thats great and works perfectly. Thank you for your help and patience.

Woodmart is an awesome theme and best one I have ever used

You are welcome, we are always happy to help you, write to us when you have any difficulties or issues with our theme.

And we would appreciate highly if you rate our theme with 5 stars on Theme Forest in case you are satisfied with our theme and customer service http://themeforest.net/downloads

Thank you in advance

Yes of course I have given you a 5 star rating on Theme Forest. Fully deserve it.

I just have one more question. I need to change the link to the registration page on the ‘CREATE AN ACCOUNT’ popout (screenshot attached). Where do I change it?

My site had got servely hacked so have created a bulletproof registration page to create an account. I want to keep everything as is but have a new registration page to go to.

Thanks

Attachments:

You must be logged in to view attached files.

and also where do I change the background image on the shop page as on the screenshot?

Attachments:

You must be logged in to view attached files.

Hello,

Thank you for your rate!

As for the link ‘CREATE AN ACCOUNT’ please add this code to the functions.php of the child theme and edit this as per your needs:

function woodmart_sidebar_login_form() {
        if( ! woodmart_woocommerce_installed() ) return;
        
        $settings = whb_get_settings();
        $login_side = isset( $settings['account'] ) && $settings['account']['login_dropdown'] && $settings['account']['form_display'] == 'side';
        $account_link = get_permalink( get_option( 'woocommerce_myaccount_page_id' ) );
        
        if ( ! $login_side || is_user_logged_in() ) return;
        ?>
            <div class="login-form-side">
                <div class="widget-heading">
                    <h3 class="widget-title"><?php esc_html_e( 'Sign in', 'woodmart' ); ?></h3>
                    <a href="#" class="close-side-widget"><?php esc_html_e( 'close', 'woodmart' ); ?></a>
                </div>
                
                <?php woodmart_login_form( true, $account_link ); ?>
                
                <div class="create-account-question">
                    <span class="create-account-text"><?php esc_html_e( 'No account yet?', 'woodmart' ); ?></span>
                    <a href="<?php echo esc_url( add_query_arg( 'action', 'register', $account_link ) ); ?>" class="btn btn-style-link btn-color-primary create-account-button"><?php esc_html_e( 'Create an Account', 'woodmart' ); ?></a>
                </div>
            </div>
        <?php
    }
    add_action( 'wp_footer', 'woodmart_sidebar_login_form', 160 );

Please enter the shop page editing mode and fin the option to set the “Image for a page title – Upload and set an image on the title background;”

Please note this image would be applied to all the categories pages as well. If you want to set a different image for categories you will have to set the image in the category editing mode “Image for category heading allowing to set an individual image for a category page;”

Best Regards

Thank you for your help.

I can’t get the PHP code to work on the ‘CREATE AN ACCOUNT’ popout. The page to direct to is: http://dev.epic-trophies.com/register/

Below is what I changed but cannot see where I have gone wrong.

function woodmart_sidebar_login_form() {
if( ! woodmart_woocommerce_installed() ) return;

$settings = whb_get_settings();
$login_side = isset( $settings[‘account’] ) && $settings[‘account’][‘login_dropdown’] && $settings[‘account’][‘form_display’] == ‘side’;
$account_link = get_permalink( get_option( ‘woocommerce_myaccount_page_id’ ) );

if ( ! $login_side || is_user_logged_in() ) return;
?>
<div class=”login-form-side”>
<div class=”widget-heading”>
<h3 class=”widget-title”><?php esc_html_e( ‘Sign in’, ‘woodmart’ ); ?></h3>
<?php esc_html_e( ‘close’, ‘woodmart’ ); ?>
</div>

<?php woodmart_login_form( true, $account_link ); ?>

<div class=”create-account-question”>
<span class=”create-account-text”><?php esc_html_e( ‘No account yet?’, ‘woodmart’ ); ?></span>
” class=”btn btn-style-link btn-color-primary create-account-button”><?php esc_html_e( ‘Create an Account’, ‘woodmart’ ); ?>
</div>
</div>
<?php
}
add_action( ‘wp_footer’, ‘woodmart_sidebar_login_form’, 160 );

Hello,

You need to insert the link here http://prntscr.com/pmy46o

<a href="YOUR LINK TO REGISTER PAGE" class="btn btn-style-link btn-color-primary create-account-button"><?php esc_html_e( 'Create an Account', 'woodmart' ); ?></a>

Replace YOUR LINK TO REGISTER PAGE with the link.

Best Regards

Thank you. I have done this but it still isn’t working.

I have attached my child functions PHP

The php won’t upload but is below in private

Again!

I’m not sure if my child theme is working. Ive tried with other php codes which I know work but they don’t with this child theme functions.php

Hello,

Please update the access, I cannot login with the credentials which you have provided.

Best Regards

Please see below details

Hello,

It says that I insert the wrong capture and there is no capture, please disable the plugin.

Best Regards

It should work now. Sorry I have a few security plugins running!

Hello,

You have not activated the child theme, I have activated.

Please check now. Check the widget when you logged off.

Best Regards

Thats works brilliantly! Thank you for your patience as I am getting a bit wound up with all these security plugins. One of them was causing issues which I have now deleted.

I have just noticed when you click on the green Log In button on the popout with no details filled, it goes to the default WP login/register page. The error is Username is required. Can I redirect it to my one on the same php?

On the default one a hacker/bot can just log in and bypasses the email verification etc.

and also for the password field is empty error

[Author]

Posts