Add first line or first x characters of textarea to another inputfield of CF7

Question

I'm using a contact form with CF7 on Wordpress. I would like to use the first line or first x characters of the textarea field on a new input field as the subject of the contact form. I'm now having:

<div class="vacancy_form">
<div class="dt-sc-one-half column first">
[text* text-378 placeholder "Voornaam*"]
</div>
<div class="dt-sc-one-half column">
[text* text-379 placeholder "Achternaam*"]
</div>
<div class="dt-sc-one-half column first">
[email* email-274 placeholder "E-mailadres*"]
</div>
<div class="dt-sc-one-half column">
[tel tel-525 placeholder "Telefoon"]
</div>
<div class="dt-sc-one-column column first">
[textarea* textarea-181 placeholder "Waar gaat uw vraag over?*"]
</div>
<div class="dt-sc-one-column column">
[submit "Verstuur"]
</div>
</div>

So I thought of adding a hidden input field to the form and assign that to the subject in the mail tab of CF7 with this shortcode:

[hidden invisible-subject]

But after that I'm stuck. I have no idea how to 'grab' (a part of) input from one input field to add to another. Any help would be appreciated!

Thanks.

Answer 1

For this, you should use jQuery. You can do one of two things. Either insert this into your theme scripts file if you have access:

In this, I'm using focusout which will capture the text when the user changes focus from the textarea. I've used 50 characters, but you can change to whatever.

jQuery(function($){
 $('textarea[name="textarea-181"]').on('focusout', function(){
        let text = $(this).val();
        // Change 50 to number of characters you want to use in the subject.
        let subject = text.substring(0,50);
        $('input[name="invisible-subject"]').val(subject);
    });
});

Or, you can directly insert this into your Contact Form 7 code, below your submit button. It's exactly the same, but minified so that there are no carriage returns which get turned into <p> by the AutoP function.

<script type="text/javascript">jQuery(function($){$('textarea[name="textarea-181"]').on('focusout', function(){let text = $(this).val();let subject = text.substring(0,50);$('input[name="invisible-subject"]').val(subject);});});</script>