Search code examples
htmlzurb-foundation-5

HTML Coding custom button for "mailto"


So I have started using Foundation. Very nice indeed.
And I am using Foundation's custom "Radius Button", to make a "mailto:" form.

Basically, all I can find online are the ugly default HTML buttons/labels.
Is there a way I can use this button and Foundation's "Input Label's" to create a "mailto:" form?

Here is the source code for the buttons/labels all sorted out:

<div class="row">
  <div class="large-12 columns">
    <div class="panel">

        <h3>Survey</h3>
        <p>I'm looking into what to create, but need ideas!
        Anything will help, and the time it takes you to fill one out, is nothing!</p>

        <div class="row">
            <div class="large-4 medium-4 columns">
                <label>Email (Optional)</label>
                <input type="text" placeholder="Email" />
            </div>
            <div class="large-4 medium-4 columns">
                <label>Idea Subject (What's it about?)</label>
                <input type="text" placeholder="Subject" />
            </div>
        </div>
        <div class="row">
                <div class="large-12 columns">
                  <label>What is your idea?</label>
                  <textarea placeholder="Idea"></textarea>
        </div>
    </div>
    <div class="row">
        <div class="large-4 medium-4 small-4 columns">
        <a href="#" class="small radius button">Send</a>
        <a href="#" class="small radius button">Reset</a>
    </div>
    </div>
  </div>
</div>
</div>

I have never used Foundation before, but I assume, that unless you know the answer just by code, you could implement this into a pre-made Foundation "project".

But anyway, here is what the above HTML looks like when previewed:

HTML when Previewed

See the Send & Reset? That's what I want to use to submit it and send it to me.

Thanks for any given help.


Solution

  • You have to use Javascript if you want to output what people have entered in a textbox. You can use these variables in your mailto:

    &cc = to set the CC recipient(s)
    &bcc = to set the BCC recipient(s)
    &subject = to set the email subject, URL encode for longer sentences, so replace spaces with %20, etc.
    &body = to set the body of the message, you can add entire sentences here, including line breaks. Line breaks should be converted to %0A.

    So a link should look like this:

    <a href="mailto:[email protected]?subject=subject&[email protected]">mail link</a>