HTML contact content block

Global147

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

Hikin' Mike

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

Global147

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.

Hikin' Mike

You mean a mailto? https://css-tricks.com/all-about-mailto-links/

Global147

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

Hikin' Mike

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' Mike

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.

denisegoldberg

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

Hikin' Mike

@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!

Allen

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.

Global147

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

Hikin' Mike

@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.

Global147

@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; }
}

Global147

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

Hikin' Mike

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/).

Allen

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

Hikin' Mike

@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.

picsbydarah

@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.