HTML contact content block

Global147Global147 Registered Users Posts: 7 Big grins
Hi,

Ive added a HTML content block to include a contact form on my homepage, this has come up perfectly fine but all i need to know is where and what sort coding i need to add to be able to get any queries from the contact form sent to my email address.


MTIA

Comments

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited August 6, 2019

    What HTML Contact Form are you talking about? The only Contact Form that I know of is found in the Menu section.

  • Global147Global147 Registered Users Posts: 7 Big grins
    As mentioned i have added a contact form on my homepage with a content block by creating HTML/CSS coding. I just wish to know where abouts in the HTML or CSS can i include my email so that when i get a query it goes to my email address.
  • Global147Global147 Registered Users Posts: 7 Big grins

    Yeah im guessing so but i dont know where to put that code thats the trouble.

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    Unfortunately I have no idea what your doing. Do you have a link to your site and even better, the exact code you are using.

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    I should add that if your trying to use either Javsacript or PHP in your Contact Form, it won't work as SmugMug doesn't allow that. The only Contact Form that I know of is using SmugMug's form or if your using WordPress (like I do), you can use that instead.

  • denisegoldbergdenisegoldberg Administrators Posts: 14,220 moderator

    The only other option I am aware of is a Wufoo form. When adding content blocks, under Services there is Wufoo form.

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @denisegoldberg said:
    The only other option I am aware of is a Wufoo form. When adding content blocks, under Services there is Wufoo form.

    Keep forgetting about that one...lol!

  • AllenAllen Registered Users Posts: 10,007 Major grins

    I think I read this long time ago.
    mailto only works if the recipient has a mail app on their computer, does not work with web mail.

    Al - Just a volunteer here having fun
    My Website index | My Blog
  • Global147Global147 Registered Users Posts: 7 Big grins

    www.craigstevensimages.com
    At the bottom of my page
    Html and Css are too long to copy and paste

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited August 6, 2019

    @Global147 said:
    Html and Css are too long to copy and paste

    Need to see the code or where did you find this? This is not a Wufoo Form or a SmugMug form.

    Pretty sure this will not work reference my comments above about Javascript/PHP.

  • Global147Global147 Registered Users Posts: 7 Big grins

    @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
    body {
    background:#2d3b36 url("https://photos.smugmug.com/photos/i-PsQxBzx/0/af55c608/X2/i-PsQxBzx-X2.jpg")no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding-top: 0px;
    }

    h1 {
    color: #fff;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
    padding-top: 30px;
    font-size: px;
    font-weight: 100;
    text-align: center;
    font-family: 'Source Sans Pro', ;
    margin: 0px;
    }

    form {
    margin-left:auto;
    margin-right:auto;
    width: 965px;
    height: 450px;
    padding:30px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    overflow: hidden;
    }

    textarea{
    background: rgba(0, 0, 0, 0.4);
    width: 894px;
    height: 110px;
    border: none;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    display: block;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 18px;
    color: #fff;
    padding-left: 45px;
    padding-right: 20px;
    padding-top: 12px;
    margin-bottom: 20px;
    overflow: hidden;
    }

    select {
    width: 960px;
    height: 48px;
    line-height: 1.5;
    font-size: 1.4em;
    border: none;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -mox-border-radius: 10px;
    color: #fff;
    display: block;
    background: transparent;
    background-color: rgba(0,0,0,.4);
    margin-bottom: 20px;
    display: block;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 18px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    }

    .nameinput, .emailinput {
    width: 894px;
    height: 48px;
    border: none;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    display: block;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 18px;
    color: #fff;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 20px;
    }

    input[type=submit] {
    cursor: pointer;
    }

    input.nameinput {
    background: rgba(0, 0, 0, 0.4);
    padding-left: 45px;
    }

    input.emailinput {
    background: rgba(0, 0, 0, 0.4);
    padding-left: 45px;
    }

    input.message {
    background: rgba(0, 0, 0, 0.4);
    padding-left: 45px;
    }

    select.indent {
    padding-left: 45px;
    cursor: pointer;
    }

    ::-webkit-input-placeholder {
    color: #fff;
    }

    :-moz-placeholder{
    color: #fff;
    }

    ::-moz-placeholder {
    color: #fff;
    }

    :-ms-input-placeholder {
    color: #fff;
    }

    input:focus, textarea:focus {
    background-color: rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
    -webkit-box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
    box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
    overflow: hidden;
    }

    .btn {
    border: none;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 18px;
    width: 200px;
    height: 48px;
    color: #000;
    background: #fff;
    cursor: pointer;
    display: inline-block;
    font-weight: 700;
    position: relative;
    outline: none;
    box-shadow: 0 6px #cecece;
    border-radius: 5px;
    float: right;
    margin-right: 6px;
    }

    .btn:hover {
    background: #fff;
    outline: none;
    box-shadow: 0 4px #cecece;
    top: 2px;
    }

    .btn:active {
    background: #fff;
    outline: none;
    box-shadow: 0 0 #cecece;
    top: 6px;
    }

    .flat {
    border: none;
    cursor: pointer;
    display: inline-block;
    outline: none;
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    }

    .flat:before {
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    line-height: 3;
    font-size: 140%;
    width: 60px;
    }

    .flat {
    width: 960px !important;
    height: 48px;
    overflow: hidden;
    margin-bottom: 20px;
    background: url(http://www.jordancundiff.com/wp-content/uploads/2014/03/icon-dropdown.png) no-repeat right;
    }

    @media only screen and ( min-width: 768px ) and ( max-width: 1035px ) {
    h1 { font-size: 80px; }
    form { width: 736px !important; }
    #wpcf7-f156-p143-o1\20 formwrap > form > p > span.wpcf7-form-control-wrap.Subject.flat > select, #wpcf7-f156-p143-o1\20 formwrap > form > p > span.wpcf7-form-control-wrap.Subject.flat { width: 731px !important; }
    .nameinput, .emailinput, #wpcf7-f156-p143-o1\20 formwrap > form > p > span.wpcf7-form-control-wrap.Message > textarea { width: 666px !important; }
    }

    @media only screen and ( max-width: 804px ) {
    h1 { font-size: 50px; }
    form { width: 450px !important; }
    #wpcf7-f156-p143-o1\20 formwrap > form > p > span.wpcf7-form-control-wrap.Subject.flat > select, #wpcf7-f156-p143-o1\20 formwrap > form > p > span.wpcf7-form-control-wrap.Subject.flat { width: 445px !important; }
    .nameinput, .emailinput, #wpcf7-f156-p143-o1\20 formwrap > form > p > span.wpcf7-form-control-wrap.Message > textarea { width: 380px !important; }
    }

    @media only screen and ( max-width: 517px ) {
    h1 { font-size: 30px; }
    form { width: 295px !important; }
    #wpcf7-f156-p143-o1\20 formwrap > form > p > span.wpcf7-form-control-wrap.Subject.flat > select, #wpcf7-f156-p143-o1\20 formwrap > form > p > span.wpcf7-form-control-wrap.Subject.flat { width: 290px !important; }
    .nameinput, .emailinput, #wpcf7-f156-p143-o1\20 formwrap > form > p > span.wpcf7-form-control-wrap.Message > textarea { width: 225px !important; }
    .btn { width: 110px; }
    }

  • Global147Global147 Registered Users Posts: 7 Big grins
    edited August 6, 2019

    HTML wont let me send it. Apologies for lack of info

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    Looks like your using the Contact 7 form for WordPress. You CAN'T use that form within SmugMug. You need to use that within WordPress. I use WordPress as my main website and I use SM ONLY to display my galleries. My contact form is from Contact 7 as well (https://www.imagesinthebackcountry.com/contact-me/).

  • AllenAllen Registered Users Posts: 10,007 Major grins

    BTW, at Smugmug you can not use either class name "body" or "HTML" in the widgets.

    Al - Just a volunteer here having fun
    My Website index | My Blog
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @Global147 said:
    HTML wont let me send it. Apologies for lack of info

    Don't need it now, but for future reference, you can use the code feature here (Format > code) to wrap code.

  • picsbydarahpicsbydarah Registered Users Posts: 12 Big grins
    edited August 24, 2019

    @Global147 said:

    form {
    margin-left:auto;
    margin-right:auto;
    width: 965px;
    height: 450px;
    padding:30px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    overflow: hidden;
    }

    The issue is you can't alter the Javascript on Smugmug.

    There are some other ways to do it - like a form in a new window (sort of acts as a ghetto pop-up), if you have WordPress; WuFoo (which sucks - you have to pay extra if you don't want their logo all over the place); or the contact form under settings/account info in SM. Unfortunate, I know.

Sign In or Register to comment.