Jump to content
Please Use CODE Tags

Integrate php into html code for Google Sites?

SupremeGOAT
By SupremeGOAT
in Programming
 Share
Posted

I am trying to make a custom contact us form for a website I made using google sites (I would prefer not to use google forms). I found some really good html and css codes

Spoiler 

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>contact form</title>
<style>
#fcf-form {
    display:block;
}

.fcf-body {
    margin: 0;
    font-family: -apple-system, Arial, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
    padding: 30px;
    padding-bottom: 10px;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    max-width: 100%;
}

.fcf-form-group {
    margin-bottom: 1rem;
}

.fcf-input-group {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
}

.fcf-form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    outline: none;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.fcf-form-control:focus {
    border: 1px solid #313131;
}

select.fcf-form-control[size], select.fcf-form-control[multiple] {
    height: auto;
}

textarea.fcf-form-control {
    font-family: -apple-system, Arial, sans-serif;
    height: auto;
}

label.fcf-label {
    display: inline-block;
    margin-bottom: 0.5rem;
}

.fcf-credit {
    padding-top: 10px;
    font-size: 0.9rem;
    color: #545b62;
}

.fcf-credit a {
    color: #545b62;
    text-decoration: underline;
}

.fcf-credit a:hover {
    color: #0056b3;
    text-decoration: underline;
}

.fcf-btn {
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .fcf-btn {
        transition: none;
    }
}

.fcf-btn:hover {
    color: #212529;
    text-decoration: none;
}

.fcf-btn:focus, .fcf-btn.focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.fcf-btn-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.fcf-btn-primary:hover {
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc;
}

.fcf-btn-primary:focus, .fcf-btn-primary.focus {
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc;
    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}

.fcf-btn-lg, .fcf-btn-group-lg>.fcf-btn {
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    line-height: 1.5;
    border-radius: 0.3rem;
}

.fcf-btn-block {
    display: block;
    width: 100%;
}

.fcf-btn-block+.fcf-btn-block {
    margin-top: 0.5rem;
}

input[type="submit"].fcf-btn-block, input[type="reset"].fcf-btn-block, input[type="button"].fcf-btn-block {
    width: 100%;
}
</style>
</head>

<body>

<link href="contact-form.css" rel="stylesheet">

<div class="fcf-body">

    <div id="fcf-form">
    <h3 class="fcf-h3">Contact Us</h3>

    <form id="fcf-form-id" class="fcf-form-class" method="post" action="contact-form-process.php">
        
        <div class="fcf-form-group">
            <label for="Name" class="fcf-label">Full Name</label>
            <div class="fcf-input-group">
                <input type="text" id="Name" name="Name" class="fcf-form-control" required>
            </div>
        </div>

        <div class="fcf-form-group">
            <label for="Email" class="fcf-label">Your Email Address</label>
            <div class="fcf-input-group">
                <input type="email" id="Email" name="Email" class="fcf-form-control" required>
            </div>
        </div>

        <div class="fcf-form-group">
            <label for="Message" class="fcf-label">Your Message</label>
            <div class="fcf-input-group">
                <textarea id="Message" name="Message" class="fcf-form-control" rows="6" maxlength="3000" required></textarea>
            </div>
        </div>

        <div class="fcf-form-group">
            <button type="submit" id="fcf-button" class="fcf-btn fcf-btn-primary fcf-btn-lg fcf-btn-block">Send Message</button>
        </div>

        

    </form>
    </div>

</div>

</body>
</html>

 

however they need a php file named "contact-form-process.php" to work

 

Spoiler 

<?php
if (isset($_POST['Email'])) {

    // EDIT THE 2 LINES BELOW AS REQUIRED
    $email_to = "you@yourdomain.com";
    $email_subject = "New form submissions";

    function problem($error)
    {
        echo "We are very sorry, but there were error(s) found with the form you submitted. ";
        echo "These errors appear below.<br><br>";
        echo $error . "<br><br>";
        echo "Please go back and fix these errors.<br><br>";
        die();
    }

    // validation expected data exists
    if (
        !isset($_POST['Name']) ||
        !isset($_POST['Email']) ||
        !isset($_POST['Message'])
    ) {
        problem('We are sorry, but there appears to be a problem with the form you submitted.');
    }

    $name = $_POST['Name']; // required
    $email = $_POST['Email']; // required
    $message = $_POST['Message']; // required

    $error_message = "";
    $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';

    if (!preg_match($email_exp, $email)) {
        $error_message .= 'The Email address you entered does not appear to be valid.<br>';
    }

    $string_exp = "/^[A-Za-z .'-]+$/";

    if (!preg_match($string_exp, $name)) {
        $error_message .= 'The Name you entered does not appear to be valid.<br>';
    }

    if (strlen($message) < 2) {
        $error_message .= 'The Message you entered do not appear to be valid.<br>';
    }

    if (strlen($error_message) > 0) {
        problem($error_message);
    }

    $email_message = "Form details below.\n\n";

    function clean_string($string)
    {
        $bad = array("content-type", "bcc:", "to:", "cc:", "href");
        return str_replace($bad, "", $string);
    }

    $email_message .= "Name: " . clean_string($name) . "\n";
    $email_message .= "Email: " . clean_string($email) . "\n";
    $email_message .= "Message: " . clean_string($message) . "\n";

    // create email headers
    $headers = 'From: ' . $email . "\r\n" .
        'Reply-To: ' . $email . "\r\n" .
        'X-Mailer: PHP/' . phpversion();
    @mail($email_to, $email_subject, $email_message, $headers);
?>

    <!-- include your success message below -->

    Thank you for contacting us. We will be in touch with you very soon.

<?php
}
?>

 

since the hosting for google sites isnt exactly adjustable the only way to get code to run on the website is the "insert embed" feature that allows you to add html code. I was wondering if there was a way to get all three hmtl css and php into one. You can probably tell I'm not exactly an expert. thanks for the help

Bolivia.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

PHP is executed on the server side, which means the web server provided by Google would need to support it. As far as I know, this is not the case.

https://support.google.com/sites/thread/51173419/how-to-use-php-in-google-sites?hl=en


As a side note:

Spoiler

 

Remember to either quote or @mention others, so they are notified of your reply

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Could you put the code in a spoiler?

 

Also, as of now, I don’t belive there is a way to add PHP

As for the CSS, if you know how to edit HTML, just add the “style” attribute like: 

<h1 style="css here">

 

As Someone with the username “</TheCoder2019_”, my coding skills are atrocious.

Here are my specs:

Spoiler

 

MSI PRO-VLH H310M

Intel Core i3-8100 (Thanks, @Schnoz!)

GTX 1060 OC 3GB or Intel UHD 630

16GB (2x8) Cosair Vengeance LPX CL16 - 2400MHz

GAMDIAS Argus M1

 

An old friend of mine - Intel stock cooler (temps through the roof like 60 C under load)

 

 

Linux Apps you NEED!

Spoiler

tmux

dhcpd

git

 

 


 

 

 

 

 

 

 

Hi! I love RGB! Who doesn't? Karens that don't have colorful lights on their Facebook page

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
5 minutes ago, Eigenvektor said:

PHP is executed on the server side, which means the web server provided by Google would need to support it. As far as I know, this is not the case.

https://support.google.com/sites/thread/51173419/how-to-use-php-in-google-sites?hl=en


As a side note:

  Reveal hidden contents

 

I see, in the "embed code feature" there is a company that uses this line of code to create a contact us page. 

<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-ad5ed72e-2a90-4545-a884-b097fc312700"></div>

the functionality is perfect. Do you think the same method could be used to create a custom contact us page on google sites?

Bolivia.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
1 minute ago, SupremeGOAT said:

I see, in the "embed code feature" there is a company that uses this line of code to create a contact us page. 


<script src="https://apps.elfsight.com/p/platform.js" defer></script>
<div class="elfsight-app-ad5ed72e-2a90-4545-a884-b097fc312700"></div>

the functionality is perfect. Do you think the same method could be used to create a custom contact us page on google sites?

The file ending .js means this is JavaScript rather than PHP. JavaScript is run on the user's browser, so this should work since Google doesn't need to support anything. In your example the JavaScript file itself is hosted somewhere else though (apps.elfsight.com).

Remember to either quote or @mention others, so they are notified of your reply

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
1 minute ago, Eigenvektor said:

The file ending .js means this is JavaScript rather than PHP. JavaScript is run on the user's browser, so this should work since Google doesn't need to support anything. In your example the JavaScript file itself is hosted somewhere else though (apps.elfsight.com).

so hypothetically speaking i could get javascript code for a contact us form , save that file online and run it with this code sourcing it form the file url?

Bolivia.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
17 hours ago, SupremeGOAT said:

so hypothetically speaking i could get javascript code for a contact us form , save that file online and run it with this code sourcing it form the file url?

Yes and no.

Browser-based javascript cannot send emails.

You still need a backend or a service that the js can link to, in order to  send emails.

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×