Wrapping up portfolio: Contact form, testimonials, Google Analytics, and more

In this series: I'll cover the reasons why I build my portfolio without using a CMS, show my progress of troubleshooting, working through the mess and what I learn in between. The portfolio is in the making.
The purpose of the series: to record my process, visualize my progress for a future improvement, keep myself accountable and connect with you who may have the same journey.

Mar 12, 2021

Wow.

Building this project is quite a journey. My portfolio is 90% complete. Many things I have done since the last episode I shared. Let me feed you with the url: (https://www.gifttanakan.com/index.php) And let's begin.

Contact form

I finally reused the contact form from my school final project and adjusted accordingly. I like the minimal style of it and that it shows errors if you try to submit while leaving some fields blank. Try it.

• Challenge

God. Don't even let me begin. By the look of this contact form, it's so pastel and harmless. It feels like this must be a simple task to finish. I even had the whole form structure and functions already. That should make it easier. But in fact, it's not.

When editing the form and testing if it shows errors where it's supposed to, it didn't work right. It was sent through despite the errors. I compared the form's PHP config line by line with the old one on my final project and couldn't find any missing parts. But how come the old form works but the new one doesn't? It's not supposed to be mysterious. I took time fixing it the whole damn day until I gave up and asked my boyfriend for help.

• Solution

So it turned out that the conditions of the old form was set strangely and somehow still let the form work just fine. I couldn't be bothered finding out. I also don't have a strong understanding of PHP fundamentals enough to be able to fix things at the right place. My boyfriend, under a course of 15 minutes, helped me identify the root of the problem, research the solutions, test till it's bingo, and teach me along the way. I didn't understand all of it right away through my overwhelmed brain and fragile mind that late night. But when came back to look at it again, it seemed to fall into place and in fact, it's a very basic logic at its core. Here's the fix:

PHP form condition (original)

if($_SERVER['REQUEST_METHOD'] == 'POST') {

//set conditions to all fields in form to show errors if empty. There are 10 fields in total. I show one field to keep it short.

if(empty($_POST['firstName'])) {
$firstNameErr = 'Please fill out your first name!';
} else {
$firstName = $_POST['firstName'];
}
}

//Then set another condition to send an email, and here's where I found the condition to be redundant. As the isset checks if these fields are set, if they are, the email function will be executed. 

if(isset($_POST['firstName'], 
$_POST['lastName'],
$_POST['frequency'],
$_POST['gifttips'],
$_POST['comments'],
$_POST['tel'],
$_POST['privacy'])) {

$to = 'tanakan.gth@gmail.com';
$subject = 'Test Email' .date('m/d/y');
$body = ''.$firstName.' has filled out your form '.PHP_EOL.'';
$body .= ' Email: '.$email.' '.PHP_EOL.'';
$body .= ' Your phone number: '.$tel.' '.PHP_EOL.'';
$body .= ' You will receive tips about: '.myGifttips().' '.PHP_EOL.'';
$body .= ' Frequency: '.$frequency.' '.PHP_EOL.'';
$body .= ' Comments: '.$comments.'';

$headers = array(
'From' => 'no-reply@tricia-mcmillan.dreamhost.com',
'Reply-to' => ' '.$email.'');

mail($to, $subject, $body, $headers);
header('Location: thx.php');
}

} //close if $_SERVER

PHP form condition (fixed)

//After setting all variables needed for the form, set $hasErr to false  - this will help simplified the condition that triggers the email function afterwards 

$hasErr = false;

//Move on to set conditions to all fields in form to show errors if empty. Same concept as the original one, but add $hasErr and set it to true

if($_SERVER['REQUEST_METHOD'] == 'POST') {

    if(empty($_POST['firstName'])) {
        $firstNameErr = 'Please fill out your first name.';
        // set $hasErr to true to support the above condition
        $hasErr = true;
    } else {
        $firstName = $_POST['firstName'];

    }

//The key is here. Setting a condition to send an email. If $hasErr is false (!$hasErr) meaning the form is complete with no errors, then the following variables will be executed with the function mail() like so... 

if(!$hasErr) {

        $to = 'tanakan.gth@gmail.com';
        $subject = 'Email from your Portfolio!! ' .date('m/d/y');
        $body = ''.$firstName.' has filled out your form '.PHP_EOL.'';
        $body .= '  Their email: '.$email.' '.PHP_EOL.'';
        $body .= '  Their phone number: '.$tel.' '.PHP_EOL.'';
        $body .= '  They knew you from: '.$medium.' '.PHP_EOL.'';
        $body .= '  They want to know about: '.$topic.' '.PHP_EOL.'';
        $body .= '  About newsletter: '.$privacy.' '.PHP_EOL.'';
        $body .= '  Comments: '.$comments.'';

        $headers = array(
            'From' => 'no-reply@tricia-mcmillan.dreamhost.com',
            'Reply-to' => ' '.$email.'');

        mail($to, $subject, $body, $headers);
        header('Location: thx.php');
    }

}//close if $_SERVER 

I'm happy with the result and learn a lot from it.

Testimonials

I have three testimonials right now. They're great and I'm not sure if I should ask for more. Any how, asking people for testimonials takes a lot of initiatives. It's like you're asking for help and (respectfully) demanding it.

It could feel exhausted because you likely won't get the response right away after the first request. You'll have to do a bunch of follow-ups to get what you want. The mindset I carried while gathering recommendations from people was that I deserved it because I was good at my job and I worked hard for it. Therefore, it's okay to ask and remind them for this. The key is do it with a good manner, be clear and direct with your instructions, and offer to do the same if possible.

I posted a question of how to ask for testimonials on this community. Good tips on there. Check it out here: (https://community.codenewbie.org/gift_tanakan/how-to-ask-for-a-testimonial-4ij6)

Google Analytics

• Challenge:

Yes!! I plugged this into my portfolio as well because why not? I've been using GA for years now and it's like my buddy. I only used to integrate GA with WordPress and Wix websites, so this was my first time to link it to my custom website.

• Solution:

I did a quick Google search and found the way to do it- very simple. After I was done setting up the GA account, I placed the following script within the <head> tags on my HTML files portfolio.

Note: you have to replace the 'X-XXXXXXXXXX' with your unique tracking code from your GA account.

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'X-XXXXXXXXXX');
</script>

I was so excited when the script picked up the analytics from my own IP address for the first time.

Then I removed my IP address from GA to prevent it from tracking my own movement.

Miscellaneous Progress

Buttons all over:
I placed a button at the end of each page/section to guide users to where I want them to be even though the top navigation is easy to find. For us users, it's easier to press the button right then and there.

"Read more" & "Show less" buttons:
This is new for me to learn. It's nice and satisfying to play with. I'm talking about buttons on the Testimonials section on the homepage. By default, it hides another section with the "Read more" button. Once clicked, the rest of the section shows including the "Show less" button. Once click the "Show less" button, the bottom section vanishes again.

This little function was introduced by my boyfriend since I'm still clueless about JavaScript and its frameworks. He walked me through how to do it, research for it, fix the hiccups, then let me experiment with it on my own.

As far as I could catch, we included jquery script in the <head> tag to shortcut our way instead of download jquery into the project. Then we build those two buttons with HTML in the targeted area. After that, we added an id to each one then use JavaScript to target each one to show and hind as we want.

The last task is probably managing my images to fit responsive design. Feel free to tell me if you know how to do this affectively be commenting below.

My next move...?

• Add two wireframing projects
• Add two WordPress projects
• Edit content in each project
• Link stuff together
• Write copy for my About page
• Determine what to do with the Contact page (I'm leaning towards reusing the form I made in my school final project.)
• Gallery in project page? YES and DONE!
• Ask people for testimonials (started, one seems promising)
• Manage pictures for responsive design
• Finish that WP E-commerce (Paypal Complication - probably ditch this)

Question for today:
How will you make a contact form for your custom website? And why?

Action:
Play around with my portfolio, submit form, click buttons, explore links, test on different devices or give me some feedback. I'd like to know and fix if anything breaks. Thanks for your time!