Contact Form in Shapely

Hi - I’ve been playing around with the different widgets and even downloaded a plug-in (CF7 Customizer) but can’t get it to look like the form in the Illdy demo screenshot shown in the attachment.

Do you have any recommendations on steps I can take or plug-ins I can download to achieve this?

Really appreciate any guidance here!

Best,
Mike

Hi,

No need for any other plugins, just install the contact-form-7 Contact Form 7 – WordPress plugin | WordPress.org and then go to Appearance -> Customize -> Front page Section -> Contact Us section, and choose a contact form there, and set all the other text values and social icons in the same section, it will display just like the demo.

You can customize the colors in the Appearance -> Customize -> Colors.

Let us know,

Thanks,
laranz.

@Laranz - Thanks so much for your help here!

I don’t think I am seeing the front page section when I’m logged in (attaching a screenshot for reference). Can you tell me if there’s something I’m missing here?

Here are some login credentials in case you need it:
adopsx.com
U: laranz
P: (fcLfpU&RAMdUnegseSYh$@3

@laranz – Thanks again for all the help here!

I replied with a private message with login credentials, but I’m also adding this public reply just in case.

I don’t think I am seeing the front page section when I’m logged in (attaching a screenshot for reference). Can you tell me if there’s something I’m missing here?

Thanks again for all your help!

Were you able to resolve this, please? I can’t seem to get a good CF7 in the text widget in Shapely, yet. Please respond.

Hey there,
Hope you’re doing well today

@bowquivers Do you have your homepage set to a static page? If not, you may need to use a static homepage to be able to add the Contact Form 7 widget.
Please provide me with a link to your site so that I may have a better look at what’s happening with the form.

@samyakd Please see above. Did you set a static homepage?

I look forward to your reply :slight_smile:

Best Regards,
Support

Hi,

I am hosting it on a localhost so can’t give you the link. Posting the photo. This is a text widget added to the main page with just the shortcode of the CF7 form in it. I don’t like the look of it. How do I edit the sizes of the text boxes? I want them to span at least 70% of the window. That should look decent, right? Is there a better way to include forms in Shapely?

Yes, a static page is set (I am a beginner to all this, and I assume by static we just mean the “A Static Page” option on WordPress dashboard -> Settings -> Reading -> Front page displays -> A static page.)

Hi guys,
Thanks for keeping in touch with us.

So just looking at this issue a little further, I’ve realized that you guys are using Shapely, and these screenshots are from Illdy. This makes things a little difficult, however, I’ve come up with some code that should give you a much similar layout. It won’t be exactly the same because its a different theme.

Kindly add and save the following code to Appearance > Customize > Additional CSS:

.messbox label {
    width: 65%;
}

.wpcf7-form p {
    display: inline-block;
}

input.wpcf7-form-control.wpcf7-submit {
    width: 120px;
    margin: 0 auto!important;
}

div#text-3 {
    margin-left: 25%;
}

Now, I had some trouble getting the message box to resize so I had to go into the form’s code and add a custom class inside the form code. I just wrapped the message box in div tags with a class called “messbox” (you’ll see that in the code above).

You can see my form code below for how to wrap the message box. Just compare it with yours at Contact > Contact Forms > Edit:

<label> Your Name (required)
    [text* your-name] </label>

<label> Your Email (required)
    [email* your-email] </label>

<label> Subject
    [text your-subject] </label>

<d i v class=messbox>
<label> Your Message
    [textarea your-message] </label>
</d i v>

[submit "Send"]

I hope this helps :slight_smile:

Best Regards,
Support

I have installed the CF7 plugin, but i can’t find the “contact us” section anywhere. When i click Appearence -> Customize i only find a section called “Static Front Page”, and in the list inside there is no page called “Contact Us” or anything similar.

Am i doing something wrong?

I can’t find the frontpage section> contact us either…

OK so I have used the above code, in contact form7 and custom CSS, however the boxes are not centralised and the message box is very narrow, I’ve been struggling with this for some time now. How do I widen the box?

Ok so - I know I’m probably starting to spam.

I now have the message box the width of the widget on the footer. But the text has turned dark blue…
The 3 boxes (name, email, subject) are labelled with white text as desired, but are scrunched up, rather than spaced out over the message box. Any help?

I have sorted the contact form - on desktop it looks superb (even if I do say so) and I have now solved the scrunching with mobile.
I have inserted the contact form into the footer so that it appears on every page. The message box needs a small amount of tweaking, but I think it looks pretty good.

You can see it at matthew-hodge.com
Here is my additional CSS code:

/*contact form*/
.messbox label {
    width: 95%;
color:#fff;
		margin: auto!important;
}
.wpcf7-form p {
    display: inline-block;
	width: 33%;
	margin: auto!important;
}
input.wpcf7-form-control.wpcf7-submit {
    width: 120px;
    margin: auto!important;
}
div#text-3 {
    margin-left:25%;
}
div.wpcf7-validation-errors {
background: #ffe2e2;
border: 1px solid #ff0000;
color: #C10000;
}
span .wpcf7-not-valid {
    border: 2px solid #ff0000;
}
span.wpcf7-not-valid-tip {
    display: none;
}
.wpcf7-mail-sent-ng {
background: #fff2e2;
border: 1px solid #ffbc8a;
color: #e17731;
}
.wpcf7-mail-sent-ok {
background: #e8ffe2;
border: 1px solid #6fdf51;
color: #1ea524;
}
div.wpcf7-mail-sent-ok:before,div.wpcf7-validation-errors:before {
    font: 26px/30px dashicons;
    margin-right: 16px;
    vertical-align: middle;
}
div.wpcf7-mail-sent-ok:before {
    content: "\f147";
}
div.wpcf7-validation-errors:before {
    content: "\f158";
}