Question 30297 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WP contact form 7: get current date value to populate an input field – WordPress

Using contact form 7 on my website, would like to retrieve the form submission date as an input value to use in "Jetpack CRM" for a custom field. I want to avoid that the user has to select the date with a date picker.

Until now i only managed to get the current date value with [hidden today_date _date] that i can use in email templates, but this is not the thing i need.

What i tried so far (after reading How do I change the value of text field in wordpress contact form 7 using javascript):

In contact form 7, i added the field <label> [text submission_date id:submissiondate ""] </label>, hoping that the javascript would fill out the empty quotes with the dateTime value.

With the plugin "WP Headers and Footers" i added the script

    var today = new Date();

    var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();

    var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();

    var dateTime = date+' '+time;

    document.getElementById("submissiondate").value = dateTime;

I tried the script in the header, in the body and in the footer.

The result is always: an empty form field and a js error:

Uncaught TypeError: document.getElementById(…) is null

Can anybody help me with this?

EDIT:
Searching for help in this question i got the advice to add [hidden default:today_date _date id:submissiondate ] to the form and enter the js in the footer, like this:

    var today = new Date();
    var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
    var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
    var dateTime = date+' '+time;
    // this will set value for input with id submissiondate 
    jQuery('input#submissiondate').val(dateTime);   
    // check if value exists    
    var new_value = jQuery('#submissiondate').val();
    // display in console   
    console.log('current date time = ' + new_value);

Now the time value finds its way into the confirmation email, but still not into the jetpack crm custom field.
Maybe the problem is that this is a hidden field? I tried alternatively to add [text default:today_date _date id:submissiondate ] to the form to create another field in the hope that this can be used for a custom field in jetpack crm but this does not work either – the custom field shows no value.
Does anybody know how to get this working?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    SOLUTION FOUND – a big shoutout to Santosh @ https://www.codeable.io/! The line [text default:today_date _date id:submissiondate ] in the form was wrong – the correct line is [text submissiondate id:submissiondate].

    Summary: With the javascript in the page footer

        setInterval(add_date, 1000);    
    function add_date() {   
    var today = new Date();
    var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
    var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
    var dateTime = date+' '+time;
    // this will set value for input with id submissiondate   
    jQuery('input#submissiondate').val(dateTime); 
    // check if value exists    
    var new_value = jQuery('#submissiondate').val();
    // display in console   
    console.log('current date time = ' + new_value);
    }

    and the correct field [text submissiondate id:submissiondate] in the form template (hidden on the front end with CSS), i can use the field value in jetpack crm to populate a custom field and i can use it in a confirmation email as well. :-)

    For those who prefer 2-digit-dates, the script can be edited like this:

        setInterval(add_date, 1000);    
    function add_date() {   
    var today = new Date();
    currentMonth = today.getMonth()+1;
    currentMonth = ("0" + currentMonth).slice(-2);
    currentDay = today.getDate();
    currentDay = ("0" + currentDay).slice(-2);
    currentHour = today.getHours();
    currentHour = ("0" + currentHour).slice(-2);
    currentMinute = today.getMinutes();
    currentMinute = ("0" + currentMinute).slice(-2);
    currentSecond = today.getSeconds();
    currentSecond = ("0" + currentSecond).slice(-2);
    var date = today.getFullYear()+'-'+(currentMonth)+'-'+(currentDay);
    var time = (currentHour) + ":" + (currentMinute) + ":" + (currentSecond);
    var dateTime = date+' '+time;

    // this will set value for input with id buchung-versanddatum   
    jQuery('input#buchung-versanddatum').val(dateTime);

    // check if value exists    
    var new_value = jQuery('#buchung-versanddatum').val();

    // display in console   
    console.log('current date time = ' + new_value);
    }

  2. 0

    Checking out the stackoverflow page you mentioned, I noticed this:

    So the javascript code does not have to be placed on the contact form editor. Rather, it should be place on the page where the contact form short code is located: below is an example of the short code

    https://stackoverflow.com/a/50333080/11017029

    Maybe you didn’t put your JavaScript code on the page where the contact form short code is located.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search