CODEWITHSUNDEEP
contact-formcontact-form-7
istoby
istoby

Reputation: 145

Wordpress: On jQuery button click preselect option in Contact Form 7 menu

I have a Wordpress site, where is a page with many items. When user clicks on item he wants, page will open. In this page there is a button "Contact". The thing I want to achieve is that when user hits the contact button, opens next page with the form and the select menu is preselected depending on the email on this item page. Can someone please help me with this?

Here is some parts of single post page, where is the button for the click to go to the form page:

<button class="btn">
 <span>Contact</span>
</button>

This page has a lot of information where is also mentioned email address for this specific item of this page:

<p class="email">Email: <a href="mailto:<?php the_field('contact_email'); ?>">
 <?php the_field('contact_email'); ?>
</a></p>

Here is my Contact Form 7 code:

<div class="contact-form">
<div class="form-group">
  [text* your-name class:form-control placeholder "Name"] 
</div>
<div class="form-group">
  [text* your-name class:form-control placeholder "Company"] 
</div>
<div class="form-group">
  [email* your-email class:form-control placeholder "Email"] 
</div>
<div class="form-group">
  [select* menu-105 class:form-control "Office 1|[email protected]" "Office 2|[email protected]" "Office 3|[email protected]" "Office 4|[email protected]"]
</div>
<div class="form-group">
  [text your-subject class:form-control placeholder "Subject"] 
</div>
<div class="form-group">
  [textarea your-message x3 class:form-control placeholder "Message"] 
</div>
<div class="form-group form-check">
 [acceptance acceptance-955 optional] By ticking this box you agree to this information here in <a href="https://www.google.com" target="_blank">privacy policy</a>.[/acceptance]
</div>
<div class="btn-container-right">
<div class="btn-wrapper">
  [submit "Send" class:btn-sm]
</div>
</div>
</div>

The thing I want to achieve is that when user hits the contact button, opens next page with the form and the select menu is preselected depending on the email on this item page. Can someone please help me with this?

Upvotes: 0

Views: 807

Answers (1)

Howard E
Howard E

Reputation: 5659

Ok... so first, you want to pass a URL parameter to the contact form from the button.

So your updated link is, (where you're urlecoding the space as %20)

yourdomain.com/contact-form/?email=office%201

Then add this script to your theme .js files or wherever you can.

jQuery(document).ready(function($){
    $.urlParam = function (name) {
        var results = new RegExp('[\?&]' + name + '=([^&#]*)')
                          .exec(window.location.search);

        return (results !== null) ? results[1] || 0 : false;
    }
    // Since above function returns false if blank, check if email $_GET param is entered
    if ( false !== $.urlParam('email')){
        $('select[name="your-email"]').val(decodeURIComponent($.urlParam('email')))
            .change(); // set select name to the name of your form field in CF7
    }
});

the decodeURIComponent is only if you're using a URL Encoded parameter... This is because you have a space in your selections "Office 1", "Office 2"

set the [name=] to the name of your CF7 field.

Upvotes: 0

Related Questions