Convert PDF File

Yes you can, working on the same solution at the moment.

I would advice you to use fpdf. In the functions.php you create a new hook like this:

add_action( 'wpcf7_before_send_mail', 'save_application_form');
function save_application_form($cf7) {

/* GET EXTERNAL CLASSES */
require(TEMPLATEPATH.'/includes/fpdf.php');

/* example code to generate the pdf
$pdf = new FPDF();
$pdf->AddPage();
$pdf->SetFont('Arial','B',16);
$pdf->Write(5,"Hello, World!\n\n\n");
$pdf->Output(TEMPLATEPATH.'/file/pdf.pdf', 'F');

/* add  the pdf as attach to the email
$cf7->uploaded_files = array ( 'attachedfile' =>  TEMPLATEPATH.'/file/pdf.pdf' );

}

Attention points: don’t forget to add [attachedfile] as parameter in the attachment field of your contact form

I have been searching for a long time scraping pieces of information together to solve this for myself.
Hope I can help you with this.

Eric

Thanks a lot with this information Eric! Hope I’ll be able to manage it now.

Peter

Hey Eric,

I tried to create a PDF as an attached file in the email but it did not succeed with the example you’ve given. It’s the first time I work with php so I don’t have any experience. Do you have any other tips or suggestions which might help?

Thanks in advance!

Peter

Hey Peter,

Can you post you code so I can have a look ??

Thanks,
Eric

Hey Eric,

In fact I literally copied your code in the functions.php. I don’t have any knowledge about this at al… Maybe you know if there is an online manual which clearly describes how to work with this? I have tried this already on fpdf.org but unfortunaly didn’t succeed so far.

Thanks!,

Peter

Hey Peter,

Basically you need to download the fpdf sources from the fdpf website and add it in your template folder. This is the reference I made in the source code above, in this case added to the includes folder

require(TEMPLATEPATH.'/includes/fpdf.php');

Copy the code as suggested to inject code at the moment the form is submitted

add_action( 'wpcf7_before_send_mail', 'save_application_form');
function save_application_form($cf7) {

/* GET EXTERNAL CLASSES */
require(TEMPLATEPATH.'/includes/fpdf.php');

}

Then add your pdf creation script. This is something very custom you need to build. You can get examples from the tutorials section on the fpdf website.

Retrieving values from the submitted form:

$values = $cf7->posted_data;
echo $values['your-value'];

your-value are the different form field names you use in the design of you pdf.

Next save your pdf to disk in order to allow it to attach to the email notification. Don’t worry, the Contact Form 7 plugin automatically deletes this files on successful submit of the email. The folder where you store this pdf should be writable by the script.

$pdf->Output(TEMPLATEPATH.'/file/pdf.pdf', 'F');

Then finally attach the PDF to the form submit action:

$cf7->uploaded_files = array ( 'pdf' =>  TEMPLATEPATH.'/file/pdf.pdf');

[pdf] would be added to the file attachments field on mail config.

Basically this is the way you can generate and send a custom build pdf to the user.

Hope this is more clear. However, you do need some experience creating your pdf file.

Eric

Hey Eric,

Thank you very much for your help. It has not yet succeeded. Soon I go continue with this. I have now another question about working with contact form 7. I know perhaps it’s not a difficult issue for you, but for me it is quite difficult. I’m just a beginner :).

How can I put two text fields next to each other in contact form 7? (without table format)

At the moment I have this:

<p>Uw naam*
[text* your-name class:uwnaam]</p>

<p>Uw email*
[text* your-email class:uwemail]</p>

I like to have this two sections next to each other.

I have already completed the following codes to change the width of these two sections (classes):

Input.uwnaam{width: 250px;}
Input.uwemail{width: 250px;}

Thank you very much again! ??

Hello Peter,

Although a bit off topic, I would be glad to help you with this.

Basically you need to enclose your fields in floating divs:

<div class="formdiv">Uw naam*
[text* your-name class:uwnaam]</div>
<div class="formdiv">Uw email*
[text* your-email class:uwemail]</div>

Then in you stylesheet you should add float:left;

.formdiv {float:left}
Input.uwnaam{width: 250px;}
Input.uwemail{width: 250px;}

After that you can continue to style, don’t forget to do a clear:both removing float elements when needed. Otherwise it might screw up your design.

Btw, Zit jij in Belgi? of Nederland ??

Thanks! It works. Now I have 3 textfields next to each other. How can I get another 3 textfields one row down? Now I have this text in contact form 7:

<div class=”formdiv”>Uw naam*
[text* your-name class:uwnaam]</div>
<div class=”formdiv”>Uw email*
[text* your-email class:uwemail]</div>
<div class=”formdiv”>Uw achternaam*
[text* your-name class:uwachternaam]</div>

<p>Uw leeftijd*
[text* your-email class:uwleeftijd]</p>

And this code now I have in CSS:

.formdiv {float:left}
Input.uwnaam{width: 250px;margin-right: 50px;}
Input.uwemail{width: 250px;margin-right: 50px;}
input.uwachternaam{width: 250px;}

And what do you mean with clear:both removing float elements?

Thanks a lot!

Btw, ik zit in Nederland, jij? ??

Hello everyone,

I’m not finished with this issue yet. Can someone help me further with my last question:

And what do you mean with clear:both removing float elements?

I have already two rows (each row with 3 coloms) below each other. But the field I would like to have below my second row is standing now next to the first row.

I would also like to know how I can change the type, when im using formdiv, the type is changing automatically (become bigger)?

I have done a lot of research about this issue but i’m still trying to solve this problem.

For some people it is not difficult, but I’m just a beginner ??

So, I hope someone can help me further.

Thanks in advance!

Can you give us the link of the link of the page? That way I can have a look and help you.

Thank you for your quick response!

Well, we aren’t online with our website yet. But we can give you an example of our current situation regarding the input for contact form 7 and how to get fields next to each other.

Firstly, we have followed your description about the structure within floating divs such as </div>. In both fields -> contact form 7 and CSS field.

Maybe you can help us further if you see our current situation. I try to explain clearly :).

This is our input in Contact form 7:

<div class=”formdiv”>Uw voornaam*
[text* Uwvoornaam class:uwvoornaam]</div>
<div class=”formdiv”>Uw achternaam*
[text* Uwachternaam class:uwachternaam]</div>
<div class=”formdiv”>Uw email*
[text* your-email class:uwemail]</div>
<div class=”formdiv”>Uw leeftijd*
[text* your-email class:uwleeftijd]</div>
<div class=”formdiv”>Uw telefoonnummer*
[tel* number class:uwtelefoonnummer]</div>
<div class=”formdiv”>besteld op:*
[date* date class:datum]</div>

<p>Onderwerp
[text your-subject class:onderwerp] </p>

This is our input in CSS Field:

.formdiv {float:left}
Input.uwvoornaam{width: 250px;margin-right: 25px;}
Input.uwemail{width: 250px;}
input.uwachternaam{width: 250px;margin-right: 25px;}

.formdiv {float:left}
Input.uwleeftijd{width: 250px;margin-right: 25px;}
Input.datum{width: 250px;}
Input.uwtelefoonnummer{width: 250px;margin-right: 25px;}

Each “.formdiv” (apply in CSS) represents one row consisting of 3 textfields (where someone can fill in things). So, we have in the current situation 2 rows, each row has 3 different textfields.

The point is that in this situation the type of letters automatically where changed in a bigger size. Like.. from size 10 to 12. Also “onderwerp” in input contact form 7 is standing automatically next to the first row. We would like to get “onderwerp” automatacillaly below the second row.

In addition, we hope you can explain to us what you meant with: clear:both removing float elements?

I hope this is a clear explenation about our current situation. And we hope you can help us further. This is still a difficult issue for us.

Thanks again! ??

Hi,

We would like to come back on the first question in this topic about convert to PDF. We are still working on this issue and we have a question about the connection between the send button and the concerning action (add action) after. We used the code as mentioned above in this topic in our php function. But when we use this code, the send button does not response in combination with the add action option -> “wpcf7_before_send_mail”. It does not work unfortunately.

We used the following code (see below) and we added the code to functions.php. Besides that, we added the FPDF files to the includes directory of contact-form-7. Maybe we have to move ‘add_action( ‘wpcf7_before_send_mail’, ‘save_application_form’);’ to another function?? Or there is something wrong with the code??

We hope that someone can help us to solve this problem.

The code that we used:

add_action( 'wpcf7_before_send_mail', 'save_application_form');

function save_application_form($cf7) {

/* GET EXTERNAL CLASSES */
require('https://www.umea.nl/wp-content/plugins/contact-form-7/includes/fpdf.php');

/* example code to generate the pdf */
$pdf = new FPDF();
$pdf->AddPage();
$pdf->SetFont('Arial','B',16);
$pdf->Write(5,"Hello, World!\n\n\n");
$pdf->Output('https://www.umea.nl/wp-content/plugins/contact-form-7/includes/file/pdf.pdf', 'F');

/* add  the pdf as attach to the email */
$cf7->uploaded_files = array ( 'attachedfile' => 'https://www.umea.nl/wp-content/plugins/contact-form-7/includes/file/pdf.pdf' );

}

Thanks in advance! ??

Hello Peter,

Can you look into the Apache error logs for me to see if you have any message, the code looks alright, the only thing I see is that you use hardcoded links to save your pdf, this might be an issue. Although, this should not block the submit button.

Thanks,
Eric

$cf7->uploaded_files no longer accesses the files, in CF7 3.9

CF7 has changed the way to access post data and files, in 3.9

[code]
function my_wpcf7_before_send_mail($cf7) {
$submission = WPCF7_Submission::get_instance();
$files = $submission->uploaded_files();
[/code]
And $files will contain the array of the files.